Free CSS menu : Vertical-1 Menu

Free CSS menu : Vertical-1 Menu

Hi brother ! today i want to give you a vertical menu. The name is vertical-1 menu because this is the first vertical menu, his menu is very compatible in placing at sidebar.

below is following the example of vertical-1 menu. Please drop your mouse to the menu :

CSS Library

Home
Blue menu
Blue menu 2
Double Line Menu
Flip menu

UniQue Template

Minima 3 column
Minima 3 column (beta)
1st template unik
Scribe 3 column
Blu Lover
Gray Lover

Feel interest to make vertical-1 menu at your blog? please follow the steps :

Step 1 :

1. Sign in to blogger with your ID.
2. Click layout tab.
3. Click Edit HTML tab.
4. Click Download Full Template, save your template for backup data.
5. Copy and paste the code below at above of ]]>




/* vertikal vertikal kuning di mulai */ /*Credits: Blog tutorial */ /* get full tutorial at : http://rohman-freeblogtemplate.blogspot.com */ #vertical-1{ border-bottom-width: 0; } #vertical-1 ul{ margin: 0; padding: 0; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */ } #vertical-1 a{ display: block; padding: 3px 0; padding-left: 9px; width: 200px; /* width of mrnu */ text-decoration: none; color: #333222; /* this is the color of alphabet */ border-right:1px solid #000000; background-color: #FBEC04; border-bottom: 1px solid #6A6731; border-left: 7px solid #918C3B; } #vertical-1 a:hover { background-color: #FAF6B9; border-left: 12px solid #918C3B; width: 195px; /*lebar */ } #vertical-1 div.menutitle{ color: white; border-bottom: 1px solid #053E66; padding: 5px 3px 5px 13px; background-color: black; width: 201px; font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; }



6. Click Save Template button

Step 2 :

1. Click Page Element tab
2. Click Add a Page Element
3. Click ADD TO BLOG button below Javascript/HTML
4. Copy and paste the code below in to the element



<div id="vertical-1"> <div class="menutitle">CSS Library</div> <!-- this is the 1st title --> <ul> <!-- Please alter with your links --> <a href="http://rohman-freeblogtemplate.blogspot.com">Home</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html">Blue menu</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html">Blue menu 2</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html">Double Line Menu</a> <a href="http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html">Flip menu</a> <!-- add any links here --> </ul> <div class="menutitle">UniQue Template</div> <!-- this is the 2nd title --> <ul> <a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column</a> <a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Minima 3 column (beta)</a> <a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1st template unik</a> <a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column</a> <a href="http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html">Blu Lover</a> <a href="http://template-unik.blogspot.com/2007/08/gray-lover-template.html">Gray Lover</a> <!-- add any links here --> </ul> </div> <!-- end off vertical-1 menu -->



5. Click SAVE button


6. Click and hold the new element and drag to place where you want


7. Click SAVE button


8. Finish
   

Now you have had a beautiful menu, please change his colour with your colour. See you at my next post. Don't miss it

Source