Eerste menuitem andere achtergrond dan de rest

Status
Niet open voor verdere reacties.
B

*Baia*

Gebruiker
Lid geworden
17 mei 2001
Berichten
438
Dag,

Ik loop vast op een bepaald gedeelte van mijn horizontale menu. Ik maak gebruik van dit menu: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

Nu heb ik een horizontaal menu welke via css opgemaakt word. Zoals onderstaande code aangeeft word aan het menuitem wat actief is de class 'current' meegegeven. Het allereerste menuitem (links) heeft echter een andere achtergrond dan de rest van de menuitems. Hoe kan ik er voor zorgen dat aan het eerste menuitem bijvoorbeeld 'current1' word meegegeven of is dit niet mogelijk?

Code: 
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

Ik hoop dat iemand mij hier mee kan helpen want ik kom niet verder.

Gr. jeroen
 
Laatst bewerkt:
Volgens mij kan wat je hier probeert simpelweg met CSS.

Het gaat erom dat het achtergrond plaatje van een element veranderd geloof ik?

Stel je hebt dit element:
Code: 
<a class="menuitem" href="pagina.html">Link</a>

Om te beginnen moet het een vierkantje worden met een achtergrondplaatje. Maar een <a> element is een inline element en kan dus geen height of width krijgen. Geen nood, dan maken we er gewoon een block element van. Maar block elementen nemen de volledige breedte van een pagina in. Daarom floaten we het element naar links. Dan kunnen we meteen de hoogte opgeven als je wilt. Verder willen we een beetje padding aan de zijkanten anders ziet het er zo lelijk uit. Nou nog een leuke border en een achtergrond kleur (of plaatje) en we zijn al bijna klaar.

Code: 
a.menuitem
{
  display: block;
  float: left;
  height: 25px;
  padding: 5px;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  background-image: url(image1.jpg);
}

En nou nog een effect als je er oveheen zweeft. Instellingen die we niet overschrijven hoeven we niet nog een keer neer te zetten, dus display:block, padding en height laten we zoals het is.

Code: 
a.menuitem:hover
{
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  background-image: url(image2.jpg);
}


In totaal krijg je dan deze code, zonder een drupje javascript. En je kunt het precies stijlen zoals je wilt met CSS :thumb:

HTML: 
<html>
<head>
<style type="text/css">
a.menuitem
{
  display: block;
  height: 25px;
  padding: 5px;
  float: left;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  background-image: url(image1.jpg);
}

a.menuitem:hover
{
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #000000;
  background-image: url(image1.jpg);
}
</style>

</head>

<body>
<a class="menuitem" href="">Test</a>
<a class="menuitem" href="">Test</a>
<a class="menuitem" href="">Test</a>
<a class="menuitem" href="">Test</a>
<a class="menuitem" href="">Test</a>
</body>

</html>
 
Dag Glest,

Je hebt gelijk alleen dat is niet precies wat ik bedoel. Ik heb een bijlage meegestuurd met wat ik precies bedoel.

Wanneer je over een menuitem gaat komt daaronder een div te staan met submenuitems. De achtergrond van de hoofdmenuitems is een afbeelding waarbij je ziet dat de linkerkant een ronding heeft.

Het javascript die dit genereerd regelt welk hoofdmenuitem de hover afbeelding standaard krijgt toegewezen. Wanneer het eerste item word toegewezen moet deze een andere achtergrondafbeelding krijgen (dus niet class='current' maar bijvoorbeeld class='currentfirst') waarbij ik deze in de css deze kan toewijzen.

Snap je beter wat ik bedoel?
 

Bijlagen

  • helpmij_voorbeeld.jpg
    helpmij_voorbeeld.jpg
    21,8 KB · Weergaven: 28
  • helpmij_voorbeeld-fout.jpg
    helpmij_voorbeeld-fout.jpg
    22,3 KB · Weergaven: 19
Laatst bewerkt:
Er zijn ook CSS menu's met submenu's maar goed, anders verander je deze functie:
Code: 
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

