Categorized | CSS, Menu, Tutorial, Wordpress

An Easy Way to Create a Menu with Rounded Corners Using Images

Navigation Menu is an important thing in making the site. Even more unique and interesting, people will be tempted to explore our site further. Follows we try to create a menu that has rounded corners on both sides of it using the image.


Easy way. Let us consider and we try together

1.  Add the following code in style.css file under your theme.

body {
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #404040;
}
a {
text-decoration: none;
color: #0288D8;
}
a:hover {
text-decoration: underline;
}
:focus {
-moz-outline-style: none;
}
#navtabs {
list-style: none;
padding: 0;
height: 30px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
border-bottom: 4px solid #0288D8;
}
#navtabs li {
float: left;
background: black url(images/tableft-black.png) no-repeat left top;
padding: 8px 0 8px 14px;
margin-right: 1px;
}
#navtabs li a {
background: black url(images/tabright-black.png) no-repeat top right;
padding: 8px 14px 8px 0;
}
#navtabs li:hover {
background: #0288D8 url(images/tableft_active.png) no-repeat left top;
}
#navtabs li:hover a {
background: #0288D8 url(images/tabright_active.png) no-repeat right top;
color: #FFFFFF;
}

2. Upload the following image file into the images folder under your theme folder. Donlot from HERE.

3. Add or replace the navigation menu on the header.php code like the following.

<ul id=”navtabs”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Server</a></li>

<li><a href=”#”>Windows</a></li>

<li><a href=”#”>Linux</a></li>

<li><a href=”#”>UNix</a></li>

</ul>

Finish….! Very very simple , right?. :)

For Online Demo :

you still confusion in applying the above code? leave a comment please

Hopefully helpfull.

One Response to “An Easy Way to Create a Menu with Rounded Corners Using Images”

Trackbacks/Pingbacks

  1. […] the previous post we’ve tried to create a menu with rounded corners using images , in the post this time we will make the same menu but the direct use css […]


Leave a Reply

*

Our Partner

Our Partner

Update ESET Nod32

Update 11322, 15 Mar 2015

Update 15 Mar 2015

~ For Eset All Version, OS XP, Vista dan Win7