CSS Code
@media screen and (max-width:768px)
{
body{padding-top:40px;}
#mob-menu{display:block;}
#mob-menu{position:fixed;top:0px;}
#nav ul{position:absolute;width:100%;margin:0px;height:auto;display:none;left:0px;top:40px;background:#222;}
#nav ul li{float:none;border-bottom:solid 1px #333;}
#nav ul li a:hover{background:#444;}
}
#nav{display:table;margin:auto;}
#nav ul{margin:20px 0px 0px 0px;padding:0px;list-style:none;height:40px;background:#06C;}
#nav ul li{float:left;}
#nav ul li a{display:block;height:40px;line-height:40px;color:#fff;font-size:16px;text-decoration:none;padding:0px 15px;}
#nav ul li a:hover{background:#222;}
body{margin:0px;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:13px;}
#mob-menu{display:none;height:40px;background:#0066cc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEienZ8keyUd6NStiD7ezFgqHf2klztz0xzowCvmnrNPbT6ttYe4hvkU4N01FPGNAP3D_Nj6vYG_MgQII6EUZbDPek5gApIcpP_nckCjMwSxf764uByEHQh987EeVe2NhTQxGHdvky5rQc5D/s1600/menu-bg.png) 10px 8px no-repeat;color:#fff;line-height:40px;font-size:16px;width:100%;text-indent:50px;cursor:pointer;}
jQuery Code
Before placing this code you should need to import the jQuery plugins,
$(function(){
$('#mob-menu').on('click', function(e) {
e.preventDefault();
$('ul').slideToggle();
});
});
HTML Code
<div id="mob-menu">
Menu</div>
<div id="nav">
<div>
<ul>
<li><a href="http://www.online-html-tools.blogspot.com">Home</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/02/html-css-javascript-code-compressor.html">About Us</a></li>
<li><a href="http://allinworld99.blogspot.in/2015/04/transparent-image-converter.html">Services</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/02/pure-css-tooltip-generator-css3-tooltip.html">Our Profile</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/02/pure-css-text-box-generator-text-box.html">Contact Us</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/01/simple-css-banner-creator-free-banner.html">Home</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/02/div-border-box-background-generator.html">About Us</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/02/rgba-text-background-image-css-code.html">Services</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/02/free-online-invoice-generator.html">Our Profile</a></li>
<li><a href="http://online-html-tools.blogspot.in/2015/02/character-count-online-count-words.html">Contact Us</a></li>
</ul>
</div>
</div>
<h1 align="center">Responsive Mobile & Monitor Menu</h1>
Example Program:- (Editor)
Editor is Loading...
Advertisement
0 comments:
Post a Comment