List menu bar with background image : Menu « CSS Controls « HTML / CSS






List menu bar with background image

  

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

Name       : Curiously Green
Version    : 1.0
Released   : 20080425

-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Curiously Green by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
*
{
margin: 0px;
padding: 0px;
}

body
{
background-color: #fff;
color: #9f9f9f;
font-size: 11px;
font-family: "trebuchet ms", helvetica, sans-serif;
}

a
{
text-decoration: underline;
color: #93B300;
}

a:hover
{
text-decoration: none;
color: #fff;
background: #D3E378 url('Curiously.Green-images/bbg1.gif') repeat-x;
}

strong
{
background: inherit;
color: #50514D;
}

#header
{
width: 100%;
height: 104px;
background-color: #4d4d4d;
background: url('Curiously.Green-images/a1.gif') repeat-x;
color: #ffffff;
}

#header_inner
{
position: relative;
width: 680px;
height: 104px;
margin: 0px auto;
}

#header_inner h1
{
background: inherit;
position: absolute;
left: 0px;
bottom: 10px;
text-transform: lowercase;
font-size: 39px;
color: #fff;
font-weight: normal;
letter-spacing: -2px;
}

#header_inner h1 span
{
background: inherit;
color: #DADADA;
}

#slogan
{
background: inherit;
position: absolute;
right: 0px;
bottom: 25px;
color: #DADADA;
text-transform: lowercase;
font-size: 13px;
}

#main
{
padding-top: 20px;
position: relative;
width: 680px;
margin: 0px auto;
padding-bottom: 10px;
}

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

#menu li
{
background: none;
padding: 0px;
font-weight: bold;
}

#menu a
{
display: block;
position: relative;
width: 168px;
height: 27px;
margin-bottom: 1px;
text-decoration: none;
background: inherit;
background-image: url('Curiously.Green-images/bbg0.gif');
padding-left: 17px;
padding-top: 11px;
color: #636363;
text-transform: lowercase;
font-size: 13px;
}

#menu a span
{
position: absolute;
right: 0px;
margin-top: 5px;
margin-right: 15px;
width: 7px;
height: 7px;
background: url('Curiously.Green-images/x1.gif') no-repeat; 
}

#menu a:hover span
{
position: absolute;
right: 0px;
margin-top: 5px;
margin-right: 15px;
width: 7px;
height: 7px;
background: url('Curiously.Green-images/x2.gif') no-repeat;
}

#menu a:hover
{
background: inherit;
color: #fff;
background-image: url('Curiously.Green-images/bbg1.gif');
}

#menu_end
{
height: 30px;
background-image: url('Curiously.Green-images/a2.gif');
}

h1
{
background: inherit;
color: #50514D;
text-transform: lowercase;
font-size: 26px;
}

h1 span
{
background: inherit;
color: #85AC1E;
}

h1 span sup
{
background: inherit;
color: #85AC1E;
font-size: 14px;
}

h3
{
margin-top: 30px;
background: inherit;
color: #50514D;
font-size: 15px;
text-transform: lowercase;
height: 34px;
background: url('Curiously.Green-images/a3.gif') repeat-x 0px 17px;
}

h3 span
{
background: inherit;
color: #85AC1E;
}

h3.first
{
margin-top: 0px;
}

#lcol
{
position: relative;
width: 185px;
float: left;
}

#lcontent
{
position: relative;
padding: 0px 15px 0px 15px;
}

#rcontent
{
position: relative;
padding: 25px 20px 0px 20px;
}

ul
{
list-style: none;
}

li
{
background: url('Curiously.Green-images/x1.gif') no-repeat 0px 5px;
padding-left: 15px;
}

p
{
margin-bottom: 25px;
text-align: justify;
line-height: 20px;
}

#lcol p
{
font-size: 10px;
line-height: 16px;
margin: 0px;
}

.divider
{
font-size: 0px;
position: relative;
border-bottom: solid 1px #F5F5F5;
height: 1px;
width: 100%;
margin: 10px 0px 10px 0px;
}

.summary
{
text-align: right;
font-style: italic;
}

ul.divided li
{
border-top: solid 1px #F5F5F5;
margin-top: 4px;
padding-top: 4px;
background-position: 0px 9px;
}

ul.divided li.first
{
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
background-position: 0px 5px;
}

#rcol
{
position: relative;
margin-left: 190px;
width: 485px;
background-image: url('Curiously.Green-images/a2.gif');
background-repeat: repeat-x;
}

#slogan2
{
font-size: 14px;
position: relative;
top: -5px;
}

.box
{
position: relative;
border: dashed 1px #dadada;
margin-top: 15px;
background: inherit;
color: #AAB165;
}

.box h2
{
background: inherit;
color: #6C7425;
text-transform: lowercase;
font-weight: normal;
font-size: 18px;
margin-bottom: 5px;
}

.box p
{
font-size: 10px;
line-height: 16px;
margin: 0px;
}

.box_inner
{
border: solid 1px #fff;
padding: 15px;
background: #FFFFE9 url('Curiously.Green-images/a4.gif') repeat-x;
color: inherit;
}

.captioned_image
{
position: relative;
padding-bottom: 15px;
float: left;
margin-right: 17px;
}

.captioned_image div
{
position: absolute;
font-size: 9px;
bottom: 0px;
left: 0px;
}

#footer
{
clear: both;
background: url('Curiously.Green-images/a2.gif') repeat-x;
width: 680px;
margin: 0px auto;
margin-bottom: 25px;
padding-top: 10px;
text-align: center;
text-transform: lowercase;
}
</style>


</head>
<body>

<div id="header">
  <div id="header_inner">
    <h1><span>curiously.</span>green</h1>
    <div id="slogan">Gravida tortor lectus pellentesque.</div>
  </div>
</div>

<div id="main">

  <div id="lcol">
    <div id="menu">
      <ul>
        <li><a href="#">Site Homepage<span></span></a></li>
        <li><a href="#">My Blog<span></span></a></li>
        <li><a href="#">Portfolio<span></span></a></li>
        <li><a href="#">About Me<span></span></a></li>
        <li><a href="#">Contact Me<span></span></a></li>
      </ul>
    </div>
    <div id="menu_end"></div>

    <div id="lcontent">
      <h3 class="first">Interesting.<span>Stuff</span></h3>
      <ul class="divided">
        <li class="first"><a href="#">Tincidunt aliquam</a></li>
        <li><a href="#">Cursus lorem nulla</a></li>
        <li><a href="#">Nunc ante elit</a></li>
        <li><a href="#">Tincidunt aliquam</a></li>
        <li><a href="#">Cursus sed tempus</a></li>
      </ul>
    
      <h3>Aliquam.<span>Cursus</span></h3>
      <p><a href="#">Sollicitudin sed</a> arcu et vivamus viverra. Nullam turpis. Vestibulum Nullam turpis vestibulum.</p>  
      <div class="divider"></div>

      <p><a href="#">Vestibulum veroeros</a> sed arcu et vivamus viverra lorem ipsum dolor sit amet dolore nulla facilisi.</p>
    </div>

  </div>

  <div id="rcol">
    <div id="rcontent">
    
      <h1>Curiously<span>.Green</span></h1>
      <span id="slogan2">a plain and simple free design</span>
  
      <div class="box">
        <div class="box_inner">  
          <div class="captioned_image">
            <img src="images/pic.jpg" alt="Figure 1" />
            <div>Fig 1. Obscure?</div>
          </div>
          <h2>Some obscure headline</h2>
          <p>Sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor.  Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor.</p>    
        </div>
      </div>

      <h3>Obscure.<span>Explanations</span></h3>
      <p><strong>Curiously Green</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. The photos in this design are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>

      <p>Be sure to check out some of my commercial work over at <a href="http://www.4templates.com/?aff=n33">4Templates</a>.</p>
      <div class="divider"></div>
      <div class="summary">Lorem ipsum dolor sit amet nullam dignissim</div>

      <h3>Tincidunt.Sed.<span>Vestibulum</span></h3>
      <p>
        Quisque suscipit, quam vel aliquet tincidunt, eros nisi ultrices urna, a interdum est purus vitae leo.
        Pellentesque a lectus et tortor tincidunt <a href="#">dignissim etiam</a>. Aliquam erat volutpat. Quisque
        risus nunc, eleifend gravida, ullamcorper non, gravida ut, nulla.
      </p>

    </div>
  </div>

</div>

<div id="footer">
  &copy; 2006 My.Website. All rights reserved. Design by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> 
  | <a href="http://www.ehostinfo.com/">Web Hosting</a>.
</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.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