CSS cool Vertical Menus



Today, I would like to share CSS vertical menus collection with you. As you might know, CSS menus look great in a website. There are many benefits of using menus in a blog or website; the first benefit of using a CSS menu is: it attracts the visitors to click on the links inside the menu and the second benefit is: the menus are faster in loading, they don’t take much time to load in all browsers, Because with css you make the menus more readable for the browser. The css codes are just called in HTML page by a class or an ID selector. So, within just one word you can call them to be appeared on your blog. We will keep sharing CSS menus with you because there are thousands of stylish menus are there with different looks. We will also share a collection of drop down menus with you in our coming posts.

cool css menus

How to add CSS vertical menus to blog or website?

The procedure of adding any css menu to your blogger blog or website is quite simple and can be done within few steps. The menus we are sharing today are created with CSS and HTML. You can copy the entire code from the text box below in the list. And then go to your Blogger dashboard >> Layout >> Add a Gadget and paste the code inside that. Save the widget and view your blog to see the new added menu.

Remember:

These menus are vertical menus, therefore, they are mostly used in sidebar of your blog. Make sure you add them in sidebar for better result. The codes are with example pictures can be found below. Customization will be taught below the menu codes.

CSS vertical Menu # 1

CSS vertical Menu

<style>#menu1 { width: 200px; margin: 10px; } #menu1 li a { height: 32px; voice-family: “”}””; voice-family: inherit; height: 22px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #666; display: block; background: url(‘http://4.bp.blogspot.com/-g7cGankjXio/UImaDWbk3hI/AAAAAAAAfHs/odOOAehEuNI/s1600/menu-1.gif’); padding: 10px 0 0 35px; } #menu1 li a:hover { color: #000; background: url(‘http://4.bp.blogspot.com/-g7cGankjXio/UImaDWbk3hI/AAAAAAAAfHs/odOOAehEuNI/s1600/menu-1.gif’) 0 -32px; padding: 10px 0 0 35px; } #menu1 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu1″>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

CSS vertical Menu # 2

CSS menus

#menu2 { width: 200px; 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(‘http://3.bp.blogspot.com/-X1T8GWy0Ayc/UIme4WwPHMI/AAAAAAAAfIo/0PTynvx96NE/s1600/menu-2.gif’); padding: 8px 0 0 10px; } #menu2 li a:hover { color: #FFF; background: url(‘http://3.bp.blogspot.com/-X1T8GWy0Ayc/UIme4WwPHMI/AAAAAAAAfIo/0PTynvx96NE/s1600/menu-2.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu2 ul { list-style: none; margin: 0; padding: 0; } <div id=”menu2″>
<ul>
<li><a href=”#1″ title=”Link 1″>Link 1</a></li>
<li><a href=”#2″ title=”Link 2″>Link 2</a></li>
<li><a href=”#3″ title=”Link 3″>Link 3</a></li>
<li><a href=”#4″ title=”Link 4″>Link 4</a></li>
<li><a href=”#5″ title=”Link 5″>Link 5</a></li>
</ul>
</div>

CSS vertical Menu # 3

CSS vertical menus

<style>#menu3 { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; 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: #5E7830; display: block; background: url(‘http://4.bp.blogspot.com/-tor2hEbAJXI/UImgQRCNuoI/AAAAAAAAfIw/dj1gRx9BwvQ/s1600/menu-3.gif’); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #26370A; background: url(‘http://4.bp.blogspot.com/-tor2hEbAJXI/UImgQRCNuoI/AAAAAAAAfIw/dj1gRx9BwvQ/s1600/menu-3.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu3 li a:active { color: #26370A; background: url(images/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } #menu3 ul { list-style: none; margin: 0; padding: 0; } </style><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=”#6″ title=”Download”>Download Menu</a></li>
</ul>
</div>

CSS vertical Menu #4

Cool CSS menu

<style>#menu4 { width: 200px; margin-top: 10px; } #menu4 li a { text-decoration: none; height: 32px; voice-family: “”}””; voice-family: inherit; height: 24px; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background: url(‘http://3.bp.blogspot.com/-SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’); padding: 8px 0 0 20px; } #menu4 li a:hover { color: #257EB7; background: url(‘http://3.bp.blogspot.com/-SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’) 0 -32px; padding: 8px 0 0 25px; } #menu4 li a:active { color: #fff; background: url(‘http://3.bp.blogspot.com/-SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’) 0 -64px; padding: 8px 0 0 25px; } #menu4 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu4″>
<ul>
<li><a href=”#1″>Home</a></li>
<li><a href=”#2″>About</a></li>
<li><a href=”#3″>Services</a></li>
<li><a href=”#4″>Portfolio</a></li>
<li><a href=”#5″>Store</a></li>
<li><a href=”#6″>Download Menu</a></li>
</ul>
</div>

Customization:

After adding the code into an HTML/JavaScript in blogger you can customize the menu by yourself; for changing the links and anchor texts to your own just find below piece of code in the menu:

<ul><li><a href=”#”>About</a></li></ul>

All the links are inside the ul tag, so replace each (#) sign with your link and the text i.e About, Home, Services etc with your own anchor text. Save the widget and check the result by viewing your blog. All the CSS properties and values can also be customized according to your needs.  You can add these menus to any website as well.

Note: The images which have been used in these menus are saved in my Picasa photo album, so you don’t need to do any extra work. Just use them and enjoy!

About Abdul Wali

Abdul Wali is a Web Developer, SEO Consultant and Online Instructor working online for last 6 years on the internet and managing several successful websites. You can contact him via Email or follow him on Facebook. Also add him on .

Check Also

FileZilla FTP in Urdu

How to Upload HTML website to Online Server in Urdu

Few days back, we learnt creating a complete website layout by using HTML and CSS. …

  • ali

    salam wali bhai aap se eik baat pochni thi yee jo aap ne ad lagya hai CSS cool Vertical Menus name ke neche wo as template mein kis tera lage ga

    • Goto you single.php file and edit
      before “” ad your code

  • love you dear bhay you are doing a great job. I real appreciate you Thank you for all sharing