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.


msh1 navigation menu bar meh1
  The following program will create navigation menu bar using pure css code. Your heading menu name should write inside the <ul> tag and the sub menu's should write inside the <li> tag. we can control these tag from the css style.

navigation menu bar
    You can customize the menu by adding ul and li tag. The example is shown below

Give your URL to the corresponding menu inside the <a> tag, replace the # to your URL.

--------
--------
<li><a href="http://www.twitter.com">Twitter</a></li>
--------
--------

   give the class correctly

<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label>
<li class="topfirst"><a href="http://www.allinworld99.blogspot.com" style="height:18px;line-height:18px;">Home</a></li>
<li class="topmenu">
<a href="#" style="height:18px;line-height:18px;"><span>Social Network</span></a>
<ul>
<li><a href="https://www.facebook.com/allinworld99blog">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Computer Program</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Asp.Net</a></li>
<li><a href="#">C# Program</a></li>
</ul>
</li>
</ul>




Example Program:- (Editor)



Output:-

Download Full Source Code
Advertisement

0 comments:

Post a Comment

Total Pageviews