Submenu laten inspringen
Nu heb ik echter een klein probleempje waar ik na lang tobben en pielen niet helemaal uit kom. Ik denk dat het meer aan mijn css ligt dan aan mijn php, maar zeker weten doe ik het niet.
Dit is een stukje van mijn menu:
<li>
Code (php)
<ul>
<li>
Code (php)
<li>
Code (php)
<li>
Code (php)
</ul>
Zoals je kunt zien heb de menu items gestyled met een div. En wel div class subnav.
Voor de sub items van het menu (product 1, 2, 3) zou ik graag zien dat deze inspringen zodra het menu openklapt. Dat gebeurd nu alleen als een item actief is mbv een div class subsubnav.
Deze wordt dus echter genegeerd als het desbetreffende onderdeel niet actief is.
ik heb ook geprobeerd mijn ul class aan te passen van de main directory, maar ook dit zonder succes.
Ik weet het even niet meer... ben al uren bezig en zie even geen oplossing.
Misschien dat iemand mij hier kan helpen?
Mocht er meer code of iets nodig zijn dan hoor ik dat wel.
Alvast bedankt!
Gewijzigd op 01/01/1970 01:00:00 door Denise
sorry.... hij staat in de verkeerde topic.
ik had toch echt php gekozen dacht ik...
kan iemand hem voor me verplaatsen? Ik mag dat kennelijk niet.
Edit je topic ingevolgs
Voorbeeld, css en je eventuele javascript? Zie ik hier nergens staan..
Javascript niet van belang, onderstaand het stukje css wat van belang is:
li {
padding: 0px;
margin: 0px;
list-style:none;
text-align:left;
}
ul {
text-decoration:none;
}
#subnav_container{
clear:left;
float:left;
width: 235px;
height: 100%;
background:url(images/subnav_achtergrond.jpg);
min-height:220px;
}
.go_away{
display: none;
}
ul.subnav {
list-style:none;
text-align:left;
padding-top: 3px;
font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
font-weight: normal;
color:#333333;
display:block;
width:199px;
height:18px;
}
div.subnav {
color:#333333;
padding-left:25px;
width:199px;
height:18px;
padding:0 0 0 25px;
margin:3px;
background: #e9edef url(images/menuactive.gif) no-repeat;
}
#subnav a, #subnav a:visited {
text-decoration:none;
text-align:left;
padding:0 0 0 25px;
margin:3px;
font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
font-weight: normal;
color:#333333;
display:block;
width:199px;
height:18px;
background: url(images/menu.gif) no-repeat;
}
#subnav a:hover {
background: #e9edef url(images/menuhover.gif) no-repeat;
}
div.subsubnav {
color:#333333;
width:184px;
height:18px;
padding:0 0 0 40px;
margin:3px;
background: #e9edef url(images/menuactive_sub.gif) no-repeat;
}
ul.subsubnav {
list-style:outside;
text-align:left;
padding-top: 3px;
font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
font-weight: normal;
color:#FF0000;
display:block;
width:199px;
height:18px;
}
#subsubnav a, #subsubnav a:visited {
text-decoration:none;
text-align:left;
padding:0 0 0 40px;
margin:3px;
font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
font-weight: normal;
color:#333333;
display:block;
width:184px;
height:18px;
background: url(images/menu.gif) no-repeat;
}
#subsubnav a:hover {
background: #e9edef url(images/menuhover.gif) no-repeat;
}
h1.subnav {
color:#fff;
width:199px;
height:18px;
padding:0 0 10px 25px;
margin:3px;
}
h3.subnav {
padding: 10px 10px 10px 15px;
color:#FFF;
}
Ik hoop dat iemand me kan helpen, heb er vandaag weer even naar gekeken en kom er nog steeds niet uit.
Zoals gezegd, het actieve submenu verspringt keurig, maar alle submenu's moeten voor de overzichtelijkheid inspringen en het actieve submenu heeft dan een hihglight.
Alvast bedankt!
Heb je even een linkje naar een online pagina? Dat is makkelijker helpen.
http://www.pukt.nl/ditco/productrange/industrial.php
Zoals je ziet is links het submenu. De pagina industrial supplies is nu actief.
de ondeliggende pagina's
product 1
product 2
product 3
zijn de subpagina's. Deze zijn nu niet ingesprongen. Als je product 1 aanklikt zie je dat hij wel inspringt en dan de highlight als zijnde actief heeft.
Wat ik graag wil is dus dat alle subpagina's inspringen, zodat het ook duidelijk is dat het subpagina;s zijn.
(industrial en product 1 zijn de enige pagina's die nu actief zijn)
<li>
Code (php)
De div class had ik niet bij de else echo geplaatst, alleen bij de actieve.
Dan zie je natuurlijk niks gebeuren als de link niet actief is.
Beetje stom eigenlijk.