Menu icon Foundation
Side-Nav submenue should only open on click

Hi there,

 

is there a way for the foundation side-nav to open it's submenues not on hover/mouseover but by clicking on the link?

Another thing is that I could not figure out which way the expanding subnav is done - by css on mouseover or by jquery etc.? where can I modify the side-bar?

 

Thanks a lot for your help, folks!

Roland

side-navsidenavhovermouseoverconfiguration

Hi there,

 

is there a way for the foundation side-nav to open it's submenues not on hover/mouseover but by clicking on the link?

Another thing is that I could not figure out which way the expanding subnav is done - by css on mouseover or by jquery etc.? where can I modify the side-bar?

 

Thanks a lot for your help, folks!

Roland

Rafi Benkual over 3 years ago

Hi Roland, 

What component are you referring to by side-nav. The side-nav is a Foundation 5 component that creates a vertical set of links. It has not submenu's by default.

Roland Söns over 3 years ago

I forgot to mention that I am using foundation 5 ...

the component I am referring to is this:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/sidenav.html

 

Here is a snippet of my HTML:

<ul class="side-nav show-for-xlarge-up">
  <li class="active">
    <a href="/gulp2/dashboard" id="id6" btattached="true"><i class="gp-icon-dashboard"></i>Dashboard</a>
  </li>
  <li>
    <a href="/gulp2/projekte/matching" btattached="true"><i class="gp-icon-projects"></i>Projekte</a>
    <ul>
      <li><a href="/gulp2/projekte/matching" btattached="true">Profil-Matching</a></li>
      <li><a href="/gulp2/projekte/suche" btattached="true">Alle Projekte</a></li>
      <li><a href="/gulp2/projekte/meinesuchen" btattached="true">Gespeicherte Suchen</a></li>
      <li><a href="/gulp2/projekte/merkliste" btattached="true">Merkliste</a></li>
    </ul>
  </li>
  <li>
    <a href="/gulp2/bewerbungscenter" btattached="true"><i class="gp-icon-folder-open icon-small"></i>Bewerbungscenter</a>
  </li>
  <li>
    <a href="/gulp2/account/profil" btattached="true"><i class="gp-icon-profile"></i>
      Profile
    </a>
    <ul>
      <li>
        <a href="/gulp2/account/profil" btattached="true">
          Ihr Profil
        </a>
      </li>
      <li>
        <a href="/gulp2/account/profil/einstellungen" btattached="true">Profilverwaltung</a>
      </li>
      <li>
        <a href="/gulp2/account/vorschau" btattached="true">Profilvorschau</a>
      </li>
    </ul>
  </li>
</ul>