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

HTML / CSS » CSS Controls » Menu 
Wide and tall top menu bar
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Dragonfly
Version    : 1.0
Released   : 20090509
Description: A two-column, fixed-width template suitable for corporate websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Dragonfly by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

{
  margin: 0;
  padding: 0;
}

body {
  background: #FFFFFF url(Dragonfly-images/img01.gifrepeat-x;
  text-align: justify;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  color: #666666;
}

h1, h2, h3 {
  color: #333333;
}

h1, h2 {
  margin-bottom: 20px;
  font-weight: normal;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 152%;
}

h3 {
  font-size: 100%;
}

p, ul, ol {
  margin-bottom: 20px;
  line-height: 1.8em;
}

ul, ol {
  margin-left: 3em;
}

blockquote {
  padding-left: 3em;
  background: url(Dragonfly-images/img08.gifno-repeat;
  font-style: italic;
}

a:link {
  color: #1953A7;
}

a:active {
  color: #ED5C0C;
}

a:visited {
  color: #666666;
}

a:hover {
  text-decoration: none;
  color: #067600;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 20px 10px 0;
}

/* Menu */

#menu {
  width: 770px;
  height: 65px;
  margin: auto;
  border-right: 1px solid #EDEBD5;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  width: 109px;
  height: 45px;
  padding: 20px 0 0 0;
  border-left: 1px solid #EDEBD5;
  text-transform: lowercase;
  text-decoration: none;
  text-align: center;
  font-size: 144%;
  color: #BABABA;
}

#menu a:hover {
  background: #F7F7F4;
}

#menu .active a {
  background: #F49A24;
  color: #FFFFFF;
}

/* Header */

#header {
  width: 770px;
  height: 170px;
  margin: auto;
}

#header h1 {
  float: left;
  width: 220px;
  height: 100px;
  margin: 0;
  padding: 70px 0 0 0;
  background: url(Dragonfly-images/img02.jpgno-repeat;
  text-align: center;
  font-size: 36px;
}

#header h2 {
  float: right;
  width: 530px;
  height: 86px;
  margin: 0;
  background: url(Dragonfly-images/img03.jpgno-repeat;
  padding: 84px 20px 0 0;
  text-align: right;
}

#header a {
  text-transform: lowercase;
  text-decoration: none;
  font-style: italic;
  font-weight: normal;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 770px;
  margin: auto;
  padding: 20px 0;
}

/* Content */

#content {
  float: left;
  width: 550px;
  padding-top: 10px;
}

.post {
  margin-bottom: 20px;
  padding: 0 20px;
}

.hr {
  border-bottom: 1px solid #EDEBD5;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 210px;
  padding: 5px;
  background: #EDEBD5;
}

#sidebar h2 {
  margin: 0;
  padding: 5px 15px;
  color: #FFFFFF;
}

#sidebar h3 {
  font-size: 85%;
  color: #FFFFFF;
}

#sidebar ul {
  margin: 0;
  padding: 15px;
  list-style: none;
}

#sidebar li {
}

#sidebar a {
  color: #FFFFFF;
}

.orangebox {
  background: url(Dragonfly-images/img05.gifrepeat-y;
}

.orangebox h2 {
  background: url(Dragonfly-images/img06.gifrepeat-y;
}

/* Footer */

#footer {
  clear: both;
  height: 100px;
  padding: 25px 0;
  background: #EDEBD5 url(Dragonfly-images/img04.gifrepeat-x;
}

#footer p {
  margin: 0;
  text-align: center;
  font-size: 77%;
}

#footer a {
  color: #666666;
}
</style>


</head>
<body>
<div id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Forums</a></li>
    <li class="active"><a href="#">Support</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<!-- end #menu -->
<div id="header">
  <h1><a href="#">Dragonfly</a></h1>
  <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<!-- end #header -->
<div id="page">
  <div id="content">
    <div class="post hr">
      <h1>Welcome to <em>Dragonfly!</em></h1>
      <img src="images/img07.jpg" alt="" width="120" height="120" class="left" />
      <p><strong>Dragonfly</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
    </div>
    <div class="post">
      <h2>Lorem Ipsum Dolor</h2>
      <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus.</p>
      <h3>Curabitur Sem Urna</h3>
      <p>Vel consequat, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdie:</p>
      <blockquote>
        <p>In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. 
          Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.   
          Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. </p>
      </blockquote>
    </div>
  </div>
  <!-- end #content -->
  <div id="sidebar">
    <div id="updates" class="orangebox">
      <h2>Recent Updates</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      <h2>Categories</h2>
        <ul>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
        </ul>
    </div>
  </div>
  <!-- end #sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div id="footer">
  <p id="legal">Copyright &copy; 2009 Dragonfly. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> 
  | <a href="http://www.cssportal.com/">CSS Portal</a>.</p>
  <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
<!-- end #footer -->
</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.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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.