Cool Free Pure Css menu to use for your website , blog or forum

I have been going through some series of tutorials lately covering  all web-designing and development guide  for beginners, experts tips and computer maintenance hacks just to help us improve drastically on our general Information Technology awareness . This is unconnected with the fact that I’m seeing many young site designers who uses themes leaving every thing at the default settings making almost all the sites on the internet look alike (coughs ) lol.

Love css tricks ? You may want to read our latest css hack  on How to Add Slanting Css Hover Effect on a Website Image

Now You don’t want to waste time before laying your hands on the tools or do you ?   certainly no will be your answer for sure . Tools for generating free pure css menu : I don’t want to begin to dig into deep stuff or custom software  now let’s just share some awesome online tools you can readily use to push some beauty into your website , blog , forum and social networking sites.

• Pure Css Menu
• Cool Menu
• Impressive Css Menu

Must Read : Top5 Novice Ready Software To Build Your Small Business Portfolio Website Yourself

Steps to creating and Integrating Your Natural / Pure Css Menus To Your Website :

Just head over to any of the links above , create your menu and copy the necessary individual files to a notepad text window eg:

• copy sample.css to empty notepad text 1
• copy the html code to empty notepad text 2
• copy the image url (if applicable ) to empty notepad text 3

to avoid error while integrating your codes .

Integrating your codes:

For Dreamweaver and Software Based Website Builders :

1. Create an external css file if you don’t have any already
2. Add the css code you copied from the links above to your newly created or already existing style.css files
3. Add or import the style.css to your workspace using applicable tools / option
4. Move the downloaded image for css code (if applicable ) to your images folder and link appropriately to your styling in style.css file
5. Paste the html code where ever you want the menu to appear in your workspace

For Cms Based Sites :

These includes sites built on

popular cms platform

like joomla , wordpress , magento , oxwall , smf , vbulletin, phbb. punbb, mybb, elg, jcow , Drupal , Ip board , blogger and even less popular and/or unknown ones .

1. Copy the generated css code and paste it in the very last lines of your style.css or custom.css in your current (activated) theme directory
2. Upload the images (if applicable) to a folder in your site and update the background image url link in your css style image link above as seen here

background: url(enter the link to the uploaded image here ) 0 -32px;

3. Paste the html code in your header.php (where you want it to appear) or any doc that contains your cms header area

Must Read Today : How I lost my 2 weeks lunch allowance to Mochahost faulty System

Case Study / Sample  :

Vertical Css Menu With Image :

Css (for styling ie, style.css)

#obasim {
    width: 200px;
    border-style: solid solid none;
    border-color: #D76100;
    border-width: 1px;
    padding: 0;
}
 
#obasim ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#obasim li a {
    height: 32px;
    height: 24px;
    text-decoration: none;
    font-weight: normal;
    color: #9E3C02;
    display: block;
    background: url(https://img.3ptechies.com/menu4.gif);
    padding: 8px 0 0 30px;
}
 
#obasim li a:hover {
    color: #fff;
    background: url(https://img.3ptechies.com/menu4.gif) 0 -32px;
    padding: 8px 0 0 30px;
}
 
#obasim li a:active {
    color: #fff;
    background: url(https://img.3ptechies.com/menu4.gif) 0 -64px;
    padding: 8px 0 0 30px;
}

Image Url (in this case, it's applicable and already uploaded to https://www.3ptechies.com/menu4.gif)

https://img.3ptechies.com/menu4.gif

Html Code (which should be pasted any where you want the menu to appear )

<div id='obasim'>
<ul>
   <li><a href='#'><span>Portfolio </span></a></li>
   <li><a href='#'><span>Clients </span></a></li>
   <li><a href='#'><span>Services </span></a></li>
   <li><a href='#'><span>Our Team </span></a></li>
   <li><a href='#'><span>Ongoing Promo</span></a></li>
   <li class='last'><a href='#'><span>Request for a qoute </span></a></li>
</ul>
</div>

 

Must Read : Amazing things u can Add to your genesis / thesis / normal wordpress blog without a plugin

 Demo and Concluding Lines : you can use widgets , mods , html modules and dynamic sidebars to place the html code any where you want the menu to appear .

let’s get your comments and changes