CSS Vertical "Navigation" Menus For Blogger & Webs
CSS Vertical "Navigation" Menus For Blogger & Webs
Just Two days ago, I shared a collection of horizontal CSS menus for blogs and websites
with you. 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.
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 # 2:
CSS Vertical Menu # 3:
CSS Vertical Menu # 4:
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.
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!
http://www.onlineustaad.com/2012/10/css-vertical-menus.html
Komentar
Posting Komentar