Fixed left menu bar : Menu « CSS Controls « HTML / CSS






Fixed left menu bar

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>andreas07</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style rel="stylesheet" type="text/css">
/* andreas07 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work.

Version: 1.1, November 28, 2005 */
/**************** Page and tag styles ****************/
body {
  margin: 0;
  padding: 0;
  color: #303030;
  background: #fafafa url(andreas07-img/bodybg.gif) top left repeat-y;
  font: 76% Verdana, Tahoma, sans-serif;
}

ul {
  list-style: circle;
  margin: 15px 0 20px 0;
  font-size: 0.9em;
}

li {
  margin: 0 0 8px 25px;
}

a {
  color: #d85d5d;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #505050;
  text-decoration: underline;
}

img {
  float: left;
  margin: 0 15px 15px 0;
  padding: 1px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
}

a img {
  border-color: #d85d5d;
}

a img:hover {
  background: #d85d5d;
  border-color: #d85d5d;
}

/**************** Sidebar area styles ****************/
#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  overflow: auto;
  background: #e0e0e0 url(andreas07-img/sidebarbg.gif) top right repeat-y;
  text-align: right;
}

body>#sidebar {
  position: fixed;
}

#sidebar h1 {
  margin: 20px 18px 0 5px;
  color: #d85d5d;
  font-size: 1.6em;
  letter-spacing: -2px;
  text-align: right;
}

#sidebar h2,#sidebar h3 {
  margin: 0 20px 18px 5px;
  color: #808080;
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: -1px;
  text-align: right;
}

#sidebar h3 {
  margin: 20px 18px 4px 5px;
  color: #606060;
}

#sidebar  p {
  margin: 0 20px 18px 5px;
  color: #606060;
  font-size: 0.8em;
}

#sidebar a {
  color: #808080
}

/**************** Navigation menu styles ****************/
#menu a {
  display: block;
  width: 202px;
  padding: 5px 18px 5px 0;
  color: #606060;
  background: #e0e0e0 url(andreas07-img/sidebarbg.gif) top right repeat-y;
  font-size: 1.8em;
  font-weight: normal;
  text-decoration: none;
  letter-spacing: -2px;
}

#menu a:hover {
  color: #303030;
  background: #f0f0f0 url(andreas07-img/sidebarbg.gif) top right repeat-y;
}

#menu a.active {
  padding: 5px 18px 5px 0;
  background: #fafafa;
  border-top: 2px solid #c0c0c0;
  border-bottom: 2px solid #c0c0c0;
}

#menu a.active:hover {
  color: #505050;
  background: #fafafa;
}

/**************** Content area styles ****************/
#content {
  width: 520px;
  margin: 0 0 0 240px;
  padding: 20px 0;
  background: #fafafa;
}

#content p {
  margin: 0 0 20px 0;
  line-height: 1.5em;
}

#content h1 {
  margin: 0;
  color: #d85d5d;
  font-size: 4em;
  letter-spacing: -5px;
  text-align: center;
}

#content h2 {
  margin: 0;
  color: #808080;
  font-weight: normal;
  font-size: 2.5em;
  letter-spacing: -2px;
  text-align: center;
}

#content h3 {
  clear: both;
  margin: 30px 0 10px 0;
  color: #d85d5d;
  font-weight: normal;
  font-size: 2em;
  letter-spacing: -2px;
}

</style>

</head>
<body>
<div id="sidebar">
  <h1>your website title</h1>
  <h2>place for your slogan</h2>
  <div id="menu"> <a href="">Home</a> <a class="active" href="">Current page</a> <a href="">Another</a> <a href="">Example</a> <a href="">Showcase</a> <a href="">Links</a> <a href="">Contact</a> </div>
  <h3>Version info:</h3>
  <p>v1.1 (Nov 28, 2005)</p>
</div>
<div id="content">
  <h1>andreas07</h1>
  <h2>The Simple Solution</h2>
  <h3>Andreas presents: 07!</h3>
  <p>Hello and thank you for your interest in this template! Before you jump to any conclusions about it, please me explain the idea behind it.</p>
  <img src="andreas07-img/example.jpg" width="512" height="160" alt="image example" />
  <p>First of all, this design was made by request from a friend who holding html/css classes for beginners. He asked me to create a design that was "so simple that even [his] grandmother would be able to use it", that he could use as an example in his classes. I couldn't resist a challenge like that!</p>
  <a href=""><img src="andreas07-img/example-small.png" width="128" height="128" alt="image link example" /></a>
  <p>There were some specific requests for the design, to make sure that it would work with the way my friend teaches. The content had to be separated from the presentation, and every part of the design had to be made in way that would be easy to understand - and learn from. No advanced tricks, and minimal use of IDs or .classes in the stylesheet. A fixed position site menu and some neutral images was also asked for.</p>
  <h3>so, how did I do it?</h3>
  <p>The easiest way to see my approach on the challenge is to view the code. Download the template and play with it for a while, and you will hopefully see that this every part of the template is created in an easy and effective way. For those of you who want some more information, I will try to explain how this design was built. Here are some short facts:</p>
  <ul>
    <li>The content is fully separated from the presentation. No inline styling has been used.</li>
    <li>Valid XHTML 1.1 and CSS2. Section 508 OK and AA-rated with the WCAG 1.0.</li>
    <li>Number of .classes: 0. Number of #id's: 3 (#sidebar, #menu and #content).</li>
    <li>Number of styled tags: 10 (html, body, ul, li, a, img, h1, h2, h3 and p).</li>
    <li>Two small images (total size: 142 bytes) have been used to improve the design, but the template works just as good without them.</li>
    <li>Two content image examples (total size: 9.2 kb) have also been included.</li>
    <li>The sidebar has fixed positioning to keep it in place when the rest of page scrolls.</li>
  </ul>
  <h3>and a few notes:</h3>
  <p>The example images are all made by myself using one of my own photos, and you have my full permission to use those images in any way you want to. However, I recommend that you replace them with something of your own. The photo shows a violet flower, by the way...</p>
  <p>To make the fixed positioning of the sidebar work with Internet Explorer, a conditional comment and an extra CSS file has been used. I would normally not do that, but the fixed sidebar was requested and I don't know about any better way to make it work without adding scripts (which is not an option). If you know any better way, please let me know!</p>
  <h3>open source web design</h3>
  <p>This template is released as an open source web design, which means that you are free to use it in any way you want to - and edit it in any way you want to. I kindly ask that you leave the "Designed by Andreas Viklund" text in the footer, because that would be a nice gesture to me - and I would appreciate it very much. But there are no obligations so if you really want to remove it - just do it.</p>
  <p>However, if you remove the credits and use this design for commercial purposes, please consider making a symbolic donation through the PayPal link on my website. And feel free to send me an e-mail with a link to the site where you have used the design, it is both fun and inspiring to see how my work is used and what changes have been made...</p>
  <p><strong>Good luck with your new website!</strong></p>
  <h3>site info</h3>
  <p>&copy; 2005-2006 Your Name. Design by <a href="http://andreasviklund.com">Andreas Viklund</a>.</p>
</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.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