[OPGELOST] Dropdown feature in een zelfgemaakt menu template implementeren

[Jos]

Volgens mij is onderstaand stukje in de template daarvoor verantwoordelijk

Code: Select all

{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]-->

zowel het als het element krijgen hier een aparte class "activeparent". Dat kun je in overeenstemming brengen met hoe jij dat in je vorige menu had, misschien moet je één ervan wissen en de andere veranderen?

[brentnl]

Code: Select all

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

Dat heb ik er inderdaad nu staan, en dat werkt, maar omdat het een sectieheader is en je daarop niet kunt klikken werkt het niet helemaal.. deze code heeft er ook nog mee te maken trrouwens:

Code: Select all

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><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"/>

Maar hij moet alleen 'pressed' of 'active' zijn wanneer er op een 'child' geklikt wordt... dus daar moet een nieuwe 'elseif' voor worrden geschreven denk ik?

Code: Select all

{elseif $node->parent == true && $node->child == active}

ofzo? ja ik verzin maar iets...


EDIT:: ik las je stukje verkeerd, je hebt gelijk, ik moet die activeparent in mn css definieren..maar zou niet precies weten hoe ik dat doe, aangezien ik de andere buttons juist in de template heb gedefinieerd met de bijbehorende image...

[Jos]

Ik denk dat onderstaande al volstaat?

(directory normal veranderd in hover)

Code: Select all

{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}><img src="images/menu/hover/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/hover/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/> <!--[if IE 7]><!--></a><!--<![endif]-->

Onmouseover en onmousout zijn nu hetzelfde. Daar kun je dus ook nog iets voor bedenken, anders de javascript eruit knippen

En die class="activeparent" kun je er ook uit knippen als je er toch niets mee doet.

[brentnl]

class heb ik eruit geknipt, en 'hover' in 'pressed' veranderd haha  maar inderdaad, dan werkt het al! zo simpel 

thnx!

[SOLVED]

[Jos]

Goedzo! Het is wel netter om de images in de stylesheet op te nemen. Op die manier hou je content en opmaak gescheiden. Als je de site een keer wil veranderen hoef je dan alleen de stylesheet aan te passen.

Bovendien, met css is het mogelijk om een flikkervrije overgang tussen normal en hover te bewerkstelligen. De flikkering komt doordat bij hover een nieuw plaatje moet worden geladen.
Kijk maar eens hoe Stu Nichols dat doet bij andere menu-voorbeelden op css-play.

En je screenshotjes zien er veelbelovend uit. Je zet je site nog wel in de showroom toch?

[brentnl]

Ligt eraan of de klant dat wil, maar als hij permissie geeft zet ik hem zeker online in de showroom 

Zal even gaan lezen over het hover gebeuren in de css.

[brentnl]

Ik moet het topic helaas toch weer hervatten, want er is nog 1 enkel probleem met dit menu.

Ik heb heel de website in firefox afgemaakt en werkend gekregen. Daarna ga ik altijd pas testen in IE, omdat ik firefox als 'fatsoenlijk' ervaar als het gaat om websites weergeven enzo..

Ik gebruik IE8 en het lijkt alsof hij een menu item, het laatste item, over de hele pagina verspreidt. De layout is gewoon goed, alleen op vrijwel iedere plek op de website is er nu een soort van onzichtbare link aanwezig, waarmee je naar dat menu item (contact pagina) gaat.. Het lijkt er dus op alsof de tag niet goed af wordt gesloten in IE 8 ofzo... wanneer ik de compatability view aanzet werkt het echter wel gewoon.
In mijn menu template zitten wel IE 7 tags opgenomen, maar niets voor IE 8...  misschien is het voldoende als ik deze tags "  {if $node->depth == 1}{else}{/if}" ombouw zodat het voor IE 7 EN 8 werkt?

Menu Template

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}><img src="images/menu/pressed/{$node->menutext}.png" alt="{$node->menutext}" border="0"/>
   {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}><img src="images/menu/pressed/{$node->menutext}.png" onmouseover="this.src='images/menu/hover/{$node->menutext}.png'" onmouseout="this.src='images/menu/pressed/{$node->menutext}.png'"alt="{$node->menutext}" border="0"/> <!--[if IE 7]><!--></a><!--<![endif]-->

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><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"/>

{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}> <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"/>
   {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>

[Jos]

Mijn engels is niet te best, maar wat ik uit onderstaande begrijp is dat het met IE8 kan uitmaken of je site local draait.
http://stackoverflow.com/questions/1676 ... ments-work

[brentnl]

ha bedankt voor de link 

Inmiddels had ik zelf al een (vies) truukje toegepast, waarin ik IE8 trigger om altijd in de compatibilitymodus de website te openen. De browser van een bezoeker wordt dus automatisch op deze modus ingesteld wanneer hij/zij met IE8 de site bezoekt.

dit is mogelijk door deze meta tag aan je code toe te voegen 

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

Zoals ik al zei, niet echt clean, maar wel de snelste oplossing voor zover... Fack al die browsers, waarom stapt iedereen gewoon niet over naar Vuurvos 

[Jos]

aah okee dan... ook weer opgelost dus 

[brentnl]

en weer een browser probleem erbij

eigenlijk hetzelfde als bij IE8, alleen nu bij IE6. Ik heb een IE tester op mn pc geinstalleerd, dus kon ik IE6 emuleren... nou heel mn site lag door elkaar, nu kwam dat omdat je in IE6 alle waardes moet definieren "margin:0" moet je dus noteren als "margin:0px". Maar dit had een css optimizer op internet zo gedaan om hem te comprimeren..not done dus... nja dat repareerde een groot deel, maar toch niet alles.

het lijkt alsof de menu tag niet afgesloten wordt en er zit nu dus een link naar het laatste menu item over de halve pagina heen, je kunt bijna nergens klikken of je gaat wel naar dat laatste item.

dit is de link: [iurl=#]www.partycrew.info[/iurl] , als het probleem opgelost is moet ik echter deze link weer van het forum verwijderen van de klant.. // LINK VERWIJDERD

de ietester kan je hier downloaden

[Jos]

Ik zie geen afwijkingen in jouw menu-structuur als ik dat vergelijk met die van css goeroe Stu Nichols...

Alles wordt op dezelfde manier afgesloten.

Ik zie wel veel witruimtes tussen de tags in het submenu. Wellicht dat dit een oorzaak kan zijn? Probeer spaties/tabs en enters daar eens tussenuit te halen.

Ook mist er een spatie voor de alt atribuut in het submenu...

[brentnl]

is dat nu al minder?

Werkt die IE tester bij jou trouwens? misschien dat je het probleem dan beter snapt... volgens mij is het echt iets in het menu omdat die laatste link 'contact' over heel de pagina gestretched wordt lijkt wel...

hover images werken ook niet btw, maar dat kan misschien typisch IE6 zijn..

[Jos]

Ik heb geen IE6 meer en dat wil ik graag zo houden 

Ik kan me ook niet voorstellen dat er binnen de doelgroep van je site nog iemand is die het wel gebruikt?i

[brentnl]

in tegenedeel,

1 MS Explorer 7.x 64.579 54.59%
2 MS Explorer 6.x 31.412 26.55%
3 Firefox 2.x 11.855 10.02%
4 Firefox 3.x 5.788 4.89%


helaas gebruiken er dus wel veel IE6  ;)


btw, dat programma installeert geen IE6 op je pc  Het emuleert hem alleen, en is ook weer makkelijk te verwijderen