css round corner menu with image

In many site we see round corner menu. Which is made from image. Today i will show you how , you can make this kind of menu.
The menu will look like bellow.

For this we have to slice the round image in two part.
But remember we have to take the right image width big. It will be the max size of our menu text width.
As our background is black so we have to cut the image with black background. The left image is for left part and the right image is for right part.

We use the left image in .nav li.current a, .nav li a:hover

This means that when we hover over the menu it show the round image or when it is active.

Bellow is html code.

<div id="navigation">
			<ul class="nav">
			<li class="current"><a href="#"><span>Home</span></a></li>
			<li><a href="#"><span>Get Started</span></a></li>
			<li><a href="#"><span>How To Call</span></a></li>
			<li><a href="#"><span>SMS</span></a></li>
			<li><a href="#"><span>Recharge</span></a></li>

			
			</ul>
           
	  </div>

Here we use to show

  • current active menu. Which also use in hover menu.
    Here use the bellow code to show left image when hover to li a element.

    .nav li.current a, .nav li a:hover{
    	color: #fff; /*left tab image path*/
    	background-position: left top;
    	background-image: url(images/menu_li_hover_left.png);
    	background-repeat: no-repeat;
    }
    

    The right image will show in span tag.

    .nav li.current a span, .nav li a:hover span{
    	color: #000; /*right tab image path*/
    	background-image: url(images/menu_li_hover_right.png);
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    

    Here we use a background image in navigation div which is

    #navigation {
    	height:44px;
    	background-image: url(images/menu_bg.png);
    	background-repeat: repeat;
    }
    

    So now we write the full css code for the menu.

     #navigation {
    	background-color: #000;
    	height: 44px;
    	margin-right: 17px;
    	
    }
    #navigation {
    	height:44px;
    	background-image: url(images/menu_bg.png);
    	background-repeat: repeat;
    }
    .nav{
    	height: 35px;
    	list-style: none;
    	line-height: 35px;
    	padding-top:4px;
    
    
    }
    .nav li{
    	float:left;
    	padding-left:7px;
    	
    }
    .nav li a{
    	float:left;
    	display:block;
    	height:44px;
    	text-decoration:none;
    	padding-left:5px;
    	font-weight:bold;
    	color:#FFF;
    }
    .nav li a span{
    	height:44px;
    	float: left;
    	display: block;
    	padding: 0 10px 0 8px; /*Padding of menu items*/
    }
    .nav li.current a, .nav li a:hover{
    	color: #fff; /*left tab image path*/
    	background-position: left top;
    	background-image: url(images/menu_li_hover_left.png);
    	background-repeat: no-repeat;
    }
    .nav li.current a span, .nav li a:hover span{
    	color: #000; /*right tab image path*/
    	background-image: url(images/menu_li_hover_right.png);
    	background-repeat: no-repeat;
    	background-position: right top;
    }
    

    [smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-share-php.png" alt= "Smart Social Share" href="http://codecanyon.net/item/php-smart-social-share/202558" title="Smart Social Share (Php Plugin)" description="Smart Social share is a php plugin . Which helps you to give user to share your content with social book mark site. There are 4 plugin in this package." ref="marifdu"]
    This menu is relay easy to make. Bellow you can see the demo or you can download the code to use in your site.

     

  • the coder

    6 Comments on "css round corner menu with image"

    1. ciprian says:

      Great tutorial!!! Thanks for sharing!

    2. deven says:

      nice tutorial …thankx

    3. Ellie says:

      Thanks for intordcuing a little rationality into this debate.

    4. Sunny says:

      Hello! That is a well written and helpful tutorial indeed…

      But I am struggling here with a menu that should look almost like the one in your article except I need a fixed width for all the items. For example – the ‘Home’ tab should be the same width as the ‘How to Call’. Can you help me with that?

    5. This topics is very effective for css learners.

    Got something to say? Go for it!

    *

     
    More in CSS, CSS MENU (5 of 6 articles)