Colorful Fast Menu stock Posted by vuluganck | at Monday, May 18, 2009

Hello hello , how do you feel when you see the screen shot above? I guess you feel amazing and want to get it now for your little blog.They are so nice , so lovely , so beautiful, so colorful and so...on.
Please calm down, because Zen is here to make you proud of your blog by these!

These blocks are from e-lusion.com and the developer is Ian Main.Thank you very much for sharing.
These kinds of menu are simple CSS menu, so you won't be crazy when adding it,trust me about it.

Now are you ready ? Let's do it.I will guide you how to create in 2 ways,this is 1st part:
*First you have to do is download this file ( No virus-tested by Zen) : Here
That's the complete set of all menu styles, download it then look at the next step.That file contains the images which you have to upload them to your favorite host later.

*It's time for you to choose now :

Menu 1:

Add this CSS code before your ]]></b:skin> tag:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}

Then create a HTML/JavaScript and add this code:

<div id="menu">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a>

<li><a href="#4" title="Portfolio">Portfolio</a>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu1.zip" title="Download">Download Menu</a></li>
</ul>
</div>

Menu 2:

Add this CSS code before your ]]></b:skin> tag

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu Two]-=-=-=-=-=-=-=- */

#menu2 {
width: 200px;
border-style: solid solid none solid;
border-color: #677D92;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #fff;
display: block;
background: url(images/menu2.gif);
padding: 8px 0 0 10px;
}

#menu2 li a:hover {
color: #283A50;
background: url(images/menu2.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu2 li a:active {
color: #283A50;
background: url(images/menu2.gif) 0 -64px;
padding: 8px 0 0 10px;
}

Then create a HTML/JavaScript and add this code:

<div id="menu2">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a>

<li><a href="#4" title="Portfolio">Portfolio</a>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu1.zip" title="Download">Download Menu</a></li>
</ul>
</div>

Menu 3:

Add this CSS code before your ]]></b:skin> tag

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu Three]-=-=-=-=-=-=-=- */

#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}

#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(images/menu3.gif);
padding: 8px 0 0 30px;
}

#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}


Then create a HTML/JavaScript and add this code:

<div id="menu3">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a>

<li><a href="#4" title="Portfolio">Portfolio</a>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu1.zip" title="Download">Download Menu</a></li>
</ul>
</div>

And the other styles are the same ,just follow the ways to add code above, you can make the menu bar with style 4,5,6,7,8 and 9.I just shown you 3 example menu stocks.

Note and Important :
Please notice the red code and green code!

-The red code is the images of each style,these image you can find in the file you have just downloaded at the beginning, you have to upload the images which is compatible with the right menu stock, get the direct URL to the image and paste into the red code.

-The green code is the name of the widget, all have to be 1 name,1 id widget, if you want to use the 7th menu block, but the div id is 3 , it will not work.

*This is the 2nd part for who doesn't want to download the full file.It's better you should download each style of menu , it has 2 files for each style, it will easily for you to make.To view how each style looks, click here.
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Menu 7
Menu 8
Menu 9

When you download each file, you will see 2 files in the zip:imgage and index.html
Click on the file index/html , when the page is loaded, press Ctrl-U to view the source, you will see the place where you have to put the CSS code and the widget from here to your blog source.(Notice the special tag such as </head> , </body>...)

Next click on the image file,upload that image to your favorite image host and get the direct link, paste that image URL to the necessary place.(Notice the code has this line : background: url(images/menu3.gif) 0 -32px;,the red code is the menu style image URL).

That's all, Save and join, share your friends if you like but please offer me a back link as a thank.
Thanks much guys and I hope you will like this tip.
Follow me and Subscribe me now to view more interesting tips.I can change whole your blog.
Zen


Requirements :CSS
Website : www.zenplate.blogspot.com
Bring to BLogger : Zenplate