Jump to content
GarryOne

Menu HTML & CSS [very nice]

Recommended Posts

Posted

Demo

BbwsG.png

menur_bg.gifmenur_hover_left.gifmenur_hover_right.gif

menub_bg.gifmenub_hover_left.gifmenub_hover_right.gif

menug_bg.gifmenug_hover_left.gifmenug_hover_right.gif

menuo_bg.gifmenuo_hover_left.gifmenuo_hover_right.gif

menupu_bg.gifmenupu_hover_left.gifmenupu_hover_right.gif

CSS CODE:

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/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(media/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(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

HTML CODE

<ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>
</ul>

Posted

pai am pus toate trei imagini pentru fiecare model de culoare, fiecare isi alege care model ii place si descarca cele trei imagini si indica locatia catre ele din css code

Posted
Sunt sute pe net, sunt site-uri numai cu asa ceva, de l-am alege exact pe asta? :/

de ce pui intrebari de genul, te comporti parca omul ti-ar vinde un produs si ar trebui sa te convinga sa cumperi, E GRATIS, CE CACAT VA COMPORTATI ASA

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...