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

HTML / CSS » CSS Controls » Menu 
Menu bar with background image
  
<!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">
<head>
<title>Biru_Manteb &raquo; Made Bay Kodokhunt aka Hendrawan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="hendrawan ak.a kodokhunt" />
<style type='text/css'>
/*Author Name: Hendrawan
  Author NickName: Kodokhunt
  URI 1:http://kodokhunt.blogsome.com
  URI 2:http://dot.choosen.net
  OFFICE 1:http://bascomp.org
  OFFICE 2:http://choosen.net
  */
/*---------------|||||||||||Global------------------------------------------------------*/
  
  body {
    margin:auto;
    margin-bottom: 30px;
    margin-top: 0px;
    background:#2763A5 url(Biru_Manteb-img/back.gif);
    }

  {
    color: #6DA6E2;
    text-decoration: none;
    font-weight: bold;
    }

  a:hover {
    color:#2763A5;
    font-weight: bold;
    text-decoration: underline;
    }
    
/*---------------|||||||||||Container------------------------------------------------------*/

  #container {
    width: 750px;
    margin: auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    margin-top:30px;
    color: #666;
    background-color: #fff;
    }
    
  #container2 {
    width: 750px;
    margin: auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    color: #666;
    background-color: #fff;
    }
    
/*---------------|||||||||||header-------------------------------------------------------------------*/

  #header {
    width: 745px;
    border: 2px solid #fff;
    padding-bottom:10px;
    padding-top: 10px;
    clear: both;
    background:url(Biru_Manteb-img/head.gifno-repeat;
    }
    
  #header p 
    margin-top: -3px;
    margin-left: 30px;
    color: #fff;
      font-family: Georgia, Times New Roman, Times, serif;
    }
      
  #header h1 {
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
    margin-top:30px;
    margin-left: 10px;
    }
    
  #header a {
    color: #6DA6E2;
    text-decoration: none;
    }

  #header a:hover {
    color: #999;
    }
      
/*---------------|||||||||||Menu-------------------------------------------------*/

    #menu {
      float:left;
      width:745px;
      font-size:93%;
    padding-bottom: 1px;  
    background:url(Biru_Manteb-img/menu.gif);
      line-height:normal;
      }
    
    #menu ul {
    margin:0;
    padding:10px 10px 0 20px;
    list-style:none;
      }
    
    #menu li {
      display:inline;
      margin:0;
      padding:0;
      }
    
    #menu a {
      float:left;
      background:url(Biru_Manteb-img/left.gifno-repeat left top;
      margin:0;
      padding:0 0 0 6px;
      text-decoration:none;
      }
    
    #menu a span {
      float:left;
      display:block;
      background:url(Biru_Manteb-img/right.gifno-repeat right top;
      padding:5px 15px 4px 6px;
      color:#fff;
      }
    
    #menu a span {
    float:none;
    }
    
    #menu a:hover {
     background-position:0% -42px;
      }
    
    #menu a:hover span {
     background-position:100% -42px;
      }

/*---------------|||||||||||Content------------------------------------------------*/

  #content {
    width: 520px;
    padding-left: 10px;
    padding-right: 10px;
   padding-top: 10px;
    float: left; 
    }
    
  #content p {
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
    }
    
  #content h2 {
    color: #666;
    font-size: 16px;
    font-weight:bold;
    text-decoration:underline;
    font-family: Georgia, Times New Roman, Times, serif;
    background-color: #fff;
    }
    
  #content h2 a {
    color: #666;
    text-decoration: none;
    }

  #content h2 a:hover {
    color: #999;
    }

/*---------------|||||||||||Sidebar------------------------------------------*/

  #sidebar {
    width: 175px;
    padding-left: 19px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0.5em;
    float: right;background:#F1F1F1;
    border-right:4px solid #fff;
    }
    
  #sidebar p {
    padding-bottom: 10px;
    }
    
    #sidebar h2 {
    color: #2763A5;
    font-size: 16px;
    padding-left:15px;
    background:url(Biru_Manteb-img/arrow.gif)no-repeat bottom left;
    font-weight:bold;border-bottom: 1px solid #ddd;
    font-family: Georgia, Times New Roman, Times, serif;
    }
    
/*---------------|||||||||||Footer-----------------------------------------------*/

  #footer {
    clear: both;
    width: 745px;
    font-size:10px;border:2px solid #fff;
       background:#2763A5 url(Biru_Manteb-img/foot.gif);
     background-repeat: no-repeat;
    }
    
  #footer p {
    color:#fff;
    padding: 2px;
    text-align: center;
    }
    
  #footer p a {
    color: #fff;
    background:#2763A5 url(Biru_Manteb-img/foot.gif);
    font-weight:100;
    border-bottom: 1px dotted #fff;
    }
    
  #footer p a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: 0px dotted #fff;
    }
  
