samedi 5 mai 2012

3 CSS vertical menu designs

I have created 3 CSS vertical menu designs for anyone to utilise.

If you have any problems, do not hesitate to comment below and I will be happy to help.

This is the HTML code to be altered to reflect your links:

<div class="techamenu"><ul> 
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3RoZXRlY2huaWNhbGF1dGhvci5ibG9nc3BvdC5jb20v">Latest Blog Entry</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3RoZXRlY2huaWNhbGF1dGhvci5ibG9nc3BvdC5jb20vcC9ibG9nLWluZGV4Lmh0bWw=">Blog Index</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29t">The Technical Author</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL2NvbnRhY3QuYXNweA==">Contact Details</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL3dyaXRpbmdzZXJ2aWNlcy5hc3B4">Writing Services</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL3dlYnNlcnZpY2UuYXNweA==">Online Services</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL3BlcnNvbmFsLmFzcHg=">Author's Professional Details</a></li>
</ul></div>

Below are the 3 sets of CSS codes along with its respective menu.  I would recommend playing with the settings a little so that your menu reflects the colour and style of your website.

Pink Menu

.techamenu{
margin: 0;
padding: 0;
width: 245px;
font: bold 11px Arial;
}

.techamenu ul{
margin: 2px;
padding:1px;
list-style-type: none;
}

.techamenu li{
border-bottom: 1px solid #CCCCCC; /* gray border beneath each menu item */
}

.techamenu li a{
display: block;
background: #FFF0F5; /* to display a block colour behind each link */
color: #000000;
width: auto;
border-left: 4px solid #FFA1A3;
border-bottom: 2px solid #FFFFFF;
padding: 7px 0;
text-indent: 8px;
text-decoration: none;
}

.techamenu li a:visited {
color: #000000;
}

.techamenu li a:hover {
background:  #FFA1A3;  /* settings for hover over effect  */
color: #000000;
}

.techamenu li.lastitem, border-bottom-width: 0; /* remove bottom border on final item */
}

.techamenu li.lastitem {
padding: 8px 0; /* compensation of last menu link */
}


Blue Menu

.techamenu{
margin: 0;
padding: 0;
width: 245px;
font: bold 11px Arial;
}

.techamenu ul{
margin: 2px;
padding:1px;
list-style-type: none;
}

.techamenu li{
}

.techamenu li a{
display: block;
background: #FFFFFF; /* to display a block colour behind each link */
color: #191970;
width: auto;
border: 1px solid #191970;
padding: 7px 0;
text-indent: 8px;
text-decoration: none;
}

.techamenu li a:visited {
color: #191970;
}

.techamenu li a:hover {
background: #191970; /* new colour setting for hover over effect  */
color:  #FFFFFF;
}

.techamenu li.lastitem {
border-bottom-width: 0; /* remove bottom border on final item */
}

.techamenu li.lastitem {
padding: 8px 0; /* compensation of last menu link  */
}
Green Menu

.techamenu{
margin: 0;
padding: 0;
width: 245px;
font: 10px Arial;
}

.techamenu ul{
margin: 2px;
padding:1px;
list-style-type: none;
}

.techamenu li a{
display: block;
background: #FFFFFF; /* to display a block colour behind each link */
font: bold 11px;
color: #000000;
width: auto;
border-left: 1px solid #006400;
border-bottom: 1px solid #006400;
padding: 7px 0;
text-indent: 8px;
text-decoration: none;
}

.techamenu li a:visited{
color: black;
}

.techamenu li a:hover{
background:  #006400; /* settings for hover over effect  */
color: #FFFFFF;
}

.techamenu li.lastitem {
border-bottom-width: 0; /* remove bottom border on final item */
}

.techamenu li.lastitem {
padding: 8px 0; /* compensation of last menu link */
}
Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)