Parent items

Status
Niet open voor verdere reacties.
glompie

glompie

Gebruiker
Lid geworden
24 dec 2011
Berichten
196
Een menu met een top button een sub-item en een subsub-item.

Ik heb nu dit:

Code: 
<li class="top_btn"><a href="#" title="">Hoofd item</a>
<ul>
<li class="sub1 deeper parent"><a href="#" title="">Sub-item</a>
<ul>
<li class="sub2"><a href="pagina.php" title=""<?php if ($page == 'pagina.php') { ?>class="active_item"<?php } ?>>SubSub-item</a></li>

Code: 
/* Current state buttons top row */
.menu li a.active_top{background-image: url('../img/menu/menuhover.png');background-repeat:repeat-x;color:#000;}

/* Current state subsub-item */
.menu li a.active_item:visited{background-color:#B96919;}

Ik was dus bezig met current state buttons niet met css te doen maar met php. Dat werkt dus alleen als de knop een pagina heeft.
Als hij 3 lagen diep zit hebben de knoppen daarboven alleen een #je.
Hoe krijg ik nu de 2 parent items boven het subsub-item geadresseerd met css?

Edit: Kan natuurlijk helemaal niet wat ik wil want dat bestaat gewoon niet.

Jquery is trouwens handiger alleen ook maar voor menu's met 1 laag.

Code: 
<script>
 $(function(){
    var currenthref=window.location.href;
    $("#hormenu a[href=" + currenthref + "]").addClass('active');  //adds active class to the current url.
}) 
</script>
 
Laatst bewerkt:
Hoi glompie,
Ik zou het zonder php en met css doen.
Elke pagina krijgt een eigen id in de body:
HTML: 
<body id="home">
<body id="pag1">
<body id="pag2">
<body id="pag3">
<body id="pag4">
enz.
In het menu krijgt elke pagina dezelfde naam, maar nu als class, en de verschillende hoofd- en submenu's krijgen allemaal een eigen id.

En dan in de css de highlight-kleuren, afhankelijk van wat de id van de body is, bv.:
Code: 
#home .home,
#pag1 #top_btn1,
#pag2 #top_btn1,
#pag3 #top_btn1,
#pag4 #top_btn1  { /* als pagina's 1, 2, 3 en 4 onder hetzelfde 1e hoofditem vallen, 1e hoofditem highlighten */
    color: yellow;
    }
#pag1 #sub_btn1,
#pag2 #sub_btn1 { /* als pagina's 1 en 2  onder hetzelfde 1e subitem vallen, 1e subitem highlighten */
    color: yellow;
    }
#pag3 #sub_btn2,
#pag4 #sub_btn2 { /* als pagina's 3 en 4  onder hetzelfde 2e subitem vallen, 2e subitem highlighten */
    color: yellow;
    }
#pag1 .pag1,
#pag2 .pag2,
#pag3 .pag3,
#pag4 .pag4 { /* en dan de actuele pagina zelf ook highlighten */
    color: yellow;
    }
Zo kan je telkens het hele stamboompje van de hoofd-, sub- en subsub-items aflopen.
Hiermee kan het menu (bv. als php-include) op alle pagina's hetzelfde blijven; ook de css is voor alle pagina's gelijk.
Alleen de body-id van de pagina's is anders, en daarmee wordt het highlighten van de goede stamboom getriggerd. :)
 
Dank je voor de uitleg. het lukt me alleen nog niet dit in m'n bestaande menu te gebruiken.
Waar hoort de class van .home in de html te staan?
Bedoel je zoiets? <li class="home top_btn"><a href= etc.
 
Kom er gewoon niet uit...

Misschien doe ik het helemaal verkeert, kun je eens kijken?
Hij doet niks alleen overbodige arrows plaatsen achter kroket en kipcorn. :(

edit: misschien is dit handiger: http://www.lijstvan.nl/currentstate.zip

CSS
Code: 
/* ################# TOP MENU ############### */
/* BESTANDSNAAM: menu.css */
.menu {
background-image:url('../img/menu/menugradient.png');
background-repeat:repeat-x;
font-family : Helvetica, sans-serif;
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:1003;
}
.menu ul{list-style:none !important;}
.menu li{float:left;margin:0 1px 0 0;}
.menu li a{display:block;height:35px;line-height:35px;background-color:transparent;color:#ccc;
text-decoration:none;font-size:12px;font-weight:bold;padding:0 13px 0 13px; float:left;z-index:99999 !important; /* padding breedte knoppen in balk */
}
.menu li a:hover{position:relative;color:#000;background-color:#E5C47C;}
.menu li:hover{position:relative;}
.menu li:hover > a{background-image: url('../img/menu/menuhover.png');background-repeat:repeat-x;color:#000;}
.menu :hover ul{left:0;top :35px;width:145px;}
.menu ul, .menu :hover ul ul{position:absolute;left:-99999px;top:-99999px;width:0;height:0;margin:0;padding:0;list-style-type:none;}
.menu :hover ul :hover ul{left:160px;top:0;white-space:nowrap;width:135px;height:auto;}
.menu :hover ul li{margin:0;border-bottom:1px solid #111;}
.menu :hover ul li a{width:160px;padding:0;text-indent:10px;background:#CE831D;color:#000;height:23px;line-height:23px;font-weight:normal;}
.menu :hover ul :hover{background-color:#F9CC62;color:#000;}
.menu :hover ul :hover ul li a{width:315px;padding:0;text-indent:10px;color:#000;}
.menu li ul li.sub1.deeper.parent > a{background-image: url('../img/menu/arrow.gif');background-repeat:no-repeat;background-position:152px 10px;}


/* Current state buttons */
#home .home,
#snacks #top_btn,
#drank #top_btn,
#kroket #top_btn,
#kipcorn #top_btn{ 
color: yellow;
}

#kroket #sub_btn1,
#kipcorn #sub_btn1 {
color: yellow;
}

#cola #sub_btn2,
#sinas #sub_btn2,
#cassis #sub_btn2,
#tonic #sub_btn2 { 
color: yellow;
}
    
#home .home,
#kroket .kroket,
#kipcorn .kipcorn,
#cola .cola,
#sinas .sinas,
#cassis .cassis,
#tonic .tonic {
color: yellow;
}

HTML
Code: 
<div style="margin:20px 0 0 100px;">
<!-- BEGIN MENU -->
<nav>
<ul id="home" class="menu">
<li class="home top_btn"><a href="index.php" title="">Home</a></li>

<li class="snacks top_btn"><a href="#" title="">Snacks</a>

<ul>
<li class="kroket sub_btn1"><a href="Kroket.php" title="">Kroket</a></li>
<li class="kipcorn sub_btn1"><a href="Kipcorn.php" title="">Kipcorn</a></li>
</ul>
</li>

<li class="drank top_btn"><a href="#" title="">Drank</a>
<ul>
<li class="frisdrank sub_btn1 deeper parent"><a href="#" title="">Frisdrank</a>
<ul>
<li class="cola sub_btn2"><a href="Cola.php" title="">Cola</a></li>
<li class="sinas sub_btn2"><a href="Sinas.php" title="">Sinas</a></li>
<li class="cassis sub_btn2"><a href="Cassis.php" title="">Cassis</a></li>
<li class="tonic sub_btn2"><a href="Tonic.php" title="">Tonic</a></li>
</ul>
</li>

</ul>
</nav>
<!-- END MENU -->
</div>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan