[OPGELOST] Dropdown feature in een zelfgemaakt menu template implementeren

[brentnl]

Hey,

Ik heb het volgende probleem, welke ik ook in het engelstalige gedeelte heb gesteld:
Ik heb (met hulp van dit forum) een eigen menu template in elkaar gezet voor mijn website. Nu wil ik echter een dropdown variant inbouwen omdat ik nog wat extra menu items kwijt wil.
Ik wil ongeveer iets creeeren zoals hier.
In ieder geval dus een horizontale variant, dit omdat ik maar een beperkte ruimte heb.

Ik heb diverse andere dropdown templates bekeken, maar kreeg toch niet echt door hoe het nu precies in zijn werk gaat..

Mijn template

Code: Select all

<ul>
{foreach from=$nodelist item=node}
   {if $node->alias == $page_alias}
<li><a href="{$node->url}"><img src="images/menu/pressed/{$node->menutext}.png" alt="{$node->menutext}" border="0"/></a></li>
{else}
<li><a href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a></li>
{/if}
{/foreach}
</ul>

CSS

Code: Select all

div#menu {
height:43px;
width:535px;
margin:0 auto;
padding:0;
}

div#menu ul {
list-style:none;
}

div#menu a:hover {
background-color:none;
}

div#menu li {
display:inline;
margin-left:-3px;
}

Ik hoop dat er iemand is die me op de goede weg kan helpen  ;D

[Jos]

De link die je gaf staat een l teveel in, waardoor men op een andere pagina beland..

Maar het menu dat je wenst is mooi, maar best ingewikkeld.
Uitgangspunt is in ieder geval het minimal_template menu. De template die je nu gebruikt laat geen submenu's zien.

Die minimal_template moet je zodanig aanpassen dat het één op één overeenkomt met de html bron van Stu Nichols.
Daar zit em de lastige kneep, omdat er nogal wat browserafhankelijke zaken in staan.
Bovendien heeft het derde niveau een class nodig. De minimal_template moet je met smarty variabelen en if/else functies dan zodanig uitbreiden dat je voor dat derde niveau die class kunt toevoegen.

De css die je al hebt, komt ook niet met het gewenste menu overeen. Daar zou je ook weinig aan moeten hoeven veranderen.

Dit is de CSS die je moet gebruiken:

Code: Select all

.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:20px 0 60px 0; background:#fff; position:relative; z-index:100;}
.menu ul {padding:0; margin:0; list-style-type: none;}

.menu ul li {float:left; border-left:1px solid #eee; width:106px;}

.menu ul li a, .menu ul li a:visited {display:block; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}

.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}

.menu ul li ul {visibility:hidden; position:absolute; top:30px; left:0; }


.menu ul li:hover a,
.menu ul li a:hover {color:#fff; background:#b3ab79;}

.menu ul li:hover ul,
.menu ul li a:hover ul {visibility:visible; width:749px;background:#b3ab79; color:#fff;}

.menu ul li:hover ul.right_side li,
.menu ul li a:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}

.menu ul li:hover ul.left_side li,
.menu ul li a:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}

.menu ul li:hover ul li a.sub,
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:0; top:30px; }

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {visibility:visible; color:#000; background:#dfc184;}

.menu ul li:hover ul.right li {float:right;}

.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}

.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

Het is dus vooral zaak om de minimal_template de menu-html zodanig te laten uitspugen dat je daarmee de html van het gewenste menu exact nabouwt.

[brentnl]

Zo is het nu:


En dit wil ik bereiken:

(opmaak/uiterlijk van het dropdown menu is niet relevant, dat hoeft niet exact volgens het voorbeeld te zijn natuurlijk)

En wat bedoel je met het 3e niveau? in princiepe is 1 child genoeg, dus:

item 1
item 2
-- item 2.1
-- item 2.2
item 3

[Jos]

Ik begrijp dat je vanuit je bestaande menu toe wilt werken naar de gewenste situatie. Ik vind dat niet verstandig, vooral niet als je met zoveel vragen zit.

Begin met een schone lei en probeer eerst eens je voorbeeldmenu via ModuleManager aan de praat te krijgen. Ga pas daarna de stijl naar je wens aanpassen.

Als je geen derde niveau hebt, wordt het al een stuk makkelijker...

Heb je de broncode op de site van CSS-play gezien die je na moet bouwen?

[brentnl]

ja die heb ik gezien, maar omdat dat een moeilijker menu betreft, luister ik toch naar jou en ben ik begonnen met het uitbouwen van de minimal_menu template...

Die heb ik nu alsvolgt omgebouwd, mijn menu ziet er nu hetzelfde uit als bij mijn vorige eigengemaakte template. Perfect dus, alleen de 2e niveau items, komen er gelijk te staan, waardoor mijn menu niet meer klopt. Het 2e niveau zou eigenlijk pas bij een hover tevoorschijn moeten komen..



is het 'minimal_menu' template hier wel geschikt voor en moet ik niet met het "Simple - Navigation Horizontal" menu aan de slag?

EDIT::
Ik heb nu het simple navigation menu alsvolgt aangepast:

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}


{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent"><a class="menuactive menuparent" href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{elseif $node->haschildren == true}
<li class="parent"><a class="parent" href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{elseif $node->current == true}
<li class="currentpage"><img src="images/menu/pressed/{$node->menutext}.png" alt="{$node->menutext}" border="0"/>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Echter laat hij dan nog steeds de 'child' items zien..

[Jos]

Het minimal_menu is een basis waarmee je aan de slag moet om de html-code van css-play na te bouwen.

Het klopt dus dat je nu al het tweede niveau ziet. De css van css-play zorgt er juist voor dat die verborgen blijft totdat er een hover plaatsvindt. Maar dat kan de css alleen doen als je alle elementen en attributen in de html hetzelfde hebt staan.

[brentnl]

bovenaan het menu template, staat dat ik de volgende css classes moet gebruiken. alleen daar zit er geen bij voor een child class ofzo...

hoe pak ik dat aan?

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

[Jos]

Alles tussen {* en *} deleten   
Die heb je niet nodig want je moet de id's en classes van css-play invoegen

[brentnl]

nja dit is nu dus mijn menu template:

Code: Select all

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}


{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactivemenuparent"><a class="menuactivemenuparent" href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{elseif $node->haschildren == true}
<li class="parent"><a class="parent" href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{elseif $node->current == true}
<li class="currentpage"><img src="images/menu/pressed/{$node->menutext}.png" alt="{$node->menutext}" border="0"/>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><img src="images/menu/normal/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/normal/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

daarbij heb ik de volgende css 'gebrouwen'.. alleen snap ik nog niet, hoe ik juist met de visable en hidden tags het ene (li) zichtbaar kan maken door over een ander object (ul) te hoveren..

Code: Select all

ul {visibility:visible;}
ul:hover {visibility:visible;}

.parent li {visibility:hidden;}
.parent li:hover,
.parent li a:hover {visibility:visible; background:#b3ab79; color:#fff;}

maar zo klopt het dus niet, want "ul" is het gehele menu en niet alleen het gedeelte wat ik zichtbaar wil maken (de sub items)... en nu heb ik dus .parent li op hidden staan... maar die kan ik niet visable maken ..

[Jos]

Zoals eerder gezegd... aan de css van css-play zou je vooralsnog niet moeten hoeven knoeien.
Je moet eerst de html output van MenuManager gelijk zien te krijgen.

[brentnl]

ja maar aan die css van cssplay wil ik me niet zo vastklampen, dat was alleen een voorbeeld om alles te verduidelijken. Als ik het op deze manier, samen met hulp van jou, zelf kan leren, zou dat alleen maar beter zijn voor projecten in het vervolg.

Daarom wil ik je vragen om me te helpen met het verbeteren van de code die ik tot nu toe heb.. 

[Jos]

aan die css moet je je naar mijn mening juist wel eerst vastklampen. Dat is namelijk het moeilijkste van een browseronafhankelijk uitklapmenu.

kleurtjes, afmetingen en achtergrondplaatjes kun je later wel toevoegen/wijzigen.

En de css zal niet functioneren als de html er niet één op één op is afgestemd.

[brentnl]

kleurtjes, afmetingen en achtergrondplaatjes kun je later wel toevoegen/wijzigen.

Klopt, dit wil ik ook pas later doen..

En de css zal niet functioneren als de html er niet één op één op is afgestemd.

Klopt ook, maar ik heb de html al klaar (simple template gecombineerd met mijn eigen template) en wil daar een CSS bij schrijven, ipv de CSS van dat menu van CSSPLAY gebruiken en vervolgens mijn template HTML daarop aan te passen..

Naar mijn mening zit ik er niet ver vanaf, ik moet volgens mij alleen aan mijn template een class toevoegen zodat ik die in de css visable of juist niet kan maken, betreffende de child-items...

[Jos]

Daar kan ik dus niet in meegaan  ;D

Naar mijn idee zou de css van css-play met onderstaande template kunnen samenwerken:

Code: Select all

<div class="menu">
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<!--[if lte IE 6]><table><tr><td><![endif]--><ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} 
   {if $node->depth == 1}<!--[if IE 7]><!--></a><!--<![endif]-->{else}</a>{/if}

{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} <!--[if IE 7]><!--></a><!--<![endif]-->

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} 
   {if $node->depth == 1}<!--[if IE 7]><!--></a><!--<![endif]-->{else}</a>{/if}

{/if}

{/foreach}

{repeat string="</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
" times=$node->depth-1}</li>
</ul>
{/if}
</div>

De classes "sub" en "right_side" zijn hierin niet meegenomen. Maar omdat je aangaf dat je geen 3e niveau hebt, heb je daar geen last mee...

[brentnl]

je bent toch stiekem wel een held 

Ik heb jou code overgenomen, en de css vervolgens aangepast zodat mijn menu weer tevoorschijn kwam. Daarna ben ik rustig uit gaan proberen hoe alle css styles zich nu weergaven, en toen ik dat snapte, ben ik het dropdown menu in photoshop gaan ontwerpen.

Het resultaat zie je hier:


Als ik nog 1 vraag mag stellen: hoe kan ik ervoor zorgen dat ook de knop "tickets" , de sectionheader dus, als 'active' komt te staan. Dus met de rode gloed die ik daarvoor ontworpen heb.