BEAUTIFUL CSS3 VERTICAL MENU

BEAUTIFUL CSS3 VERTICAL MENU

Step 1: Insert the following code in the <HEAD> section of your page
<style type="text/css">


.vert_menu {
width: 125px;
margin: 0;
padding: 0;
display: block;
}

.vert_menu ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

.vert_menu ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;

}

.vert_menu ul li a {
display: block;
margin:2px 0 0;
width: 100%;
text-transform: uppercase;
font-family:arial;
font-size:15px;
font-weight:bold;
color: #FFFFFF;
padding:10px 24px;
text-align:center;
text-decoration: none;
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
text-shadow:1px 1px 0px #528ecc;
}


/* MENU HOVER */
.vert_menu ul li a:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}


</style>



Step 2: Insert the below sample code into the <BODY> section of your page:


<!--MENU_STARTS_HERE-->

<div class='vert_menu'>
<ul>
<li><a href='#'>MENU 1</a></li>
<li><a href='#'>MENU 2</a></li>
<li><a href='#'>MENU 3</a></li>
<li><a href='#'>MENU 4</a></li>
<li><a href='#'>MENU 5</a></li>
<li><a href='#'>MENU 6</a></li>
</ul>
</div>

<!--MENU_ENDS_HERE-->

Comments

Post a Comment

Popular posts from this blog

Menu With Rounded Corners In CSS

Image
Step 1: Insert the following code in the <HEAD> section of your page <style type="text/css"> #menu { float: left; padding: 0px 10px; margin: 0px; border-bottom: 5px solid #05480a; } #menu li { display: inline; list-style: none; margin: 0px; padding: 0px; } #menu li a { float: left; color: #000000; text-decoration: none; background: url('menuleft.gif') top left no-repeat; margin: 0px 1px; padding: 9px 0px 6px 10px; } #menu li a span { background: url('menuright.gif') top right no-repeat; padding: 9px 25px 6px 15px; } #menu li a:hover, #menu li a.highlight { background: url('menuleft-hl.gif') top left no-repeat; color: #ffffff; } #menu li a:hover span, #menu li a.highlight span { background: url('menuright-hl.gif') top right no-repeat; } </style> Step 2: Insert the below sample code into the <BODY> section of your page: <ul id="menu"> <li><a href=...
Read more

BOXED WIDTH ANIMATION

Step 1: Insert the following css code in the <HEAD> section of your page <style type="text/css"> body { background:#000; overflow:hidden; margin:0; padding:0; } .container { width:1000px; height:500px; margin:5% auto 0; padding:20px; background:#CCC; } .left-panel { background:#319400; width:780px; height:500px; float:left; margin:0 20px 0 0; padding:0; text-align:center; position:relative; transition-property: background; transition-duration: 1s; transition-timing-function: linear; } .left-panel:hover { background: #ff7b29; } .right-panel-visible { background:#0065e2; width:200px; height:500px; float:left; margin:0; padding:0; } .right-panel-hidden { background:#00a27a; width:475px; height:500px; float:left; margin:0; padd...
Read more

CSS DROP DOWN MENU

CSS DROP DOWN MENU Step 1: Insert the following code in the <HEAD> section of your page <style> .top_menu{ border:none; border:0px; margin:0; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:100%; } .top_menu ul{ background:#333333; height:35px; list-style:none; margin:0; padding:0; width:66%; -webkit-box-shadow: 0px 0px 3px 0px #000000; box-shadow: 0px 0px 3px 0px #000000; } .top_menu li{ float:left; padding:0px; } .top_menu li a{ border-left:#999 1px solid; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .top_menu li a:hover, .top_menu ul li:hover a{ background: #2580a2 ; color:#FFFFFF; text-decoration:none; } .top_menu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; po...
Read more