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
ALSO READ
How Important is a UI/UX Designer to a Tech Startup?

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

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>


 

ALSO READ
News API 101: A Guide to Harnessing News Data in the Digital Age
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

Previous ItemTop 7 Software to Build a Business Portfolio Website by Yourself
Next ItemThe Security Technology Behind Some Of Americas Most Secure Prisons
Obasi Miracle
Obasi Miracle is one of the brains behind 3rd Planet Techies. A webdesign afficionado and IT Support brain-box, he flourishes and revel in helping many-a-techies in their aspiration to become the best they can.

17 COMMENTS

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

  2. 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

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

  4. Dr. Steve Smiley Dr. Steve Smiley

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

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

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

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

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

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

  10. 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

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

  12. Nice post. Always trying to learn more

LEAVE A REPLY

Please enter your comment!
Please enter your name here