Naar dit:
Code: 
function highlighttab(aobject, suffix)
{
  if (suffix == undefined)
    suffix = "";
  if (tabobjlinks == undefined)
    collecttablinks();

  for (i = 0 ; i < tabobjlinks.length; i++)
    tabobjlinks[i].className=""

  aobject.className="current"+suffix;
}

En in het onmouseover event kun je een extra argument geven. Bijvoorbeeld:
Code: 
<div onmouseover="highlighttab(this, 'first')">
Dan wordt de classname "currentfirst". Maar je kunt het argument ook weg laten dan wordt er niks achter geplakt. Let wel op dat je de goede quotes gebruikt. Als je voor het html attribuut dubbele quotes gebruikt moet je voor het javascript argument enkele quotes gebruiken.
 
Dag,

Dat ziet er al erg goed uit.

Ik gebruik voor een hoofdmenuitem:
<li><a href="" onmouseover="expandcontent('sc1', this)" onmouseout="do_onload()" id="tab1">Item 1</a></li>

Hieronder nog meer javascript welke van invloeg is op 'highlighttab'. Gaat het met jouw voorbeeld al werken? Ik heb het vermoeden van niet namelijk. Ik hoop dat je de javascript ook zo kan aanpassen dat het gaat werken! In dat geval ben ik je eeuwig dankbaar!!
PHP: 
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
//var initialtab=[1, "sc1"]

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
 
Laatst bewerkt door een moderator:
Je zou er ook voor kunnen kiezen om de achtergrond etc met CSS te doen en de submenu's met javascript. Maargoed, als we toch bezig zijn, het kan wel, dan moet je naast de aanpassing van mijn vorige post ook deze functie aanpassen:

Code: 
function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

Naar dit:
(alleen de rode delen zijn echte aanpassingen)
Code: 
function expandcontent(cid, aobject[COLOR="Red"], suffix[/COLOR])
{
  if (disabletablinks==1)
    aobject.onclick =  function(){"return false;"}
  if (document.getElementById)
  {
    highlighttab(aobject[COLOR="Red"], suffix[/COLOR])
    if (turntosingle==0)
    {
      if (previoustab!="")
        document.getElementById(previoustab).style.display="none"
      document.getElementById(cid).style.display="block"
      previoustab=cid
    }
  }
}

En in de HTML iets als dit:
Code: 
<a href="" onmouseover="expandcontent('sc1', this[COLOR="Red"], 'first'[/COLOR])" onmouseout="do_onload()" id="tab1">Item 1</a>
 
Dag Glest,

Ja, dit is inderdaad hoe het moet zijn! Top!!

Ik zit alleen nog met één klein dingetje. Wanneer de pagina geladen word kan ik bovenin de 'head' met
Code: 
<script type="text/javascript">var initialtab=[1, "sc1"]</script>
aangeven welk menuitem geladen moet worden (hoverafbeelding standaard geladen + div met submenu's).

Die laad nu echter de verkeerde achtergrondafbeelding.

Moet dat iets zijn als "do_onload('first')"?

<li><a href="" onmouseover="expandcontent('sc1',this,'first')" onmouseout="do_onload()" id="tab1">Test item</a></li>

Ik ben je al heel erg dankbaar!
 
Is het mogelijk om het aantal links in collecttablinks te tellen en de eerste de 'suffix' mee te geven: first? Dan is het toch ook klaar of redeneer ik nu verkeerd?

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(suffix){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
 
Ik zou deze functie veranderen:
Code: 
function do_onload(suffix){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

Naar dit:

Code: 
function do_onload(suffix)
{
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1][COLOR="Red"], initaltabl[2][/COLOR]);
}

En in de head kun je dan de suffix meegeven die bij de eerst te laden tab hoort:
Code: 
<script type="text/javascript">var initialtab=[1, "sc1"[COLOR="Red"], "first"[/COLOR]]</script>
 
Jaaa! Ik ben je eeuwig dankbaar! Dit is precies zoals het moest...mag ik je ook financieel bedanken?

gr. jeroen
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan