AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


     The following code is used to create the navigation bar, with mobile responsive, it will adjust the navigation bar when browsing on the mobile.

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

Total Pageviews