Vilthering Vilthering - 5 years ago 292
HTML Question

Dropdown menu with arrow

Perhaps this is an easy matter, but I still couldn't find a solution. I tried following example from internet using menu arrow on drop-down. The problem is that all the sub-menus go down to the bottom (show), while should only show clicked menu's submenu.

<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style>
.sub-menu ul > li {
z-index:-1;
opacity:0;
display:none;
}

.drop {
display: inline-block;
transition: all .25s
}

.slicknav_nav.active li > .drop {
transform: rotate(180deg)
}

.slicknav_nav.active li > .sub-menu > ul > li{
z-index:1;
opacity:1;
display:block;
}

</style>
</head>
<body>
<div class="slicknav_menu">
<ul class="slicknav_nav">
<li>
<a href="#">Movies</a>
<a class="drop">▼</a>
<div class="sub-menu">
<ul>
<li><a href="#">In Cinemas Now</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">On DVD/Blu-ray</a></li>
<li><a href="#">Showtimes &amp; Tickets</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Movies2</a>
<a class="drop">▼</a>
<div class="sub-menu">
<ul>
<li><a href="#">In Cinemas Now</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">On DVD/Blu-ray</a></li>
<li><a href="#">Showtimes &amp; Tickets</a></li>
</ul>
</div>
</li>
</ul>
</div>
<script>
$(".slicknav_nav").click(function() {
$(this).hasClass("active") ?
$(".slicknav_nav").removeClass("active") :
($(".slicknav_nav").removeClass("active"), $(this).addClass("active"));
});
</script>
</body>
</html>


Can some one solve the problem? I hope it does not change the structure.

Answer Source

You have couple of issues in your code:

  1. Add click handler on li instead of ul.
  2. Toggle active class on li.
  3. In click handler, remove active class from all lis, then just add to current li.

Updated Code:

$(".slicknav_nav li").click(function() {
    $(".slicknav_nav li").removeClass('active');
    $(this).addClass('active');
});
.sub-menu {
  z-index: -1;
  opacity: 0;
  display: none;
}

.drop {
  display: inline-block;
  transition: all .25s;
}

.slicknav_nav li.active > .drop {
  transform: rotate(180deg);
}

.slicknav_nav li.active > .sub-menu {
  z-index: 1;
  opacity: 1;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slicknav_menu">
  <ul class="slicknav_nav">   
    <li>
      <a href="#">Movies</a><a class="drop">▼</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">In Cinemas Now</a></li>
          <li><a href="#">Coming Soon</a></li>
          <li><a href="#">On DVD/Blu-ray</a></li>
          <li><a href="#">Showtimes &amp; Tickets</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">Movies2</a><a class="drop">▼</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">In Cinemas Now</a></li>
          <li><a href="#">Coming Soon</a></li>
          <li><a href="#">On DVD/Blu-ray</a></li>
          <li><a href="#">Showtimes &amp; Tickets</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Fiddle DEMO

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download