Wide and tall menu : Menu « CSS Controls « HTML / CSS

Wide and tall menu

<!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">

Copyright: Denise Mitchinson 2007, http://www.mitchinson.net
License: Released Under the "Creative Commons License", 
--><!-- Meta Data -->


<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type='text/css'>
body {
font : 73% "lucida sans", "Trebuchet MS", helvetica, arial, sans-serif;
line-height: 1.7em;
background : #fff url(71_verde-images/pattern_036.gif) repeat;
color : #555;
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 0px solid #ccc;
margin: auto;
padding: 10px;
background : #fff;
#topbar {
height : 25px;
margin : 0;
padding : 0;
background : #80A173;
color : #666;
#banner h1 {
float : right;
margin : 0;
padding : 60px 20px 10px 0;
font-size : 140%;
letter-spacing: 3px;
font-weight: bold;
text-transform : uppercase;
background : transparent;
color : #5F6951;
#banner {
padding: 0px;
margin-bottom: 10px;
height: 150px;
background: #BCEDA8 url(71_verde-images/02.jpg) no-repeat;
#leftbox  {
float : left;
width : 200px;
height: auto;
padding : 0;
margin-top : 0;
font-size : 1em;
background : #fff;
color : #333;

#rightbox {
float : right;
width : 70%;
height: auto;
margin : 0;
padding-top : 20px;
background : #fff;
color : #A4B48B;
#content {
padding: 5px;
margin-left: 215px;
background:  #fff;
#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0 5px 0 0;
padding: 5px;
background:  #fff;
      /*TOP NAVIGATION */ 
#menu {
height: 100px;
margin : 0;
padding : 0;
list-style-type : none;
list-style-image : none;
text-transform : lowercase;
background: #5F6951;
#menu li {
float : left;
width :10em;
border-right : 1px solid #eee;
#menu a {text-decoration: none;
display : block;
height : 70px;
width : 10em;
padding : 30px 0 0 0;
font-weight : bold;
line-height : 30px;
letter-spacing: 3px;
text-align : center;
color : #000;
background : #A4B48B;
#menu a:hover {
color : #fff;
background : #969B85 url(71_verde-images/pattern_036.gif) repeat;
ul { 
list-style : none;
margin : 0;
padding : 0;
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background: #BCC2A6;
color: #eee;
.clear {
clear : both;
h2 {
margin : 0;
padding: 15px 0 0 15px;
font : bold 140% "Trebuchet MS", "lucida sans", helvetica, arial, sans-serif;
text-transform : uppercase;
line-height: 1.5em;
background : transparent;
color : #A4B48B;
h3 {
margin : 0;
font : normal 200% "Trebuchet MS", "lucida sans", helvetica, arial, sans-serif;
text-transform : uppercase;
line-height: 2em;
border-bottom: 1px solid #5F6951;
background : transparent;
color : #5F6951;
      /*SEARCH BOX*/
legend { 
color : #5F6951;
input { 
background : #eee;
color : #5F6951;
a:link, a:visited {
text-decoration : none;
background : inherit;
color : #5F6951; 
a:hover {
text-decoration : underline;
background : inherit;
color :  #666;



<div id="container">

<div id="banner"><h1>Your Company Name</h1></div>    
<div id="menu">
      <li><a href="#1" title="Link 1">Home</a></li>
      <li><a href="#2" title="Link 2">About</a></li>
      <li><a href="#3" title="Link 3">Products</a></li>
      <li><a href="#4" title="Link 4">Services</a></li>
      <li><a href="#5" title="Link 5">Contact</a></li>  

<div id="leftbox">

<img src="71_verde-images/03b.jpg" alt="" title="" />


<div id="rightbox">

<blockquote><h2>This template has been tested in Mozilla Firefox and IE7 &amp; validates as XHTML 1.0 Transitional using valid CSS. The images used in this template are courtesy of <a href="http://www.sxc.hu/" title="free images">stock xchng</a>. Thanks to <a href="http://www.squidfingers.com/"> Squidfingers</a> for the background pattern.</h2>

<p>This template has been released under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0  License</a> which basically means you are free to modify them in any way to suit your needs but you must include the link 'Design by www.mitchinson.net' in the footer of the template.</p>

<h2>For <a href="http://www.mitchinson.net" title="Snapp Happy">more FREE CSS templates</a> visit my website.</h2></blockquote>


<div class="clear">&nbsp; </div>

<div id="sidebar-a">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget mi. Suspendisse eget neque ac tortor vehicula accumsan. Sed gravida egestas nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget mi. Suspendisse eget neque ac tortor vehicula accumsan. Sed gravida egestas nisi.</p>

<form action="" method="post">
<span><label for="txtsearch"> <img src="71_verde-images/search.gif" alt="search" /> : Looking for something?</label></span>
<span><input type="text" value="demo only" name="txtsearch" title="Text input: search" id="txtsearch" size="25" /></span>


<div id="content">


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget mi. Suspendisse eget neque ac tortor vehicula accumsan. Sed gravida egestas nisi. In sit amet nisi vitae arcu volutpat pretium. In eu leo. Aliquam vulputate ligula eu mi. Pellentesque luctus, mi sed fringilla interdum, risus nunc sodales nulla, a tincidunt dolor nisl tincidunt velit. Donec odio. Etiam rutrum ligula. Quisque accumsan sagittis diam. In hac habitasse platea dictumst. Phasellus malesuada mattis ante. Sed sapien tellus, placerat non, egestas et, suscipit id, lorem. Etiam at mauris. Fusce accumsan egestas mauris.</p>
<p>Fusce porttitor lorem nec nunc. Vestibulum blandit nibh ut lectus tristique congue. Quisque pharetra dui at libero. Duis et metus et nisl placerat semper. Nulla facilisi. Nam sit amet mauris. Maecenas nec leo. Sed interdum tempus felis. Cras sed leo ac nisi cursus iaculis. Suspendisse a lorem sit amet tortor dictum ullamcorper.</p>


    <div id="footer"><a href="#">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> |  &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0  License</a></div>


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