Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Navigation bar that doesn't require it's code on every page, a reference perhaps?

    Hello,

    I was looking for help creating a navigation bar that follows you without requiring the block of code in a div.

    My website's navigation bar frequently changes, so I want the nav bar in my CSS or something that I only have to include once. I will continually change the nav bar and adding/changing the images involved seems like a huge pain, since there's so many headings and subheadings.

    (I currently have 8 headings in the nav bar composed of extremely specific sized images (92 width, 146 width etc), each with ~5 sub pages inside. To change the nav bar daily (as I may need to do) that's 40 pages of nav bar div to change)

    I know this is possible, but here's another question- is it possible to do this and still have a blunt indication or even a different image for the link you're currently on?
    (Like, you're in a heading and it is bold, underlined & a different color (using images))

    I heard it might be called "java include" but I'm trying to do an html version.

    Thanks in advance, I really need help!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 308 Times in 307 Posts
    Quote Originally Posted by Mike Walker View Post
    I heard it might be called "java include" but I'm trying to do an html version.
    You were good just up to the end. There is no way to do this just with html. You can do this with server side languages ("PHP Include" or "SSI" would be good searches), or you can do this with JavaScript, but not just with html.

    Dave

  • Users who have thanked tracknut for this post:

    Mike Walker (07-27-2011)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Okay thanks! Using your advice and google I came across

    http://webdesign.about.com/od/ssi/ht...includehtm.htm

    Which is specifically what I need!

    Now I need to know, is there a way that the include would know which tab it is on, allowing me to highlight in a way?

    Like, my headers are "People" "Products"
    and you're in "Products" looking at the subcategories, I want the Products button (looks like a square feathered button) to be decompressed.

    How would I go about doing that?

    Also, my host is GoDaddy, I believe they allow SSI
    Last edited by Mike Walker; 07-26-2011 at 09:59 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 308 Times in 307 Posts
    I don't typically do my navigation this way, but off the top of my head you could distinguish the nav items with css. Like this, for example:
    Code:
    #nav li {color:black}
    #about #nav li {color:red}
    #contact #nav li {color:red}
    And your about, contact, etc pages would start out like:
    Code:
    <body id="about">
    Then in the nav code, something like:
    Code:
    <ul id="nav">
    <li><a href="about.shtml">About</a></li>
    <li><a href="contact.shtml">Contact</a></li>
    </ul>
    I haven't tested that, and there may be better ways, but hopefully you'll get the idea.

    Dave

  • Users who have thanked tracknut for this post:

    Mike Walker (07-27-2011)

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I'm still attempting to find a good guide on google,

    I had trouble understanding at first, but I kind of get it, the css class would change thus showing the different color background.

    Can I change a Included element after it's been included?

    Like, have a div at the top that simply has the changed image, and mark it !important (or whatever has that effect for divs)
    Last edited by Mike Walker; 07-26-2011 at 10:27 PM.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 308 Times in 307 Posts
    Spend some time with CSS, that may help.

    You can't "change an included element", but you can certainly style an element that's in the included file, just as I've shown above. For example an included <div> element might have a different background-image (e.g. based on the existence of #about, #contact, etc as I've done above).

    Dave

  • Users who have thanked tracknut for this post:

    Mike Walker (07-27-2011)

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Well I thank you very much for the help, but I'm going to need to change an image to a different one. All the links are images...

    Plus, I'd need a div-per-link which would be difficult, no?

    Maybe I could disable anything inside the div and then make the background image the "pressed" link...

    I wonder if that would work out well...

    Possible to disable images in CSS?

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 308 Times in 307 Posts
    Yep, "display:none" will hide whatever object it's attached to. So the image could be in a <div> that has display:none until it's being hovered over, for example.

    Dave


  •  

    Posting Permissions

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