All posts tagged CSS MENU

css round corner menu with image

by the coder on April 29, 2010 in CSS, CSS MENU with 6 Comments

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.

    View Demo

    Download

    • Rounded Corner Tab Menu Using CSS

    by Arifur Rahman on April 23, 2010 in CSS, CSS MENU with 3 Comments

    We want to make a rounded corner tab menu using css.
    The image show how the tab will show.
    we slice the image . For this we need 4 images, 2 for each state
    ( nomal, active). The images are named tableft, tabright  and
    tableft_active, tabright_active. The images that will go
    on the right need to be wide enough in order to accommodate the
    longest possible caption.
    Continue reading →