mortendk/drop down & mobil menu.html

## drop down & mobil menu.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>mobile & drop down menu</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script>
jQuery(document).ready(function($){
  $('.dropdown').prepend('<div class="mobilemenu-icon">menu</div>');

  $(".mobilemenu-icon").on("click", function(){
    $(".dropdown > ul").slideToggle();
    $(this).toggleClass('mobilemenu-icon-active');
  });

  //generally indicatedcontent
  $(".dropdown > ul > li > ul").parent().addClass('menu_i_hazcontent');

  // toggles own lvl
  $("li.menu-hazcontent").on("click", function(){
    $(this).children('ul').slideToggle();
  });


  //toggles lvl
   // $(".dropdown > ul > li").on("click", function(){
   //   $(this).find('ul').slideToggle();
   // });


});
</script>


<style type="text/css" media="screen">

.mobilemenu-icon { display: none; }
.menu_i_hazcontent > a{ font-weight: bold; }


@media screen and (max-width: 600px) {
  .mobilemenu-icon {
    position: absolute; top: 0px;
    cursor: pointer;
    display: block;
    width: 100px;
  }


  .dropdown > ul{
    display: none; position: absolute; top: 30px;
    width: 100%;  z-index: 10000;
  }
}
@media screen and (min-width: 600px) {
  /*--------------- Dropdown Structure -----------*/
  /* lvl 1 */
  .dropdown > ul > li{ position:relative; float:left;}

  /* lvl 2 */
  .dropdown ul > li > ul{ display:none; position:absolute; z-index:999; }
  .dropdown ul li:hover > ul{ display:block;}
  .dropdown ul ul li{ float:none; }
  .dropdown ul ul a{ white-space:nowrap;}

  /* lvl 3 */
  .dropdown ul ul li ul { position: absolute; top:auto; background:transparent; display: none;}
  .dropdown ul ul li:hover ul { display: block; }

  /*--------------- Dropdown theme  -----------*/
  .dropdown a{ display:block;}
    .dropdown a:hover{ background:#ddd}
  .dropdown ul{ margin:0; padding:0}
  .dropdown li{list-style: none;}

  /* lvl 1 */
  .dropdown > ul > li > a{ padding:0 10px; border-left:1px solid #ddd}

  /* lvl 2 & 3 width & heights */
  /* lvl 2 width*/
  .dropdown ul ul li a{
    width:300px; /*  left position of lvl 3 */
    height:30px; /* negative margin-top top for lvl 3 */
  }
  /*lvl 3 position*/
  .dropdown ul ul li ul {
    left:300px; /* same as lvl 2 links width */
    margin-top:-30px; /* minus the height og lvl 2 links */
  };


}
</style>
</head>
<body>

<nav class="dropdown">
  <ul>
    <li><a href="#">Home</a>
      <ul>
        <li><a href="http://morten.dk">Home Submenu 1</a></li>
        <li><a href="#">Home Submenu 2</a>
          <ul>
            <li><a href="#">Home Sub sub 1</a></li>
            <li><a href="#">Home Sub sub 2</a></li>
            <li><a href="#">Home Sub sub 3</a></li>
          </ul>
        </li>
        <li><a href="#">Home Submenu 3</a></li>
        <li><a href="#">Home Submenu 4</a></li>
        <li><a href="#">Home Submenu 5</a>

          <ul>
            <li><a href="#">Home Sub sub 1</a></li>
            <li><a href="#">Home Sub sub 2</a></li>
            <li><a href="#">Home Sub sub 3</a></li>
          </ul>
        </li>

        <li><a href="#">Home Submenu 6</a></li>
        <li><a href="#">Home Submenu 7</a>

          <ul>
            <li><a href="#">Home Sub sub 1</a></li>
            <li><a href="#">Home Sub sub 2</a></li>
            <li><a href="#">Home Sub sub 3</a></li>
          </ul>


        </li>
      </ul>
    </li>
    <li><a href="#">foobar </a></li>
    <li><a href="#">Bar foo</a>
      <ul>
        <li><a href="http://morten.dk">Home Submenu 1</a></li>
        <li><a href="#">Home Submenu 2</a></li>
        <li><a href="#">Home Submenu 3</a></li>
        <li><a href="#">Home Submenu 4</a></li>
        <li><a href="#">Home Submenu 5</a>

          <ul>
            <li><a href="#">Home Sub sub 1</a></li>
            <li><a href="#">Home Sub sub 2</a></li>
            <li><a href="#">Home Sub sub 3</a></li>
          </ul>
        </li>

        <li><a href="#">Home Submenu 6</a></li>
        <li><a href="#">Home Submenu 7</a>

          <ul>
            <li><a href="#">Home Sub sub 1</a></li>
            <li><a href="#">Home Sub sub 2</a></li>
            <li><a href="#">Home Sub sub 3</a></li>
          </ul>


        </li>
      </ul>


    </li>
    <li><a href="#">info</a></li>
    <li><a href="#">faq</a></li>
    <li><a href="#">example</a></li>
  </ul>
</nav>

</body>
</html>