hoofdmenu-item markeren bij selectie submenu-item

[Plotinus]

Ik heb een menubalk met onder elk hoofdmenu-item een reeks keuze-items. Dat werkt perfect. Echter, wat wel handig voor een gebruiker zou zijn is dat bij selectie van een item, het hoofdmenu-item (op de menubalk dus) gemarkeerd wordt, met bijvoorbeeld een streep, of kleur. Als gebruiker weet je dan in welk hoofdonderdeel van de website je zit. Ik heb echter geen idee hoe ik dit moet aanpakken; iemand anders wel?

 

[Remc0]

Hallo,

De makkelijkste oplossing is op elk menu submenu item een "onclick" event toe te wijzen en daar een Javascript functie aan te roepen met als parameter de naam van het hoofdmenu item. Met de JavaScript functie kan je dan een klasse (bijvoorbeeld "active") aanmaken. Die klasse geef je vervolgens met CSS bijvoorbeeld een kleur.

 

[Plotinus]

javascript is me helaas net nog even te moeilijk; toekomstmuziek.

 

[bron]

Gebruik in een menu verschillende css classes, bijvoorbeeld:

.current {...} is de nu getoonde pagina, deze pagina is geen parent.
.currentparent {...} is de nu getoonde pagina, deze pagina is tevens een parent.
.activemenu {...} is iedere parent op een hoger level boven de nu getoonde pagina.
.parent {...} is iedere andere parent.

In onderstaand voorbeeld is "activemenu" het antwoord op je vraag.
Geef deze class de style die je wilt hebben.

<ul class="menu">
  <li><a href="#">Pagina 1</a></li>
  <li class="activemenu"><a href="#">Pagina 2</a>
    <ul>
      <li><a href="#">Pagina 2.1</a></li>
      <li class="currentparent"><a href="#">Pagina 2.2</a>
        <ul>
          <li><a href="#">Pagina 2.2a</a></li>
          <li><a href="#">Pagina 2.2b</a></li>
        </ul>
      </li>
      <li><a href="#">Pagina 2.3</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Pagina 3</a>
    <ul>
      <li><a href="#">Pagina 3.1</a></li>
    </ul>
  </li>
</ul>

 

[Plotinus]

Hartelijk dank bron: dit was precies wat ik nodig had. Geen 'moeilijkdoenerij' met scripts, waar ik voor vreesde, maar gewoon in HTML en CSS.

Remc0 uiteraard ook bedankt met voor het meedenken en je suggestie voor een oplossing.

 

[bron]

Graag gedaan. Have fun :thumb: