Black Slide Drop Down Responsive

by Teja Sukmana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav class="top-nav" itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <ul class="nav group">
    <li><a href="/" class="brand"itemprop='url' title='menu'><span itemprop='name'>Home</span></a></li>
    <li><a class="drop-menu-toggle" href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 1</span><span class="car-arr">&#9662;</span></a>
      <ul class="subnav group">
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 1</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Long Sub-link</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 3</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 4</span></a></li>
      </ul>
    </li>
    <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 2</span></a></li>
    <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 3</span></a></li>
    <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 4</span></a></li>
    <li><a class="drop-menu-toggle" href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 5</span><span class="car-arr">&#9662;</span></a>
      <ul class="subnav group">
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 1</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Long Sub-link</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 3</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 4</span></a></li>
      </ul>
    </li>
  </ul>
</nav>
<nav class="top-nav-sticky group"...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://rawgit.com/mastamvan/backup/4menunav/blackslide.css);
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}
p{
  width:100%;
  text-align:center;
  font-size:200%
}

JavaScript

$(document).ready(function(){$("#side-menu-button").on("click",function(n){n.preventDefault(),$("div.container-fluid").toggleClass("indent-content"),$(".top-nav-sticky").toggleClass("indent-content"),$(".top-nav").toggleClass("side-menu-show")}),$(".drop-menu-toggle").on("click",function(n){n.preventDefault(),$(this).siblings("ul.subnav").slideToggle(275)})});