Tab menu bar with mouse hover effect : Menu « CSS Controls « HTML / CSS






Tab menu bar with mouse hover effect

  
<!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>-your title here-</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="-enter you keywords here-" />
<meta name="author" content="-your name here-" />
<meta name="Description" content="-your description here-" />

<style type="text/css">
/* apnerve - an open source html/css website layout by apnerve (http://apnerve.blogspot.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my email apnerve@gmail.com

Version: 1.0
(january 21, 2005) */
/* This was made in 4 hours only, hence no proper comments are available. For help write to me:apnerve@gmail.com */
body{
  margin:0px;
  padding:0px 1% 0px 1%;
  font:80% trebuchet ms;
  text-align:center;
}
#container{
  margin:0px;
  padding:0px;
  text-align:left;
  width:100%;
}
#header{
  height:180px;
  background-color:#369;
  color:#fff;
  padding:1%;
  margin-bottom:2px;
}
#topnav{
  text-align: center;
  margin:30px 0px 0px 0px;
  background:#eec url('apnerve-images/tc_04.gif') top right no-repeat;
}
#content{
  clear:both;
}
#breadcrumb{
  float:right;
  color:#c30;
}
#main{
  float:left;
  width:70%;
  padding:1%;
  background-color: #ccf;
  margin:0px 0px 2px 0px;
}
#sidebar{
  float:right;
  width:25%;
  background-color: #eec;
  padding:1%;
  margin:0px;
}
#infobar{
  margin:2px 0px 0px 0px;
  padding:1%;
  background-color: #fff;
  float:right;
  width:24.5%;
  border:1px dashed #eec;
}
#footer{
  clear: both;
  text-align: center;
  background:#369 url('apnerve-images/bl_03.gif')  bottom left  no-repeat;
  color:#fff;
  padding:1%;
}
p{
  font-size:105%;
}
h1{
  font:bold 2.2em trebuchet ms;
  color:#c30;
  margin:0px;
}
h2{
  color:#333;
  font-size:1em;
  margin:0px;
}
.apnerve{
  color:#333;
}
.indent{
  text-indent: 10px;
}
#topnav a{
  padding:3px 10px 0px 10px;
  font-weight: bold;
}
#topnav a:hover{
  text-decoration:none;
  background-color: #eec;
}
#topnav a.active{
  background-color: #369;
  color:#fff;
}
.hide{
  display:none;
}
a{
  color:#369;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
  color:#c30;
}
ul{
  margin:0px;
  padding:0px;
}
ul.sidelinks li{
  list-style: none;
}
ul.sidelinks li a{
  display: block;
  width:100%;
  background-color: #eee;
  border-top:1px solid #fff;
  font:bold 1em/2em verdana;
}
a.sidelinks span{
  color:#eee;
}
a.sidelinks:hover span{
  color:#369;
}
ul.sidelinks li a:hover{
  text-decoration: none;
}
#footer a{
  color:#fff;
}
.logo a{
  color:#c30;
}
.white{
  color: #fff;
}
img{
  border:none;
}
acronym{
  border-bottom: 1px dashed #eec;
  cursor: help;
}

