HORIZONTAL GLOSSY CSS MENU

CSS is Cascading Style Sheet, which is the command to format the various forms or variations of both the text and the variations with the release of HTML with so much and re-repeated commands. With this CSS command one can represent the other commands. Currently, the CSS has been dominated in the making of the homepage, blog and blogger layout. If you see the source code of blogger layout, much is using CSS.

On this post I want to explain about how to make horizontal menu bar using CSS.

Sit down and relax, follow and learn step by step :

Click Sttings-Edit HTML and Check Expand Widget Templates, Dont forget to back-up your template first before you change it !

Find out this code

</head>

Copy this code bellow and paste upper that code :

<style type=”text/css”>
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.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*/
}

</style>

After that codes has copied, and then find out this codes :

</b:includable>
</b:widget>
</b:section>
</div>

copy and paste the code below under the appropriate code before :

<ul class=”glossymenu”>
<li class=”current”><a href=”http://your_url/“><b>Home</b></a></li>
<li><a href=”http://your_url/“><b>CSS</b></a></li>
<li><a href=”http://your_url/“><b>Forums</b></a></li>
<li><a href=”http://your_url“><b>Webmaster Tools</b></a></li>
<li><a href=”http://your_url/“><b>JavaScript</b></a></li>
<li><a href=”http://your_url“><b>Gallery</b></a></li>
</ul>

WAIT, not finish yet !! After all codes has copied you must :

- Change the blue typed words with your own image URL !
- Change the green typed words with your own URL to link the menu !
- Change the red typed words with your own MENU !
- You may download the images menu here :

menur_bg.gif
menur_hover_left.gif
menur_hover_right.gif

Upload all images to your own hosting place !!

You can add or sub the menu depend on your needed.
Example : Look at my own horizontal menu ! it made by CSS codes.
Now it has finish, SAVE TEMPLATE and enjoy this menu !!

bizril