/*---------------|||||||||||Search--------------------------------------------------------------*/

  form {
    float:right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-right:5px;
    color:#fff;
    }
    
  input {
    background-color: #fff;
    color: #999;
    border: 1px solid #2763A5;
    font-size: 11px;
    padding: 3px;
    }
    
  .button {
    padding: 2px;
    background-color: #6DA6E2;
    color: #fff;
    border: 1px solid #2763A5;
    font-size: 11px;
    }
     
/*---------------|||||||||||Others--------------------------------------------------------------*/    
  
  a img{
    border: none;
    }
  .box {
      background-color: #fff;
      border: 1px solid #2763A5;
    padding: 5px;
    font-family: Georgia, Times New Roman, Times, serif;
    color: #000;
    font-size: 10px;
    }
  
</style>


</head>

<body>
<!--Contain-->
<div id="container">
    
<!--Skuadron Atas-->
<div id="header">
  <!--Search Facilty-->
  <form method="get" action="http://www.google.com/custom">
       <input name="q" size="25" maxlength="255" value="" type="text" />
        <input name="sa" value="search" type="submit" />
         <input name="cof" value="" type="hidden" />
         </form>
      
<h1>Biru_Manteb Gitu Loh..!!</h1>
<p>This Template used for my company site on http://choosen.net ]</p>

<!--Navigasi Skuad-->
<div id="menu">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Profile</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>The Staff</span></a></li>
    <li><a href="#"><span>Downloads</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
 </div>
</div>
<!--Contain2 Skuad-->
<div id="container2">
  <!--COntent SKuad-->
  <div id="content">
    <h2><img src="img/no_1.gif" alt="" align="bottom" />[Biru_Manteb]</h2>
      <p>
      Welcome To My Biru_Manteb Design, This my Fourth Design for OPen Source Community, 
      This Design used -I hope- for Bussiness website, you can customizing the menu and anything else
      with your idea and is very simply. <br />The Background Idea just only repeat the source image.<br />
      Background Menu, Header, Footer and Arrow in the sidebar used an image, if you think this make your site slowly you can change it,
      maybe with "background-color:#2763A5;", but trust me its makes not cool, huh..<br />
      I hope you can enjoy with this template, No right reserved and links back to me, <br />
      just remember this template was design by <a href="http://dot.choosen.net">me</a><br /><br />
      salam!!<br />Indonesia Goes Open Source<br />
      <a href="#">..more</a></p>
    <h2><img src="img/no_2.gif" alt="" align="bottom" />[Lorem Ipsum]</h2>
      <p>Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website</p>  
  </div>

<!--SideBar Here Bro-->
<div id="sidebar">
  <!--Skuad Right-->
<h2>Links!!!</h2>
<p>
&raquo;&nbsp;<a href="http://kodokhunt.blogsome.com">kodokhunt!</a><br />
&raquo;&nbsp;<a href="http://dot.choosen.net">hendrawan!</a><br />
&raquo;&nbsp;<a href="http://bascomp.org">Bascomp.org!</a><br />
&raquo;&nbsp;<a href="http://choosen.net">Choosen.net!</a><br />
&raquo;&nbsp;<a href="http://oswd.org">OSWD!</a><br />
&raquo;&nbsp;<a href="http://openwebdesign.org">OpenWebDesign!</a>
</p>
<h2>Support</h2>
<p>Add Our Banner to your web site or promote me in your email signature.<br />
Just simply copy and paste the source below to link Back to <a href="#">Us</a>..<br />
<textarea cols="30" rows="4" class="box">
&lt;a href=&quot;#&quot; title=&quot;&quot;&nbsp;target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://domain.tld/img/*.gif&quot; border=&quot;0&quot; width=&quot;120px&quot; height=&quot;60px&quot; /&gt;&lt;/a&gt;
</textarea><br />
</p>
<h2>Lorem Ipsum!!!</h2>
<p>
This sidebar..
used for latest news, latest activity,
testimonial, your client links, your partner links,
maybe a random image..up to you!!!
</p>
</div>

</div><!--End Contain2 here-->

<!--Known Ur Footer-->
<div id="footer">
<p><a href="#">Copyright</a> &copy; 2006 your Company Name, No Rights Reserved | Design by <a href="http://kodokhunt.blogsome.com">kodokhunt</a> 
| <a href="http://www.ehostinfo.com/">Web Hosting</a></p>
</div>

</div><!--End Contain here-->

</body>
</html>
<!--Made on 12 Muharram 1427 H >> hep Phun, "kodokhunt, yo!"-->

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