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
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-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
Related posts:
- An Easy Way to Create Thumbnail Post with Timthumb and get image Function
- An Easy Way to Display Rotating Images on the WordPress Engine Using CSS
- An Easy Way to Create a Menu with Rounded Corners Using Images
- An Easy Way to Create a Dropdown Menu using css
- how to create a shaded box and shaded box with rounded corners
One Response to “An Easy Way to Create a Menu with Rounded Corners using css”
Trackbacks/Pingbacks
[...] If you want to apply on your site for pages and category, you can see THIS POST. [...]