Skip to content

Instantly share code, notes, and snippets.

@mortendk

mortendk/drop down & mobil menu.html

Last active December 15, 2015 06:59
Show Gist options
  • Save mortendk/5220288 to your computer and use it in GitHub Desktop.
Save mortendk/5220288 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment