Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Navigation Bar with scrollbar, difficult to explain

  1. #1
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default Navigation Bar with scrollbar, difficult to explain

    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

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    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
    Jeremy | jfein.net

  3. #3
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    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
    Jeremy | jfein.net

  5. #5
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Here's the code(I just made it):
    Code:
    <!--[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.
    Jeremy | jfein.net

  7. The Following User Says Thank You to Nile For This Useful Post:

    k12onos (07-03-2008)

  8. #7
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #8
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Give the main body content padding-left: 200px;
    Jeremy | jfein.net

  10. #9
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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

  11. #10
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •