TinyPortal

I Found this snippet of a CSS Dashed Vertical Menu and i thought i would shear it with you all.

It's a Nice Professional look

Simply, Create a HTML & Java Block and paste the following code

<style type="text/css">

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

</style>

<div id="vertmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>

Just edit the CSS style colours to match your theme and Change the menu Names to what ever you want  ;)

Nice, sometimes simple is best  :) Thanks.

Can you post a screenshot or a link to a demo on this snippet ?  :)

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fimg15.imageshack.us%2Fimg15%2F4583%2F54915731.th.jpg&hash=2018b0ebcfd3aa5cf34ed08a66ee7e64167ff23d) (http://img15.imageshack.us/i/54915731.jpg/)

Nice simple block...looks good :up:

Yep, works fine and is quick and simple...