Two level side menu bar : Menu « CSS Controls « HTML / CSS






Two level side menu bar

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Your company description" />
<meta name="keywords" content="key,words,here,blew wave" />
<meta name="author" content="Your Company Name - Designer: Joe Rozzi, http://www.cirkuit.net" />
<title>Blew Wave</title>
<style type='text/css'>
/* 
Designed by Joe Rozzi from Cirkuit Networks, Inc. - http://www.cirkuit.net
Free to use, please give credit for original design.
*/
body {
  margin-top:0px;
  margin-bottom:25px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
}

#main {
  width:750px;
  color:#666666;
  text-align:center;
  margin:0 auto;
  font-size:80%;
  line-height:130%;
  background-color:#FFFFFF;
}

#header_wrapper, #nav_wrapper, #content_wrapper {
  width:765px;
}

/* top right breadcrumbs */
#breadcrumbs {
  float:right;
  margin:0 10px -12px 0;
  font-size:85%;
}

/* blue wave header image */
#header {
  clear:right;
  background-image:url(images/header-1.gif);
  background-repeat:no-repeat;
  text-align:left;
}
#header h1 { color:#2a56d6; height:115px; margin:0 15px; padding:0; line-height:2em; font-size:180% }

/* left navigation area */
#content_left {
  float:left;
  width:145px;
  line-height:135%;
  padding:5px;
  margin:0 0 10px 0;
  text-align:left;
  font-size:100%;
}
#content_left p {
  padding:0;
  margin:8px 0 0 8px;
}
#content_left ul { /* starts left navigation */
  margin:8px 0 0 8px;
  padding:0;
  text-align:left;
}
#content_left li { /* main navigation list item */
  display:block;
  list-style:none;
  width:100%;
  margin:0;
  padding:0;
  font-weight:bold;
}

#content_left li.sub { /* sub navigation list item */
  display:block;
  list-style:none;
  width:100%;
  padding:0;
  margin:0 0 0 10px;
  font-weight:normal;
}

#content_left a, #content_left a:visited { /* mouse out navigation anchor link styles */
  display:block;
  width:100%;
  margin:0px;
  padding:0px;
  text-decoration:none;
  color:#666666;
  border-bottom:1px solid #FFFFFF;
}
#content_left a:hover, #content_left a:visited:hover { /* mouse over navigation anchor link styles */
  display:block;
  width:100%;
  margin:0px;
  padding:0px;
  color:#2a56d6;
  text-decoration:underline;
  border-bottom:1px solid #FFFFFF;
}

/* main textual content area */
#content {
  padding:5px;
  margin:0 0 10px 0;
  line-height:140%;
  background-color:#FFFFFF;
  text-align:left;
  float:right;
  width:590px;
}
#content p {
  padding:0;
  margin:8px 0 0 2px;
}
#content_l { /* main textual content area (left box) */
  margin:0 auto;
  padding:5px;
  display:inline;
  float:left;
  width:48%;
}
#content_r { /* main textual content area (right box) */
  margin:0 auto;
  padding:5px;
  display:inline;
  float:right;
  width:48%;
}

/* header tags */
h1 {
  color:#2a56d6;
  font-size:130%;
  display:block;
  width:100%;
}
h2 {
  font-size:120%;
  display:block;
  width:100%;
  border-bottom:2px solid #F0F0F0;
  margin:0;
  padding:0;
  color:#557ef5;
}

/* anchor links */
a, a:visited {
  text-decoration:none;
  color:#2a56d6;
}
a:hover, a:visited:hover {
  color:#2a56d6;
  text-decoration:underline;
}

/* footer */
#footer_wrapper {
  margin:0 auto;
  padding:0;
  width:765px;
  border-top:6px double #CCCCCC;
  font-size:80%;
  text-align:center;
  clear:both;
}
#footer {
  padding-right:5px;
  margin:0;
  line-height:190%;
  text-align:right;
  clear:both;
  vertical-align:middle;
}
</style>


</head>
<body>
<div id="main">
<!-- ##### Header ##### -->
<div id="header_wrapper">
<div id="breadcrumbs"><a href="#">Home</a> | <a href="#">Contact</a> | <a href="#">View Cart</a></div>
<div id="header">
  <h1>Blew Wave </h1>
</div>
</div>
<!-- ##### Textual Content Area ##### -->
<div id="content_wrapper">
<div id="content">
<h2>Comments</h2>
<p>This template was created by Joe Rozzi from Cirkuit Networks, Inc.. This template is standard XHTML/CSS and was released to open source web design because it is very versatile and can easily be customized for your web site. This template has been tested in Safari, Firefox, and Internet Explorer (Windows), but should work for other common browsers. If you have any questions, you can find out how to contact us by visiting our <a href="http://www.cirkuit.net" target="_blank">company's web site</a>.</p>
<p>&nbsp;</p>
<div id="content_l">
  <h2>Web Standards</h2>
  <p>This template design is XHTML 1.0 Transitional. Template structure uses all XHTML and CSS to display the content; this template does not use tables.</p>
</div>
<div id="content_r">
  <h2>Versatility</h2>
  <p>A lot of features with in this template design can be changed via CSS. If you have any suggestions for this template or future templates please contact us. </p>
