WebHQ

The Headquarters Of Web

Facebook Twitter Google Plus RSS Feed Email

Glossy Horizontal Menu - Horizontal CSS Menus

Published on: at 3:16 PM | Posted By:
A nicely curved, glossy looking horizontal menu. Three images are used to create the interface- an underlining repeating gradient image, plus left and right parts of a sliced tab image for the selected tab. The author (Santosh) has kindly created five different color schemes:

Demo:


The images used:

Blue scheme (3 images): menu Backgroundmenu Backgroundmenu Background

Green scheme (3 images):menu Backgroundmenu Backgroundmenu Background

Orange scheme (3 images):menu Backgroundmenu Backgroundmenu Background

Purple scheme (3 images):menu Backgroundmenu Backgroundmenu Background

Red scheme (3 images): menu Backgroundmenu Backgroundmenu Background

The CSS:

<style type="text/css">

.glossymenu {
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(http://3.bp.blogspot.com/-9Uqr9tYapTg/UMwugb3sAFI/AAAAAAAAAn8/ai-jJky4YEc/s1600/menur_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}
.glossymenu li {
	float: left;
}
.glossymenu li a {
	float: left;
	display: block;
	color: #000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding: 0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
}
.glossymenu li a b {
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover {
	color: #fff;
	background: url(http://2.bp.blogspot.com/-wH7GXrGFBaM/UMwuiOLGSiI/AAAAAAAAAoE/odbmUEcwzTE/s1600/menur_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b {
	color: #fff;
	background: url(http://2.bp.blogspot.com/-eB5V5DhqwQs/UMwujrjh32I/AAAAAAAAAoM/wcRW-yGUzjE/s1600/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>

The HTML:

<ul class="glossymenu">
<li class="current"><a href="http://webhq.blogspot.com/"><b>Home</b></a></li>
<li><a href="http://webhq.blogspot.com/p/windows-hq.html"><b>Windows</b></a></li>
<li><a href="http://webhq.blogspot.com/p/mobile-hq.html"><b>Mobile</b></a></li>
<li><a href="http://peacehq.blogspot.com/"><b>PeaceHQ</b></a></li>
<li><a href="http://webhq.blogspot.com/p/about.html"><b>About</b></a></li>
</ul>
<br style="clear: left">

1 comment On "Glossy Horizontal Menu - Horizontal CSS Menus"

  1. This menu is designed using pure CSS, so according to your requirement you can Configure this menu easily. You can change width, height, font style, font color or font size as you want. To update colors & theme you can update background for li & anchor elements. To present mouse over effect here I used CSS hover. To update hover related changes you need to update li:hover related classes... https://goo.gl/Wtlaks

    ReplyDelete

Get Latest Updates

Blog Archive

Total Pageviews