Saturday, April 3, 2010

How to Make Mouseover Navigation Menu withh CSS?


If you want add navigation menu with CSS in your blog this is very east to put your blog.Navigation menu is the process of reading, and controlling the movement of a craft or vehicle from one place to another.


Demo: Mouseover Navigation Menu




Step 1 : Log in your Blogger Account



Step 2 : Go To Layout

Step 3 : Edit HTML

Step 4 : Then find HTML and copy blow Code before this " ]]></b:skin> " and Save Template.


<style>
/* menu bar */
#menubar{ /*menu container*/
background-color:#e1e1e1; /*change or delete*/
padding:0;
margin:0;
}

.btnmenu ul{
font: 15px verdana;
padding: 0;
margin: 0;
}

.btnmenu ul li{
list-style: none;
display: inline;
padding:0;
margin:0;
}

.btnmenu ul li a{
padding: 2px 20px; /* 5px top & bottom, 20px L & R */
text-decoration: none;
float: left;
background-color:#e1e1e1; /*graceful degradation for IE*/
color: black;
border: solid #e1e1e1;
border-width: 4px 1px;
/* radius = 1/2 * (font height + top&bottom padding) */
-webkit-border-radius: 9px; /*firefox*/
-moz-border-radius: 9px; /*Safari*/
border-radius: 9px; /*CSS3*/
}

.btnmenu ul li a:hover{
padding:1px 20px 3px 20px; /* shift text 1px up */
background-color: #FFFFFF; /*You Can Change This Color*/
border-style: outset;
}

.btnmenu ul li a:active{
padding:3px 20px 1px 20px; /* shift text 1px down */
border-style: inset;
}

</style>
<div id='menubar'>
<div class='btnmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Link #1</a></li>
<li><a href='#'>Another Link</a></li>
</ul>
</div>
<div style='clear:both;'></div>
</div>



Stumble
Delicious
Technorati
Twitter
Facebook







Related Posts by Categories







4 comments on "How to Make Mouseover Navigation Menu withh CSS?"

This is DoFollow Blog Leave a Comment

VKBhardwaj on April 3, 2010 at 12:28 PM said...

Sorry Brother Your Demo Is Not Working.
My Blog Link:http://vkbhardwaj.blogspot.com/
And You want to find new blogger template so please go these link:http://vkbhardwaj.blogspot.com/search/label/My%20desgine%20Template
Thanx.

Muhammad Wajid on April 3, 2010 at 2:51 PM said...

I Thing u doing some wrong in my browser the link is working .

blog for steveLi on April 8, 2010 at 6:46 AM said...

is good news!touch screen mp4 player

Ecommerce Web Design on July 19, 2010 at 12:09 PM said...

demo isnt working....:( but i can understand the code...and knows wht will be the affects after embedding it....i ll try it soon

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

Latest Blogger Tricks,Tips,Tutorial,Template,Widgets