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.
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.
give the class correctly
Example Program:- (Editor)
Output:-
Download Full Source Code
Advertisement
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.
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>
--------
--------
--------
<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>
<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