</style>
</head>
<body> 
<div id="container"> 
  <h1 class="logo"> 
    <!-- Remove the link in case of homepage --> 
    <a href="#">ap<span class="apnerve">n&euml;rve</span>.com</a></h1> 
  <h2 class="indent">apt thinking... apt technology. </h2> 
  <div id="topnav"><a class="active">home</a><span class="hide"> | </span><a href="#intro">Introduction</a><span class="hide"> | </span><a href="#design">The Design</a><span class="hide"> | </span><a href="#apnerve"> The Author </a> <span class="hide"> | </span><a href="#contact">Contact</a></div> 
  <div id="header"> 
    <h2 class="white">Welcome to apnerve.com...</h2> 
    <p>...my first open source web template. This is a user centered design with emphasis on usability and accessibility rather than look n feel. No nasty tables have been used while designing and all the code is validated by <acronym title="world wide web consortium">W3C</acronym> validators. Moreover, the use of images has been kept to the minimum for small file size, hence less loading time. </p> 
    <p>Use the navigation tabs provided at the top.</p> 
  </div> 
  <div id="content"> 
    <div id="main"> 
      <h3 class="hide">Main contents</h3> 
      <!-- An example of bread crumbs generally used in other pages --> 
      <div id="breadcrumb"><a href="#">home</a> &raquo; <a href="#">page1</a> &raquo; <a href="#">page2</a></div> 
      <h3 id="intro">The introduction: </h3> 
      <p>Hello! nd welcome to apnerve.com- my first open source web template. The color scheme is pleasing to the eyes and overall design is aimed at providing good usability to the user. That is to say...its a case of user centered design.</p> 
      <h3 id="design">The Design :</h3> 
      <p>I've used <acronym title="hyper text mark-up language">HTML</acronym>4.01 for markup and <acronym title="cascading style sheets">CSS</acronym> for layout, thereby ensuring a higher content to code ratio. I haven't used any images as I prefer giving much importance to colours and typography. No use of flash files, tables, image maps and scripts has been made so as to confirm to the accessibility guidelines. To use this template, you may need a <acronym title="what you see is what you get">WSIWYG</acronym> editor.(though any text editor would be sufficient). I encourage you to play around with the CSS file and modify it as per requirement. But please don't forget to send me the link, after you have done, so that I may see it.</p> 
      <h3 id="apnerve">The Author:</h3> 
      <p>hey! Its the time to blow my trumpet. Well... I'm not much of a designer but I do love designing web pages. This all started just a couple of months ago, when I first had a look at <a href="http://www.csszengarden.com">csszengarden.com</a>. Eversince I visited that page, a strong desire to design web pages grew in me. Then I started learning basic <acronym title="hyper text mark-up language">HTML</acronym> from <a href="http://www.w3schools.org">w3schools.org</a>, <a href="http://www.htmlhelp.com">htmlhelp</a>, and other online resources followed by viewing the source of major <acronym title="cascading style sheets">CSS</acronym> based pages. Hence, though I don't have a formal training in web-designing, I can design web pages fairly well. I'm also planning to learn <acronym title="php hyper preprocessor">PHP</acronym>, <acronym title="eXtensible hyper text mark-up language">XHTML</acronym>, JavaScripts in due course of time. </p> 
      <h3 id="contact">Contact:</h3> 
      <p>If you decide to use this template please drop me a line to let me know! Feel free to get in touch if you are interested in this template or just if you are in need of assistance while setting it up. I look forward to hearing from you! My email:apnerve@gmail.com</p> 
      <h3>Lorem ipsum:</h3> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p> 
    </div> 
    <div id="sidebar"> 
      <h3 class="hide">Sidebar</h3> 
      <h3>More information: </h3> 
      <p>Here is the sidebar, where you can add things like news, linkage, random quotes e.t.c.</p> 
      <p>For more information and help (like editing, coding e.t.c) on this template, please feel free to email me:<br /> 
      ~ apnerve@gmail.com</p> 
      <h3>Links:</h3> 
      <ul class="sidelinks"> 
        <li><a href="#" class="sidelinks"><span>&raquo; </span>OSWD</a></li> 
        <li><a href="#" class="sidelinks"><span>&raquo; </span>OpenWebDesign</a></li> 
        <li><a href="#" class="sidelinks"><span>&raquo; </span>My Blog </a></li> 
        <li><a href="#" class="sidelinks"><span>&raquo; </span>Sharon Church</a></li> 
        <li><a href="#" class="sidelinks"><span>&raquo; </span>Gurujee</a></li> 
      </ul> 
      <div> 
        <h3>Latest News:</h3> 
        <p>~Download <em>open source</em> web templates at oswd.org</p> 
        <p><strong>~apnerve</strong> is featured on oswd.org and openwebdesign.org</p> 
        <p>~It took only 4 hours to design this template from scratch. </p> 
      </div> 
    </div> 
    <div id="infobar"> 
      <p><img src="images/babu_01.jpg" alt="apnerve" align="left" />&larr; This is me.</p> 
      <p><strong>apnerve.com</strong> is built with valid <acronym title="hyper text mark-up language">HTML</acronym>4.01 and <acronym title="cascading style sheets">CSS</acronym>. It has full support for browser-based font resizing and is readable in all text browsers.<br /> 
      ~ <a href="http://www.apnerve.blogspot.com">apnerve</a>. </p> 
    </div> 
  </div> 
  <div id="footer"><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://validator.w3.org/check?uri=referer">HTML</a> | <a href="http://www.getfirefox.com">Get Firefox</a> | <a href="http://www.oswd.org">OSWD</a> <br /> 
    Copyright &copy; 2006 (your name). All rights reserved.<br />
    <!-- You may use this template and edit it as you want to it to be. But please leave the following code intact --> 
  Design by <a href="http://www.apnerve.blogspot.com">apn&euml;rve</a> |
    <a href="http://www.ehostinfo.com/">Web Hosting</a></div> 
</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.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.Menu bar with background image
76.Two level side menu bar
77.Left bar with news item
78.Continue read link