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/dynamicindex1/outbar/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?

[Nile]

Can I see your test page?

[Nile]

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

In IE if you add content, the nav won't scroll. Anyways, here's the updated menu:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fixed Menus, CSS Fixed IE" />
<meta name="description" content="Fixed Menu - Tested in IE, FF, and Safari" />
<title>Fixed Menu - Tested in IE, FF, and Safari</title>
<style type="text/css">
body {
margin: 0;
height: 100%;
}
#content {
text-indent: 15px;
color: #B00B0B;
font-size: 14px;
padding-left: 210px;
padding-top: 100px;
}
#header {
color: #B00B0B;
font-size: 80px;
font-family: arial;
font-weight: bold;
text-align: center;
}
#navigation {
font-family: arial;
width: 190px;
height: 99%;
overflow: scroll;
background-color: #F1F1F1;
padding-left: 10px;
position: fixed;
}
#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;
}
#navigation p span {
text-indent: 0px;
overflow: scroll;
}
</style>
<!--[if IE]>
<style type="text/css">
#navigation {
padding-top: 10px;
position:absolute;
left: 0px;
top:expression(body.scrollTop+"px");
}
#content {
padding-left: 200px;
}
</style>
<![endif]-->
</head>
<body>
<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>This page was tested in <b>FireFox 3</b>, Internet Explorer 7, and Safari 3.1. It's a simple menu with fixed positioning, this means that when the page scrolls down, so does the menu. I managed to fix the fixed positioning in IE using the script below. <br />
<span style="display: block; width: 170px; height: 56px; background-color: lightyellow;"><code>
position:absolute;<br />
left: 0px;<br />
top:expression(body.scrollTop+"px");

</code></span></p>
</div>
<div id="header">HomePage</div>
<div id="content"><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 <b>pellentesque</b>, 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><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 <b>pellentesque</b>, 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><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 <b>pellentesque</b>, 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>
</body>
</html>

FF: It works perfectly fine
IE: The fixed position was hard, but I got it. :D It jerks though, it will be just fine :).
Here's an example of the menu full page(It's almost valid :)): http://niler.net/examples/menuFixed.html

[k12onos]

the change between the first code and the second code was only this right?


<!--[if IE]>
<style type="text/css">
#navigation {
padding-top: 10px;
position:absolute;
left: 0px;
top:expression(body.scrollTop+"px");
}
#content {
padding-left: 200px;
}
</style>
<![endif]-->


so could i just change the <!--[if IE]> code to make it compatible with IE ?

anyway here is the test page:

the one that i say that the css messed up :

http://www.rumahblogger.com/folder/this.htm

the page was generated from my live website , saved to my computer, and then i added the navbar code, but when i upload the image wont show up, so if you want to see it complete with the image you can download the page here :

http://www.rumahblogger.com/folder/this.rar (sorry for the trouble)

and the navbar should be like this if its not messed up with any css :


http://www.rumahblogger.com/folder/like_this.html

can you tell me how to solve this please?

thanks in advance :)

[Nile]

I don't see the differences.



the change between the first code and the second code was only this right?


<!--[if IE]>
<style type="text/css">
#navigation {
padding-top: 10px;
position:absolute;
left: 0px;
top:expression(body.scrollTop+"px");
}
#content {
padding-left: 200px;
}
</style>
<![endif]-->


And the divs at the bottom.
I've made it compatible with IE already, witch is why I have the ifs.
I hope you understand it more now.
Nile :)

[k12onos]

can you take a look at the .rar file? when you open the page there the navbar will look okay but behind the links there are some kind of background, and the navbar title were not in the right place,

you can see what i mean in this screenshot :

http://img122.imageshack.us/img122/18/screenshot1ii7.th.gif (http://img122.imageshack.us/my.php?image=screenshot1ii7.gif)

could you tell me how to make it the same like in here :


http://www.rumahblogger.com/folder/like_this.html

thanks again nile you have helped me a lot :)

[Nile]

Can you please use zip? I don't use rar.
And what browser are you using?

[k12onos]

sure, here it is :


http://www.rumahblogger.com/folder/this.zip

the screenshot was taken when im using firefox, but in firefox and IE they showed the same thing..

[Nile]

There's nothing in the zip...
But to fix this, find:


#navigation a:link, a:visited {
display: block;
font-size: 70%;
text-decoration: none;
color: #000;
}

And change it to:


#navigation a:link, a:visited {
display: block;
font-size: 70%;
text-decoration: none;
color: #000;
background-color: transparent;
}

[molendijk]

IE: The fixed position was hard, but I got it. :D It jerks though, it will be just fine :).

Use body{background: url(foo) fixed} to get rid of the jerkyness.
===
Arie Molendijk.

[Nile]

It doesn't really matter.