CSS
We will use one of the code snippets available for Simpliste HTML5 template. It's CSS dropdown menu /_xtensions/snippets/dropdown_menu.txt
- .menu_main li {
- position:relative;
- }
- .menu_main li ul {
- display:none;
- background:#fff;
- padding:10px 3px;
- border:1px solid #ddd;
- text-align:left;
- width:6em;
- -webkit-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
- -moz-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
- box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
- }
- .menu_main li ul li {
- display:block;
- margin:0;
- line-height:1.1;
- }
- .menu_main li ul a{
- display:block;
- padding:3px;
- }
- .menu_main li ul a:hover{
- background:#f1f1f1;
- }
- .menu_main li:hover ul {
- display:block;
- position:absolute;
- right:-1em;
- top:100%;
- }
/* Dropdown menu */
.menu_main li {
position:relative;
}
.menu_main li ul {
display:none;
background:#fff;
padding:10px 3px;
border:1px solid #ddd;
text-align:left;
width:6em;
-webkit-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
-moz-box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
box-shadow:rgba(0,0,0,0.2) 0px 4px 6px;
}
.menu_main li ul li {
display:block;
margin:0;
line-height:1.1;
}
.menu_main li ul a{
display:block;
padding:3px;
}
.menu_main li ul a:hover{
background:#f1f1f1;
}
.menu_main li:hover ul {
display:block;
position:absolute;
right:-1em;
top:100%;
}
/* End dropdown menu */
Now we will add some styles specific for toggle navigation on mobile phones. You can indicate submenus by using background images instead of pseudo elements (in this demo ▼).
Javascript
Don't forget to include jQuery
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And code to make the work. You can customize label on the open button, in this demo it's Menu.
- var menuText = "Menu";
- $(
- function(){
- $("body").addClass("js");
- $(".menu_main").prepend("<a href='#' class='link_nav'>"+ menuText +"</a>");
-
- $(".menu_main li:has(ul)").addClass("menu_parent");
-
- $(".link_nav").click(
- function(){
- $(".menu_main > ul").toggleClass("menu_expanded");
- $(this).toggleClass("menu_parent_exp");
- return false;
- }
- )
- $(".menu_parent").click(
- function(){
- $(this).find(">ul").toggleClass("menu_expanded");
- $(this).toggleClass("menu_parent_exp");
- return false;
- }
- )
- }
- )
var menuText = "Menu";
$(
function(){
$("body").addClass("js");
$(".menu_main").prepend("<a href='#' class='link_nav'>"+ menuText +"</a>");
$(".menu_main li:has(ul)").addClass("menu_parent");
$(".link_nav").click(
function(){
$(".menu_main > ul").toggleClass("menu_expanded");
$(this).toggleClass("menu_parent_exp");
return false;
}
)
$(".menu_parent").click(
function(){
$(this).find(">ul").toggleClass("menu_expanded");
$(this).toggleClass("menu_parent_exp");
return false;
}
)
}
)