Scrollable section in side menu bar

  
<!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>HINT of BLUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body { 
margin : 0;
padding : 0;
text-align : center;
font : 73% verdana, tahoma, "Trebuchet MS", arial, sans-serif;
background : #fff url(55_hint_of_blue-images/bg.gif) repeat-y top center;
color : #666;
} 
      /*WRAP*/
#box { 
position : relative;
width : 782px;
margin-right : auto;
margin-left : auto;
text-align : left;
padding : 0px;
margin-top : 0;
}
      /*TITLE BAR*/
#title { 
width : 760px;
margin : 0 0 0 11px;
padding : 0;
height : 30px;
background : #fff;
color : #000;
} 
#title h1 { 
font : 100% georgia, tahoma, verdana, arial, sans-serif;
text-align : right;
letter-spacing : 3px;
margin : 0 10px 0 11px;
padding-top : 10px;
background : inherit;
color : #000;
} 
      /*TOP BANNER*/
#header { 
width : 760px;
height : 150px;
margin : 0 0 20px 11px;
padding : 0 0 0 0;
background : #fff url(55_hint_of_blue-images/header.jpg);
color : #000;
} 
#header h1 { 
font : 140% georgia, tahoma, verdana, arial, sans-serif;
text-align : left;
letter-spacing : 5px;
margin : 0 10px 0 35px;
padding : 10px 0 0 0;
background : transparent;
color : #4A83BA;
} 
      /*TOP NAVIGATION*/
.container { 
width : 760px;
padding-top : 10px;
margin-left : 11px;
}
#navCircle { 
margin : 0;
padding : 0 0 20px 10px;
border-bottom : 1px solid #eee;
} 
#navCircle li { 
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
} 
#navCircle a:link, #navCircle a:visited { 
background : #fff;
float : left;
line-height : 14px;
font-family : georgia, tahoma, verdana, arial, sans-serif;
font-weight : normal;
padding : 0 20px 6px 12px;
text-decoration : none;
color : #4a82ba;
} 
#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover { 
padding-bottom : 6px;
color : #000;
background : transparent url(55_hint_of_blue-images/pointer.gif) no-repeat bottom center;
} 
      /*MAIN CONTENT*/
#main { 
float : left;
width : 532px;
padding : 1px;
margin-top : 10px;
line-height : 1.8em;
} 
#main h1 { 
margin : 10px 30px 0 20px;
padding : 3px;
text-align : left;
letter-spacing : 3px;
font : 150% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #000;
} 
      /*SIDEBAR*/
#sidebar { 
width : 200px;
margin : 10px 0 0 540px;
padding-left : 10px;
border-left : 1px solid #eee;
line-height : 1.8em;
} 
#sidebar h1 { padding : 10px;
margin : 0;
font : 100% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #aaa;
} 
.sideheader { 
margin-bottom : 20px;
text-align : center;
letter-spacing : 5px;
font : 140% georgia, tahoma, verdana, arial, sans-serif;
padding : 3px 0;
color : #fff;
background : #000 url(55_hint_of_blue-images/sideheader.jpg);
} 
      /*SIDE MENU*/
#sidenav {
margin : 0;
padding : 0;
list-style-type : none;
font : 100% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #c86000;
} 
#sidenav a { 
display : block;
width : 90%;
margin : 15px;
padding-left : 25px;
text-align : left;
text-decoration : none;
background : transparent url(55_hint_of_blue-images/active.gif) no-repeat left center;
color : #aaa;
} 
#sidenav a#current, #sidenav a:hover { 
text-decoration : none;
background : transparent url(55_hint_of_blue-images/hover.gif) no-repeat left center;
color : #4a83ba;
} 
      /*FOOTER*/ 
#footer { 
margin : 40px 0 0 0;
padding : 0;
border-top : 1px solid #ccc;
font-size : 0.8em;
text-align : center;
background : inherit;
color : #aaa;
} 
#footer a:link, #footer a:visited { 
background : inherit;
color : #4a82ba;
} 
#footer a:hover { 
border-bottom : 1px solid #000;
color : #000;
}
      /*CLASS*/
.news { 
font-size : 1em;
background : inherit;
color : #666;
}
.myborder {
float: left; 
border : 1px solid #aaa;
padding : 10px;
margin: 10px;
} 
      /*TYPOGRAPHY*/
p { 
padding-left : 20px;
padding-right : 15px;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
} 
      /*SCROLLBAR*/ 
div.scroll { 
margin : 5px 0 40px 5px;
height : 15em;
width : 170px;
overflow : auto;
border : 0px solid #aaa;
padding : 0.5em;
background : #fff;
color : #666;
} 
      /*LINKS*/ 
a img { 
border : 0;
} 
a:link, a:visited { 
background : inherit;
color : #4a82ba;
text-decoration : none;
} 
a:hover { 
background : inherit;
text-decoration : none;
color : #000;
}

</style>


</head>
<body>
<div id="box">
  <div id="title">
    <h1><a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a></h1>
  </div>
  <div id="header">
    <h1>www.COMPANY NAME.net</h1>
  </div>
  <div class="container">
    <ul id="navCircle">
      <li><a class="active" href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Products</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
  <div id="main">
    <h1>Welcome to <span style="font-weight:bold; color:#4A82BA;">Hint of Blue</span> Template</h1>
    <blockquote> This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. It will work in browser widths of 800x600, 1024x768 &amp; 1280x1064.<br />
      For more FREE CSS templates visit <a href="http://www.mitchinson.net">my website</a>.</blockquote>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat. Mauris et pede eget elit congue dictum. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus. </p>
    <h1>About Our Company</h1>
    <p><img class="myborder" src="55_hint_of_blue-images/sq.gif" alt="icon"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat.</p>
  </div>
  <div id="sidebar">
    <h2 class="sideheader">Links</h2>
    <div id="navcontainer">
      <ul id="sidenav">
        <li><a href="http://www.free-css.com/">Snapp Happy</a></li>
        <li><a href="http://www.free-css.com/">TODC</a></li>
        <li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
        <li><a href="http://www.free-css.com/">James Koster</a> </li>
        <li><a href="http://www.free-css.com/">CSS play</a></li>
        <li><a href="http://www.free-css.com/">Listamatic </a> </li>
      </ul>
    </div>
    <h2 class="sideheader">News</h2>
    <div class="scroll">
      <h1>April 09 2007</h1>
      <p class="news">Use this space as a mini weblog maybe .....</p>
      <h1>April 08 2007</h1>
      <p class="news">.... or for news &amp; updates.</p>
      <h1>April 07 2007</h1>
      <p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. </p>
    </div>
    <h2 class="sideheader">Information</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat.</p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
    This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</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.	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

Scrollable section in side menu bar : Menu « CSS Controls « HTML / CSS

Related examples in the same category