Colorful Fast Menu stock!!!
[04:26 | 0 comments ]



Hi, 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.

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 ]]> tag:

<style type="text/css">
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>

See the Whole code for the above,
===============================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Free Menu Designs - e-lusion.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="CSS menus free for all" />
<meta name="keywords" content="CSS, css, CSS menu, CSS design, css design, CSS menu design, e-lusion, Ian, ian, e-lusion.com" />
<meta name="author" content="Ian Main" />
<meta name="Copyright" content="Creative Commons - http://creativecommons.org/licenses/by/2.0/" />
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #F3FAFF;
}
a:link {
color: #76B0D5;
text-decoration: none;
}
a:visited {
color: #7B878F;
text-decoration: none;
}
a:hover, a:active {
color: #2399E5;
}
#container {
width: 760px;
}
#header {
color: #76B0D5;
background: #C5E7FD;
border-bottom: 3px solid #76B0D5;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 3em;
padding: 10px;
}
#content {
margin: 10px;
color: #555;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
p {
font-size: .9em;
}
#firstcol {
float: left;
}
#secondcol {
float: left;
}
#thirdcol {
padding-top: 10px;
margin-right: 106px;
margin-bottom: 10px;
float: right;
}
/* =-=-=-=-=-=-=-[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;
}
/* =-=-=-=-=-=-=-[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;
}
/* =-=-=-=-=-=-=-[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;
}
/* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */
#menu4 {
width: 200px;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #9E3C02;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 30px;
}
#menu4 li a:hover {
color: #fff;
background: url(images/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
#menu4 li a:active {
color: #fff;
background: url(images/menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}
/* =-=-=-=-=-=-=-[Menu Five]-=-=-=-=-=-=-=- */
#menu5 {
width: 200px;
border-style: none solid none solid;
border-color: #D0D0D0;
border-width: 1px;
margin: 10px;
}
#menu5 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu5 li a:link, #menu5 li a:visited {
color: #777;
display: block;
background: url(images/menu5.gif);
padding: 8px 25px 0 10px;
text-align: right;
}
#menu5 li a:hover {
color: #fff;
background: url(images/menu5.gif) 0 -32px;
padding: 8px 25px 0 10px;
text-align: right;
}
#menu5 li a:active {
color: #fff;
background: url(images/menu5.gif) 0 -64px;
padding: 8px 25px 0 10px;
text-align: right;
}
/* =-=-=-=-=-=-=-[Menu Six]-=-=-=-=-=-=-=- */
#menu6 {
width: 200px;
margin: 10px;
}
#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu6 li a:link, #menu6 li a:visited {
color: #8D9179;
display: block;
background: url(images/menu6.gif);
padding: 8px 0 0 10px;
}
#menu6 li a:hover, #menu6 li a:active {
color: #6C7250;
background: url(images/menu6.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu Seven]-=-=-=-=-=-=-=- */
#menu7 {
width: 200px;
border-style: none dashed dashed dashed;
border-color: #608FB5;
border-width: 1px;
}

#menu7 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}
#menu7 li a:link, #menu7 li a:visited {
color: #1D537F;
display: block;
background: url(images/menu7.gif) repeat-x;
padding: 10px 0 0 10px;
}

#menu7 li a:hover {
color: #fff;
background: url(images/menu7.gif) repeat-x 0 -32px;
padding: 10px 0 0 10px;
}

#menu7 li a:active {
color: #fff;
background: url(images/menu7.gif) repeat-x 0 -64px;
padding: 10px 0 0 10px;
}

/* =-=-=-=-=-=-=-[Menu Eight]-=-=-=-=-=-=-=- */
#menu8 {
width: 200px;
margin-top: 10px;
}
#menu8 li a {
text-decoration: none;
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
}
#menu8 li a:link, #menu8 li a:visited {
color: #777;
display: block;
background: url(images/menu8.gif);
padding: 8px 0 0 20px;
}
#menu8 li a:hover {
color: #257EB7;
background: url(images/menu8.gif) 0 -32px;
padding: 8px 0 0 25px;
}
#menu8 li a:active {
color: #fff;
background: url(images/menu8.gif) 0 -64px;
padding: 8px 0 0 25px;
}

/* =-=-=-=-=-=-=-[Menu Nine]-=-=-=-=-=-=-=- */
#menu9 {
width: 200px;
margin-top: 10px;
}

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

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

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

#menu9 li a:active {
color: #fff;
background: url(images/menu9.gif) 0 -64px;
padding: 8px 0 0 10px;
}
</style>
</head>

<body>

<div id="header">Free Menu Designs</div>
<div id="container">
<div id="content">
<p>Need a block menu fast!</p>

<p>Below are simple CSS menu designs for you to download and use any way you see fit.</p>

<p>You can download the <a href="full.zip" title="Download 9 menu designs">complete set</a>, or an individual menu by clicking the Download Menu button located on each menu.</p>

<p>Thanks to <a href="http://veerle.duoh.com/" title="Menu 3">Veerle</a> for the <a href="http://veerle.duoh.com/comments.php?id=208_0_2_5_C" title="Designing a CSS based template - part I">tutorial on the menu design 3</a>, the best looking menu here.</p>
<p>Please feel free to download for commercial or private use, and modify to suit your needs.</p>

<p><a href="http://creativecommons.org/licenses/by/2.0/">Creative Commons - Attribution 2.0</a> - designed by <a href="http://www.e-lusion.com">Ian Main - e-lusion.com</a></p>

</div>
<div id="firstcol">
<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu1.zip" title="Download">Download Menu</a></li>
</ul>
</div>


<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu2.zip" title="Download">Download Menu</a></li>
</ul>
</div>

<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>

<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu3.zip" title="Download">Download Menu</a></li>
</ul>
</div>
</div>
<div id="secondcol">
<div id="menu4">
<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu4.zip" title="Download">Download Menu</a></li>
</ul>
</div>

<div id="menu5">
<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu5.zip" title="Download">Download Menu</a></li>
</ul>
</div>

<div id="menu6">
<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu6.zip" title="Download">Download Menu</a></li>
</ul>
</div>
</div>
<div id="thirdcol">
<div id="menu7">
<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu7.zip" title="Download">Download Menu</a></li>
</ul>
</div>
<div id="menu8">
<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu8.zip" title="Download">Download Menu</a></li>
</ul>
</div>
<div id="menu9">
<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>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu9.zip" title="Download">Download Menu</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
===============================================
*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 , ...)

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.

Good Luck!!!

-Amar

Bookmark and Share

0 comments

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words to help each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on http://bloghelpforbegineers.blogspot.com

Best regards,
-Amaresh