Categorized | CSS, Menu, Tutorial, Wordpress

An Easy Way to Create a Menu with Rounded Corners using css

In 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 code.

How create it not too difficult, you can follow the following steps .

1.  Add the following code into the css style file

#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;
padding: 8px 0 8px 0px;
margin: 1px;
}
#navtabs li a {
background-color: green;
padding: 8px 18px 8px 18px;
border-top-left-radius: 8px;
border-top-right-radius:8px;
}
#navtabs li:hover {
background-color: #0288D8;
border-top-left-radius: 8px;
border-top-right-radius:8px;
}
#navtabs li:hover a {
background-color: #0288D8;
color: #FFFFFF;
}

2. Add the following code to call the id navtab

<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 …!!!

For Online Demo,

.

Note :

To Create the menu as above, very easy. Codes in use are as follows

border-top-left-radius: 8px;
border-top-right-radius:8px;

If you use the code to call the navigation page and add the default home page, add the following code :

<ul id=”navtabs”>

<?php /* If this is the frontpage */ if ( is_home() ) { ?>

<li class=”current_page_item”><a href=”<?php echo get_option(‘home’); ?>/”>Home</a></li>

<?php } else { ?>

<li class=”page_item”><a href=”<?php echo get_option(‘home’); ?>/”>Home</a></li>

<?php } ?>

<?php wp_list_pages(‘sort_column=menu_order&title_li=’ ); ?>

</ul>

And if you use it to call the menu category, add the following code:

<ul id=”navtabs”>

<?php wp_list_categories(‘title_li=’) ?>

</ul>

Good Luck
And Hopefully useful

One Response to “An Easy Way to Create a Menu with Rounded Corners using css”

Trackbacks/Pingbacks

  1. […] If you want to apply on your site for pages and category, you can see THIS POST. […]


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