Navigation Bar with scrollbar, difficult to explain

[k12onos]

hello guys, im building my new website, and when i was surfing the web i found a great navbar, its difficult to explain so i will give you the link, it's here :

http://www.absoluteanime.com/admin/mods.htm

see the navigation bar on the left?

can anybody tell me how to make a navigation bar like that?
i really need it the navbar is really great and will spice up things in our website

thank you before for your help guys

[Nile]

I don't know the highlights of the navigation bar you showed us, like if it was the toggle. But here's something to look at:
http://dynamicdrive.com/dynamicindex1/outbar2/index.htm
You can also take a look at this, but it only works in IE Only:
http://www.dynamicdrive.com/dynamici...tbar/index.htm

[k12onos]

did you notice that the navbar got a scroll bar?

so when we open the page there is two scroll bar, one for the navigation bar and one for the page, i want something like that, do you guys know how to do it?

but anyway thanks for the reply Nile

[Nile]

It's a fixed positioned div with an auto scroll, check these links below out, with the links below if you can't make one yourself. I'll be more then happy to make it for you.
http://www.w3schools.com/Css/pr_class_position.asp <<Look for 'fixed'
http://www.w3schools.com/Css/pr_pos_overflow.asp

[k12onos]

wow i think its too complicated for me lol, can you tell me how to do it?

and if possible i want a nav bar that appears just like in the link i gave you above :-P

[Nile]

Here's the code(I just made it):

<!--[if IE]>
<style type="text/css">
#navigation { padding-top: 10px; }
</style>
<![endif]-->
<style type="text/css">
body {
margin: 0;
}
#navigation {
position: fixed;
font-family: arial;
width: 190px;
height: 99%;
overflow: scroll;
background-color: #F1F1F1;
padding-left: 10px;
}
#navigation .link{
font-size: 13px;
color: #A00B0A;
font-weight: bold;
}
#navigation a:link, a:visited {
display: block;
font-size: 70%;
text-decoration: none;
color: #000;
}
#navigation a:hover {
text-decoration: underline;
}
#navigation hr {
margin-top: 15px;
color: #A00B0A;
}
#navigation p {
text-indent: 15px;
color: #A00B0A;
font-size: 10px;
}
</style>
<div id="navigation">
<h5 class="page">Home</h5>
<span class="link">Links</span>
<span class="links">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</span>
<hr />
<p>Lorem ipsum <b><i>dolor</i></b> sit amet, consectetuer adipiscing elit. Phasellus at metus. Nam ut pede et nisi elementum ultrices. Fusce ut neque. Nam fringilla semper purus. Morbi laoreet. Curabitur pulvinar. Integer commodo iaculis tellus. Nulla aliquet augue eu lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et nisi. Sed id erat et dolor pretium mattis.</p>
<p>
Duis condimentum interdum lectus. Nullam vestibulum, ligula quis molestie <u><b>pellentesque</b></u>, dui diam blandit nulla, vel vehicula est nisl quis tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero risus, laoreet ac, dictum at, pellentesque nec, magna. Praesent eget mi. Pellentesque lectus sem, molestie et, commodo at, placerat ut, nisl. Cras pulvinar leo posuere felis. Praesent tincidunt enim eget erat. In a leo vitae purus imperdiet consequat. Mauris elit ligula, mattis sodales, consectetuer at, accumsan a, nunc. Fusce tristique diam a odio. </p>
<p>
Aenean fermentum. Suspendisse commodo felis eget sem. Nunc elit. In sit amet quam quis massa fringilla semper. Duis ullamcorper tincidunt tellus. Nam sed ante sed eros gravida imperdiet. Pellentesque pulvinar ultrices ante. Donec adipiscing adipiscing quam. Nulla ac tortor quis elit tincidunt malesuada. In egestas est vel nunc. Donec auctor facilisis neque. Curabitur nec diam at eros gravida tempus. Phasellus tincidunt risus. Phasellus in sem a tellus dictum vulputate. Phasellus nunc. Integer pharetra. Maecenas ornare enim eu odio. Suspendisse consequat blandit tellus. Curabitur est ante, luctus id, tempor non, rhoncus ac, ipsum. </p>
</div>

The fixed position doesn't work in IE, but I'll try to fix that this afternoon.

[k12onos]

wow Nile it's really cool! really i love it!, one thing is i notice that this nav bar is above the content of the page right? because when i put it in some page it covers the left side of the page content, is it possible that it doesnt cover the left side of the page content? it's allright that the main page page width became much smaller,

sorry for asking so much Nile, i really appreaciate your help! Thank you again

[Nile]

Give the main body content padding-left: 200px;

[k12onos]

wow it works great! thanks again! , anyway i tested it on IE, and it works just fine, what do you mean by fixed position doesnt work in IE? because in firefox and IE it looks the same

[k12onos]

Nile, i need your help, when i put it on a test page it shows just fine but when i put it on the page i want to, it screws up with the page,

the css is kinda messed up, i tried changing all the css so it wont be the same with the forum css(i put the navbar on the side of the forum), but it's still messed up with the css, how can i work this out?