</div>
<p>&nbsp;</p>
<h2>Open Source Web Design</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sit amet sem. Suspendisse consectetuer leo. Vestibulum ac augue vitae tortor semper vulputate. Proin ultricies ullamcorper ante. Donec accumsan lorem et erat. Mauris vestibulum, nibh vel suscipit imperdiet, erat tortor tincidunt diam, eget venenatis velit massa at purus. Sed nonummy tempor libero. Aliquam nibh elit, euismod quis, placerat vel, aliquet eget, mi. Quisque ac massa eu dui aliquet gravida. Proin lorem lorem, aliquet ut, consectetuer id, ullamcorper id, metus. Ut velit. In id eros faucibus arcu porttitor luctus.</p>
<p>Curabitur laoreet convallis nisl. Suspendisse augue velit, egestas dignissim, euismod ut, tempor ut, urna. Donec scelerisque, augue at porttitor gravida, massa felis condimentum massa, a tristique tellus quam ac quam. Nam odio nibh, eleifend sit amet, aliquet vel, ornare nec, lorem. Nulla id leo et nunc vulputate dignissim. Maecenas lacus. Vestibulum varius, neque ac rhoncus facilisis, tortor nibh consectetuer dui, quis condimentum enim erat sed odio. Proin ut massa. Fusce sagittis est id quam. Suspendisse potenti. Integer tellus metus, sollicitudin eget, ullamcorper ac, hendrerit et, augue. Praesent lorem tellus, aliquam vel, semper a, commodo eget, quam. Sed dolor lacus, cursus ut, fermentum convallis, egestas sed, velit. Sed cursus lectus. Maecenas lorem. Vestibulum turpis pede, bibendum nec, molestie a, mattis nec, ligula. Etiam in nibh. Nam vitae erat vel felis mattis condimentum.</p>
<p>Nunc ut turpis quis tellus vehicula rhoncus. Cras pede sem, nonummy at, elementum vel, pharetra non, nisi. Fusce vestibulum. Cras congue cursus lorem. Etiam dignissim tristique sem. Curabitur scelerisque arcu ut nulla auctor tempor. Aenean congue tincidunt dolor. Pellentesque sem nulla, tristique non, semper eu, aliquam ac, dui. Proin purus justo, semper sed, ultricies sit amet, hendrerit ac, sem. Integer eget augue. Phasellus non quam at risus gravida pellentesque. Nunc tempus enim ac quam. Aliquam posuere libero eu nisi ultrices tincidunt.</p>
<p>&nbsp;</p>
</div>
<!-- ##### Left Navigation Bar ##### -->
<div id="content_left">
<h2>Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="sub"><a href="#">Company Info</a></li>
<li class="sub"><a href="#">Employees</a></li>
<li><a href="#">News</a></li>
</ul>
<br />
<h2>Site News</h2>
<p><strong>04/11/06</strong><br />Blew Wave 1.0 template designed. Enjoy.</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p align="center"><a href="http://validator.w3.org/check?uri=referer" target="_blank">Valid XHTML 1.0 Transitional</a><br />
<a href="http://jigsaw.w3.org/css-validator/" target="_blank">
  Valid CSS
 </a>
</p>
</div>
</div>
<!-- ##### Footer ##### -->
<div id="footer_wrapper">
<div id="footer"> &copy; 2006 Your Company | 
<!-- ##### Author: Joe Rozzi, Cirkuit Networks, Inc. - http://www.cirkuit.net
Please leave this comment and "Design by Cirkuit Networks, Inc." link below.
It is all I ask of you. Feel free to add "Modified by: Your Name", etc. ##### -->
<a href="http://www.cirkuit.net" target="_blank">Design by Cirkuit Networks, Inc.</a> 
  | <a href="http://www.ehostinfo.com/">Web Hosting</a> </div>
</div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.Use show or hide UL with link
2.Horizontal menu
3.CSS only menu with mouse over
4.Left bar menu
5.Menu bar with highlight
6.Menu with highlight
7.fixed width floated menu
8.Mouse hover left bar
9.Left navigation bar
10.Use UL and LI to wrap link menu
11.Tab Menu
12.Left bar menu list
13.Top tab menu bar
14.Navigation menu on the top
15.Wide and tall menu
16.Shading menu bar
17.Top menu bar with arrow icon
18.3D top bar background
19.Left menu bar aligned to the bottom
20.Indented vertical menu
21.Single column layout with top menu bar
22.Two-level left menu bar
23.Right section bar with shading menu
24.Right menu bar with image background
25.Right menu bar with section
26.Top menu bar
27.Using top arrow to indicate top menu selection
28.Wide and tall top menu bar
29.List menu bar with background image
30.Two level menu bar
31.Top menu with arrow indication
32.Two column, two leve top menu bar
33.List menu with image
34.Menu List item
35.List menu bar
36.Top menu list bar with bold bottom
37.Side menu bar
38.Scrollable section in side menu bar
39.Selected menu item indication
40.Card layout with top menu bar
41.Side menu bar with lot of space in between
42.HTML skeleton code for creating a two-level horizontal drop menu
43.using jQuery to toggle a hidden menu
44.Vertical menu
45.Horizontal menu bar
46.Vertical menu bar
47.sliding door menu
48.horizontal list menu
49.Sub navigation menu
50.Pure css menu
51.Two column layout with menu on the left
52.Navigation menu horizontal
53.Pure CSS drop-down menu
54.Menu item with border
55.Vertical menu on the left
56.LI menu
57.Mouse hover effect for left menu
58.Post item layout with menu
59.Left menu bar with mouse hover effect
60.a:hover background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
61.Menu item with border 2
62.Link menu
63.Left menu bar with thicker border
64.Change border and background with mouse hover for left menu bar
65.Nested left menu bar
66.Vertical menu bar 2
67.Fixed left menu bar
68.Dark background for menu bar
69.Link menu item with side bar
70.Tag like top menu bar
71.Two line top menu bar
72.Menu item separated with border
73.Using arrow image to indicate current menu selection
74.Two level top menu bar
75.Tab menu bar with mouse hover effect
76.Menu bar with background image
77.Left bar with news item
78.Continue read link