Digg style Menu Design in CSS

Menu Samples Add comments | 708 views |

Description:

This tutorial I’ll explain a simple step-by-step way to implement an Digg style Menu Design in CSS.
The result is something like this:

Script Code

Step 1: Insert the below into the <HEAD> section of your page: (Select to copy)
<link href="style.css" rel="stylesheet" type="text/css" /> <script src="show_layer.js"></script>

The above references an jquery.js file. Download (by right clicking, and selecting “Save As”),

and upload to your webpage directory. Within the above code

CSS Code:

Step 2: Insert the below into the <HEAD> section of your page: (Select to copy)
body{font-family:Arial, Helvetica, sans-serif; background-color:#e7ffd1} ul, li{margin:0; border:0; padding:0; list-style:none;} #middlebar{ font-size:11px; color:#3b5d14; background:#90b557; font-weight:bold; padding:4px; height:30px; } h2{ margin:0px; padding:10px; font-size:16px; color:#003333} #middlebar .menu li { background:url(lm.png) left top no-repeat; height:30px; float:left; margin-right:10px; } #middlebar .menu li a{ color:#3b5d14; text-decoration:none; padding:0 10px; height:30px; line-height:30px; display:block; float:left; padding:0 26px 0 10px; background:url(rm.png) right top no-repeat; } #middlebar .menu li a:hover{ color:#666666; } #middlebar ul .submenu { border:solid 1px #c9dea1; border-top:none; background:#FFFFFF; position: relative; top: 4px; width:150px; padding:6px 0; clear:both; z-index:2; display:none; } #middlebar ul .submenu li{ background:none; display:block; float:none; margin:0 6px; border:0; height:auto; line-height:normal; border-top:solid 1px #DEDEDE; } #middlebar .submenu li a{ background:none; display:block; float:none; padding:6px 6px; margin:0; border:0; height:auto; color:#105cbe; line-height:normal; } #middlebar .submenu li a:hover{ background:#e3edef; } #topbar{font-size:14px; color:#3b5d14; background:#b2d281; font-weight:bold; padding:6px; overflow:auto; height:1%; clear:both;} #topbar a{color:#3b5d14; text-decoration:none; margin:0 10px; height:23px; line-height:23px; float:left; display:block;} a.active{ height:23px; line-height:23px; background:url(pic/tb_a.png) right top no-repeat; padding-right:10px; } a.active span{ background:url(pic/tb_span.png) left top no-repeat; height:23px; display:block; padding-left:10px;} #middlebar02{font-size:11px; color:#3b5d14; background:#90b557; font-weight:bold; padding:6px; overflow:auto; height:1%; clear:both;} #middlebar02 a{ color:#3b5d14; text-decoration:none; margin:0 5px; padding-right:10px; height:23px; line-height:23px; display:block; float:left; background:url(pic/mb_a.png) right top no-repeat; } #middlebar02 a span{background:url(pic/mb_span.png) left top no-repeat; height:23px; display:block; padding-left:10px;}

HTML Code:

Step 3: Insert the below into the <BODY> section of your page: (Select to copy)
 <div style="margin:0 auto; width:400px;"> <h2> Digg style CSS vertical menu </h2>  <div id="middlebar"> <ul class="menu"> <li><a href="#" onclick="javascript:showlayer('sm_1')">Profile</a></li> <ul class="submenu" id="sm_1"> <li><a href="http://www.csscody.com/demo">Profile</a></li> <li><a href="http://www.csshook.com">Inbox </a></li> <li><a href="http://www.csscody.com">Log-out</a></li> </ul> </ul> </div> <h2> Digg style CSS Tabs </h2> <div id="topbar" > <a href="http://www.csscody.com">All</a> <a href="http://www.csscody.com" class="active">News</a> <a href="http://www.csscody.com">Video</a> <a href="http://www.csscody.com">Images</a> </div> <div id="middlebar02"> <a href="http://www.csscody.com">Technology</a> <a href="http://www.csscody.com">World</a> <a href="phttp://www.csscody.com">css</a> <a href="http://www.flex3.info">Flex</a> </div> </div>

Got a question or need help customizing this Jquery code? Post it in the help me. If you have a comment or suggestion instead, post it in the comments section below.