You have a list of links, but want to build an elegant menu like the one shown in figure. Here is the code that can perform this. It’s as easy as that. Just create a new HTML file using any editor you like. Copy the code below, paste it in your newly created html file. Save and double click to see the menu.

Code:

<html>
<head>
<style>
#navsite {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
width: 130px;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 15px;
background-color: #9cc;
color: #333;
}
#ul {
list-style: none;
margin: 0;
padding: 0;
}
#navsite ul li {
margin: 0;
border-top: 1px solid #003;
}
#navsite ul li a {
display: block;
padding: 2px 2px 2px 8px;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: auto;
}
#navsite ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
</style>
</head>
<body>
<div id="navsite">
<ul id="ul">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/archives/">Archives</a></li>
<li><a href="/writing/">Writing</a></li>
<li><a href="/speaking/">Speaking</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
</body>
</html>

Let me know if you like it.

Tagged with: ProgrammingSource Code
 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Related News Feeds

Set your Twitter account name in your settings to use the TwitterBar Section.