domingo, 16 de agosto de 2015

Responsive Menu Horizontal Onclick Jquery

responsive-menu-horizontal-on-click-blogger-2015


Hoje vamos apresentar responsive menu horizontal Onclick Jquery realmente é elegante e muito util para blogueiros que buscam um menu responsive então vamos  aos códigos abaixo.


CSS código

#menu{height:45px;background:#464646;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu ul{height:45px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#ccc}
#menu ul li:hover a{background:#ccc;color:#333!important}
#menu input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:45px;line-height:45px;text-align:center;color:#fff}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#333}
#menu ul li ul li a{color:#333;width:180px;height:35px;line-height:35px;background:#ccc;}
#menu a.prett{padding:0 27px 0 14px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent transparent;position:absolute;top:20px;right:9px}
#menu a.prett:hover::after,#menu ul li:hover a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#333 transparent transparent transparent;position:absolute;top:20px;right:9px}
#menu ul li ul li a:hover{background:#BABABA;}

@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute; top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4;}
#menu ul li ul li a{width:100%;}
}


Código Java Script 

<script type='text/javascript'>
var nav = $('#menu > ul > li');
nav.find('li').hide();
nav.click(function () {
    nav.not(this).find('li').hide();
    $(this).find('li').slideToggle();
});
$(function() { 
    $('#menu input').click(function () {
    $('#menu ul').slideToggle()
});
    });
</script>


Código HTML

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
</ul>
</nav>


Considerações Finais

Esse é um ótimo menu horizontal responsive para seu blogger.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner