List menu bar : Menu « CSS Controls « HTML / CSS






List menu bar

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Azulmedia</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />

<style type='text/css'>
/* ----------------------------------------------------

   AUTHOR           :    Erwin Aligam
   WEBSITE          :    http://www.styleshout.com/
   TEMPLATE NAME    :   Azulmedia
   TEMPLATE CODE    :   S-0008
   VERSION          :   2.2
   LAST DATE MOD    :   January 20, 2010 

------------------------------------------------------- */

/* ----------------------------------------------------
   HTML ELEMENTS
------------------------------------------------------- */

/* top elements */
* { padding: 0; margin: 0; outline: 0; }

body {
  margin: 0;   padding: 0;
  font: normal 12px/1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
  color: #BDBDBD;
  background: #000;
  text-align: center;  
}
/* links */
a:link, a:visited {
  color: #FFF;
  background-color: inherit;
  text-decoration: none;
}
a:hover {
  color: #FFF;
  background-color: inherit;  
  text-decoration: underline;
}

/* headers */
h1, h2, h3 {
  font: bold 1.3em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
  color: #FFF;  
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; text-transform:uppercase; font-weight: bold;}
h3 { font-size: 1.3em; font-weight: bold; }

p, h1, h2, h3 {
  margin: 0;
  padding: 10px 15px;
}

ul, ol {
  margin: 10px 30px;
  padding: 0 15px;
  color: #FFF;
}

/* images */
img {
    background: #fff;
    border: 1px solid #0A1646;
  padding: 8px;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}

code {
  margin: 5px 0;
  padding: 20px 15px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #0A1646;  
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
    margin: 15px;
   padding: 10px 0 10px 20px;
    background: #0A1646;
  font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;   
}

/* form elements */
form {
    margin: 15px;
  padding: 15px 10px;
  background: #0A1646;
}
label {
  display:block;
  font-weight:bold;
  margin:5px 0;
}
input {
  padding: 2px;
  border:1px solid #eee;
     color:#777;
}
textarea {
  width: 250px;
  padding:2px;
  border:1px solid #eee;
  height:100px;
  display:block;
  color:#777;
}
input.button { 
  margin: 0; 
  font: bold 1em Arial, Sans-serif; 
  border: 1px solid #CCC;
  background: #FFF; 
  padding: 2px 3px; 
  color: #333;  
}

/* search form */
.searchform form{
  background-color: transparent;
  border: none;
  margin: 0; padding: 0;
}
.searchform input.textbox { 
  margin: 0; 
  width: 145px;
  border: 1px solid #777; 
  background: #FFF;
  color: #333; 
  height: 14px;
  vertical-align: top;
}
.searchform input.button { 
  margin: 0; 
  padding: 2px 3px; 
  font: bold 12px Arial, Sans-serif; 
  background: #FFF;
  border: 1px solid #f2f2f2;
  color: #333;  
  width: 65px;
  vertical-align: top;
}

/* -----------------------------------
    LAYOUT
-------------------------------------- */
#wrap {
  background: #212B5C url(Azulmedia-images/bg.jpg) repeat-x 0 0; 
  margin: 20px auto 0 auto;  
  text-align: left;    
    border-color: #444;
  border-style: solid;
  border-width: 1px 1px 5px 1px;  
}  
#wrap, #footer-wrap {
    width: 940px;
}

/* header */
#header {
  position: relative;
  height: 120px;
  background: #7F8082 url(Azulmedia-images/header-bg.jpg) repeat-x 0% 100%;
  border-bottom: 5px solid #444;    
}
#header h1#logo {
  position: absolute;
  top: 8px; left: 25px;
  margin: 0; padding: 0;
  font: bolder 50px 'Trebuchet MS', Arial, Sans-serif;
  letter-spacing: -2px;  
}
#header h2#slogan {
  position: absolute;
  top: 55px; left: 70px;
  color: #FFF;
  text-indent: 0px;
  font: bold 11px 'Trebuchet MS', Arial, Sans-serif;
  text-transform: none;
}

/* content-wrap */
#content-wrap {
  clear: both;
  margin: 0;
    padding: 0 0 30px 0;
}
.box {
  margin: 10px 20px 20px 15px;
    padding: 10px 15px;
  border: 1px solid #0A1646;     
  background-color: #1B2455;  
}

/* main */
#main {
    float: right;
    width: 645px;
  margin: 0;
  padding-top: 20px;
}
#main .box {
  margin-left: 0;
}

/* sidebar */
#sidebar {
  float: left;
  width: 270px;
  margin: 10px 0 0 0;
  padding-top: 20px;
}
#sidebar h2 {
  margin-left: 8px;
  margin-top: 10px;
  text-transform: none;
}
#sidebar p {
  margin-left: 10px;
}

/* sidemenu */
#sidebar ul.sidemenu {
  margin: 0 0 0 20px;
    padding: 10px 0 15px 0;
  background: #242424;    
  border-top: 5px solid #444;
}
#sidebar ul.sidemenu li {
  display: inline;
  list-style: none;    
}
#sidebar ul.sidemenu li a {
  display: block;  
  padding: 8px 10px 8px 15px;
  text-decoration: none;
  color: #CCC;
  font-weight: bold;  
} 
#sidebar ul.sidemenu li a:hover {
  color: #333;
  background: #A0A0A0;  
}

/* footer */
#footer-wrap { 
  clear: both; 
  color: #9F9F9F;
  background: #000; 
  margin: 0 auto; 
  padding: 0; 
  font-size: 88%;
}
#footer-wrap a { 
  text-decoration: none; 
     color: #FFF;
}
#footer-wrap .footer-left{
  float: left;
  width: 65%;  
  padding-bottom: 20px;  
}
#footer-wrap .footer-right{
  float: right;
  width: 30%;      
  padding-bottom: 20px;
}

/* navigation */
#header ul {
  position: absolute;
  top: 28px; right: 25px;
  margin:0; padding: 0;
    list-style:none;
  font: bold 14px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
    height: 2.3em;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float: left;
   margin: 0;
   padding: 5px 15px 2px 15px;
   text-decoration:none;  
   color: #CCC;
}
#header a:hover {
  border-top: 5px solid #CCC;
}
#header #current a {
   color: #FFF;
  border-top: 5px solid #FFF;
}

/* alignment classes */
.float-left  { float: left; }
.float-right {  float: right; }
.align-left  {  text-align: left; }
.align-right {  text-align: right; }

/* additional classes */
.clear { clear: both; }
.gray  { color: #A0A0A0; }
.comments { 
  padding: 8px 15px;
  margin: 20px 15px 15px 15px;
  background: #0A1646;   
}

</style>



</head>

<body>
<!-- wrap starts here -->
<div id="wrap">

  <div id="header">  
    
    <h1 id="logo">azul<span class="gray">media</span></h1>  
    <h2 id="slogan">Put your site slogan here...</h2>    
    
    <!-- Menu Tabs -->
    <div id="menu">
      <ul>
      <li id="current"><a href="index.html">Home</a></li>
      <li><a href="index.html">News</a></li>
      <li><a href="index.html">Downloads</a></li>
      <li><a href="index.html">Support</a></li>
      <li><a href="index.html">About</a></li>      
      </ul>    
    </div>    
  
  </div>
        
  <!-- content-wrap starts here -->
  <div id="content-wrap">   
  
    <div id="main">
    
      <a name="TemplateInfo"></a>      
      <div class="box">
        
        <h1>Template <span class="gray">Info</span></h1>
        
                <p><strong>Azulmedia</strong> is a free, W3C-compliant, CSS-based website template
                by <a href="http://www.styleshout.com/">styleshout.com</a>. This work is
                distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
                Creative Commons Attribution 2.5  License</a>, which means that you are free to
                use and modify it for any purpose. All I ask is that you give me credit by including a <strong>link back</strong> to
                <a href="http://www.styleshout.com/">my website</a>.
                </p>

                <p>
                You can find more of my free template designs at <a href="http://www.styleshout.com/">my website</a>.
                For premium commercial designs, you can check out
                <a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate.com</a>.
                </p>
        
        <p class="comments">
          <a href="index.html">Read more</a> |
          <a href="index.html">Comments(7)</a> | 
          Oct 28, 2006
        </p>
        
      </div>
      
      <a name="SampleTags"></a>
      <div class="box">
        <h1>Sample <span class="gray">Tags</span></h1>
        
        <h3>Code</h3>        
        <p><code>
        code-sample { <br />
        font-weight: bold;<br />
        font-style: italic;<br />        
        }
        </code></p>  
      
        <h3>Example Lists</h3>
      
        <ol>
          <li>example of</li>
          <li>ordered list</li>              
        </ol>  
            
        <ul>          
          <li>example of</li>
          <li>unordered list</li>                
        </ul>        
        
        <h3>Blockquote</h3>      
        <blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>
      
        <h3>Image and text</h3>
        <p><a href="http://getfirefox.com/"><img src="Images/firefox-gray.jpg" width="100" height="121" alt="firefox-gray" class="float-left" /></a>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
        Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
        posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum 
        odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra 
        condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. 
        In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar 
        ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.         
        </p>
      
        <h3>Example Form</h3>
        <form action="#">    
          <p>        
          <label>Name</label>
          <input name="dname" value="Your Name" type="text" size="30" />
          <label>Email</label>
          <input name="demail" value="Your Email" type="text" size="30" />
          <label>Your Comments</label>
          <textarea rows="5" cols="5"></textarea>
          <br />  
          <input class="button" type="submit" />    
          </p>    
        </form>        
        
        <br />  
      
      </div>  
              
    </div>

        <div id="sidebar" >

      <h2 class="clear">Sidebar Menu</h2>
      <ul class="sidemenu">
        <li><a href="index.html">Home</a></li>
        <li><a href="#TemplateInfo">Template Info</a></li>
        <li><a href="#SampleTags">Sample Tags</a></li>
        <li><a href="http://www.styleshout.com/">More Free Templates</a></li>
        <li>
        <a href="http://www.buywebtemplates.net" title="Web Templates">Web Templates</a></li>
      </ul>

      <h2>Sponsors</h2>
            <ul class="sidemenu">
                <li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate</a></li>
                <li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts</a></li>
                <li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com</a></li>
                <li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock</a></li>
                <li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft</a></li>
                <li><a href="http://www.ehostinfo.com/" title="Web Hosting">Web Hosting</a></li>
            </ul>

      <h2>Search</h2>
      <div class="searchform">
        <form action="#">
          <p>
          <input name="search_query" class="textbox" type="text" />
            <input name="search" class="button" value="Search" type="submit" />
          </p>
        </form>
      </div>

      <h2>Wise Words</h2>
      <p>&quot;The happiest people are those who invested their time in others.
      The unhappiest people are those who wonder how the world is going to
      make them happy&quot;</p>

      <p class="align-right">- John Maxwell</p>

      <h2>Support Styleshout</h2>
      <p>If you are interested in supporting my work and would like to contribute, you are
      welcome to make a small donation through the
      <a href="http://www.styleshout.com/">donate link</a> on my website - it will
      be a great help and will surely be appreciated.</p>

    </div>

  <br />
    <div class="clear"></div>
  <!-- content-wrap ends here -->    
  </div>  

<!-- wrap ends here -->
</div>

<!-- footer starts here -->  
<div id="footer-wrap">
  
  <div class="footer-left">
    <p class="align-left">      
    &copy; 2010 Company Name |
    Design by <a href="http://www.styleshout.com/">styleshout</a>
         | <a href="http://www.cssportal.com/">CSS Portal</a></p>
  </div>
  
  <div class="footer-right">
    <p class="align-right">
    <a href="index.html">Home</a> |
      <a href="index.html">SiteMap</a> |
         <a href="index.html">RSS Feed</a> |
        <a href="http://validator.w3.org/check/referer">XHTML</a> |
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
    </p>
  </div>
  
</div>
<!-- footer ends here -->  

</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.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