jeudi 5 février 2015

How do I tell a submenu to be visible when its parents or containing links are active?


I have a menu in HTML and it looks like this:



<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Team</a></li>
<li><a href="#">Philosophy</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Our Service</li>
<li><a href="#">Special Offers</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>


Everything is in shape via CSS except one thing: to get the submenu to appear when its parent list-item's link points to the same address as the current page address.


I know this is possible somehow. But I really am the greatest noob with JavaScript or jQuery or PHP (I think the last two mean the same thing right?).


I tried copying and pasting code pieces like "OnClick=..." and one that was like "" or also one I found that contained "GetElenentbyTagName" (which almost worked...) but besides that I had no real clue about where to put them even. They just didn't work properly or not at all. I had a full done code piece but when I pasted it in and replaced some tag names it all got got marked red and my head is burning after trying to get it to work for the entire day.


I think this is possible because I have seen things that seemed to be describing part of what I want to do. E.g.


The script piece should either




  • Option A: Tell the browser that if the user is on a page which has the same address as a link in the menu it's href-address is, then it's submenu (ul li ul) or the menu (ul) where itself is contained in, should get "visiblity:visible".




  • Option B: The script code says like "if the user clicks on an menu item (ul li), then it's submenu (ul li ul), if it has one, or if the menu-item that is being clicked is one of the submenu's, then this submenu should become "visibility:visible". If the item that is clicked doesn't have a submenu, no submenu should be shown.




The HTML code must not have classes or other attributes directly anywhere between and though.





Aucun commentaire:

Enregistrer un commentaire