Playground for JQuery Pull Out Menu

by Taufik Nurrohman

HTML

<div style="height:150px"></div>

<nav class='popnav'>Label
    <ul class='fallback'>
        <li><a href='#'>JavaScript</a></li>
        <li><a href='#'>JQuery</a></li>
        <li><a href='#'>CSS</a></li>
        <li><a href='#'>HTML</a></li>
        <li><a href='#'>PHP</a></li>
    </ul>
</nav>

<nav class='popnav'>Label
    <ul class='fallback'>
        <li><a href='#'>JavaScript</a></li>
        <li><a href='#'>JQuery</a></li>
        <li><a href='#'>CSS</a></li>
        <li><a href='#'>HTML</a></li>
        <li><a href='#'>PHP</a></li>
    </ul>
</nav>

<nav class='popnav'>Label
    <ul class='fallback'>
        <li><a href='#'>JavaScript</a></li>
        <li><a href='#'>JQuery</a></li>
        <li><a href='#'>CSS</a></li>
        <li><a href='#'>HTML</a></li>
        <li><a href='#'>PHP</a></li>
    </ul>
</nav>

CSS

body {
  padding:50px;
  background-color:#111;
}

.popnav {
  display:inline-block;
  width:60px;
  margin:10px 0;
  background:#362C23;
  padding:7px 15px;
  font:normal 11px Arial,Sans-Serif;
  text-transform:uppercase;
  color:#A1917B;
  position:relative;
  cursor:pointer;
}

.popnav:after {
  content:"";
  width:0;
  height:0;
  border:5px solid transparent;
  border-bottom-color:#fff;
  position:absolute;
  top:6px;
  right:12px;
}

/* Kelas 'down' akan diciptakan oleh JQuery */
.popnav.down:after {
  border:5px solid transparent;
  border-top-color:#fff;
  top:13px;
}

.popnav ul {
  border-top:2px solid #2D6D67;
  width:170px;
  background:#201A16;
  position:absolute;
  bottom:100%;
  left:0;
  margin:0 0;
  padding:0 0;
  z-index:999;
  display:none;
}

.popnav li {
  list-style:none;
  margin:0 0;
  padding:0 0;
}

.popnav li a {
  padding:10px 15px;
  display:block;
  text-decoration:none;
  color:#ccc;
  font-weight:bold;
  font-size:11px;
}

.popnav li a:hover {
  background:#439A91;
  color:#fff;
}

/* Fallback jika JavaScript dinonaktifkan */
.popnav:hover ul.fallback {display:block}

JavaScript

$(function() {
    $('.popnav ul').removeClass('fallback');
    $('.popnav').click(function(e) {
        $(this).toggleClass('down');
        $('ul', this).slideToggle();
        e.stopPropagation();
    });
    $(document).click(function() {
        $('.popnav ul:visible').slideUp();
        $('.popnav').removeClass('down');
    });
});