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.

 

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 .

ALSO READ
Top 7 Software to Build a Business Portfolio Website by Yourself

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://www.3ptechies.com/menu4.gif);
    padding: 8px 0 0 30px;
}
 
#obasim li a:hover {
    color: #fff;
    background: url(https://www.3ptechies.com/menu4.gif) 0 -32px;
    padding: 8px 0 0 30px;
}
 
#obasim li a:active {
    color: #fff;
    background: url(https://www.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://www.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>

 

ALSO READ
4 Reasons Why Your Website Design Sucks (Improving Web Design)
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

Sign Up in Seconds


Join us to get latest updates (ONLY) delivered to your inbox. No Spam, We Promise!

17 COMMENTS

  1. Nice post. Always trying to learn more

  2. Great info here. Never heard of this before. Thanks

  3. I understood none of that. I’m being honest though. I have zero coding experience, so it’s really hard for me to decipher, but you’re content is obviously very rich for those html guys!

    • Thanks for dropping by Nick, Css is one of those stuff you will like to know

  4. I really admire anyone who knows CSS – because I don’t!

  5. This is really cool. Information Technology awareness is something that everyone needs but not everyone has.

  6. You should consider embedding a jpeg, so readers can see what the what changes the additional CSS would make from default

    • Thanks for this suggestion, will consider doing that now

  7. I’ve been learning so much from your posts. Thanks

  8. INformative post on CSS, Never got my hands on them

  9. Dr. Steve Smiley

    Hey, cool ideas. I will try to incorporate into my blog.

  10. Good post! i see allot of people templated and everything looks the same!

  11. I have been taking the courses at coding academy so I actually understood some of this. I impress myself daily :) lol great article :)

    • Thanks you find this Little piece useful

  12. thanks for the info! I’m not very good at understanding website codes so thankyou, always up for learning new things!

LEAVE A REPLY

Please enter your comment!
Please enter your name here