how to create a vertical menu

Vertical menu is suitable when installed in the sidebar because of its vertical lined sevara. Examples such as the picture next to it. How to make:
1. Login to blogger, go to "Layout -> Edit HTML"2. Find the code </ head> and enter the following eighth before the code </ head>
<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>
3. Then find this code ]]></ b: skin> insert the following code before ]]></ b: skin> or before the code </ style>. Place in the line CSS code.


. Glossymenu,. Glossymenu ul li {
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; / * WIDTH OF MAIN MENU ITEMS * /
border: 1px solid black;
}
. Glossymenu li {
position: relative;
}
. Glossymenu li a {
background: white url ('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
. Glossymenu ul li {
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
. Glossymenu li ul li {
float: left;
}
. Glossymenu ul li a {
width: 180px;
}
. Glossymenu li a: visited,. Glossymenu li a: active {
color: white;
}
. Glossymenu li a: hover {
background-image: url ('http://blog.superinhost.com/vertical/blue2.gif');
}

* Html. Glossymenu li {float: left; height: 1%;}
* Html. Glossymenu li a {height: 1%;}

To select the color menu, note the red
codes (blue1.gif and blue2.gif). Replace the code with the color choices below. For example if you want to choose the color red menu then the code becomes like this:
 

. Glossymenu li a {
background: white url ('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
and

. Glossymenu li a: hover {
background-image: url ('http://blog.superinhost.com/vertical/
red.gif');


Colors vertical menu:
blue1.gif
blue2.gif

green1.gif
green2.gif

red1.gif
red2.gif

pink1.gif
pink2.gif

black1.gif
black2.gif

4. Then in the save.
5. Then to menu "Page Elements"
6. Select "Add Page Elements -> HTML / JavaScript" then enter the following code into it:
<ul id="verticalmenu" class="glossymenu">
<a href="http://yusron-news.blogspot.com/"> Home </ a> </ li>
<a href="http://yusron-news.blogspot.com/">
Health</ a> </ li>
<a href="http://yusron-news.blogspot.com/"> Free Templates </ a> </ li>
<a href="http://getebook.co.cc"> Free Ebook </ a> </ li>
</ Li>
</ Ul>


The color code green is the color blue link and who is the text displayed. If you want to add a menu to stay for longer code like that and so on.
Good luck!!!


 source: http://trik-tips.blogspot.com

0 comments

Post a Comment