CODEWITHSUNDEEP
javascriptcssnav
dlc3172
dlc3172

Reputation: 113

changing two-level navigation menu to three-level

I'm trying to make a modification to turn a two-level navigation menu into a three level menu but I can't get the third level items to appear. When I click on a second level, it currently just retracts into the first level without showing the third-level items. I've re-arranged the code in various ways, but I can't figure it out. Any hints would be much appreciated. (In the HTML, "Menu 3", "Page 6" and "Page 7" is what I added to the original code.)

JS:

 $(document).ready(function(){
 // Menu.
 var $menu = $('#menu');
    $menu_openers = $menu.children('ul').find('.opener');

// Openers.
    $menu_openers.each(function() {

        var $this = $(this);

        $this.on('click', function(event) {

            // Prevent default.
                event.preventDefault();

            // Toggle.
                $menu_openers.not($this).removeClass('active');
                $this.toggleClass('active');

            // Trigger resize (sidebar lock).
                $window.triggerHandler('resize.sidebar-lock');

        });

        });

CSS:

/* Menu */
#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto", sans-serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #f56a6a;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #9fa3a6;
  content: '\f078';
  position: absolute;
  right: 0;
}
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
  color: #f56a6a;
}
#menu ul a.opener.active+ul,
#menu ul span.opener.active+ul {
  display: block;
}
#menu ul a.opener.active:before,
#menu ul span.opener.active:before {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#menu>ul>li {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
}
#menu>ul>li>ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu>ul>li>ul>ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu>ul>li>ul a,
#menu>ul>li>ul span {
  font-size: 0.8em;
}
#menu>ul>li>ul>li {
  margin: 0.125em 0 0 0;
  padding: 0.125em 0 0 0;
}
#menu>ul>li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

HTML

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li>
      <span class="opener">Menu 1</span>
      <ul>
        <li><a href="page4.html">Page 4</a></li>
        <li><a href="page5.html">Page 5</a></li>
      </ul>
    </li>
    <li>
      <span class="opener">Menu 2</span>
      <ul>
        <span class="opener">Menu 3</span>
        <ul>
          <li><a href="page6.html">Page 6</a></li>
          <li><a href="page7.html">Page 7</a></li>
        </ul>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 144

Answers (1)

sebasaenz
sebasaenz

Reputation: 1956

This piece of code: 

$menu_openers.not($this).removeClass('active');

doesn't work because it removes the active class to every element different from $this, but what you want to do is to remove the active class from the siblings of $this. You should use this instead:

$this.parent().siblings().children('.opener').removeClass('active');

Btw, you can write just the following:

$menu_openers = $menu.children('.opener');

It's simpler.

Upvotes: 1

Related Questions