SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to keep the "hilight" state in a "converted list/nav bar"?

    Hello,

    I made a horizontal navbar from a converted list, and it's working beautifully, if all I want to do is use it as a navbar, but if I try to keep one of the items "permanently" hilited w/ no link state, like you would if you were trying to show what section the user is in, the formatting goes all haywire! I tried to change the css rule to the li tag, instead of the li a tag, but that didn't work either...

    can anyone help me?

    below is the relevant css and html:
    css:

    ul.global_nav
    {
    padding: 0;
    margin:0;
    list-style-type: none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    float: left;
    width: 800px;
    color: #fff;
    background-color: #006d8b;
    }

    ul.global_nav li { display: inline; }

    ul.global_nav li a
    {
    float: left;
    width: 5em;
    color: #fff;
    background-color: #006d8b;
    padding: 0.2em 1em;
    text-decoration: none;
    border-right: 1px solid #fff;
    }

    ul.global_nav li a:hover
    {
    background-color:#CCFFCC;
    color: #006d8b;
    }

    html:
    <ul class="global_nav">
    <li><a href="about.htm">About Us</a></li>
    <li><a href="vidcaption.htm">Services</a></li>
    <li><a href="markets.htm">Markets</a></li>
    <li><a href="demos.htm">Demos</a></li>
    <li><a href="news.htm">News</a></li>
    </ul>

    question: how can I make this html work:
    <ul class="global_nav">
    <li><a href="about.htm">About Us</a></li>
    <li>Services</li>
    <li><a href="markets.htm">Markets</a></li>
    <li><a href="demos.htm">Demos</a></li>
    <li><a href="news.htm">News</a></li>
    </ul>

    and have the "Services" item have the background of the hover state?

    if you want to see it in context, here is the link:
    www.winian.us/ast/vidcaption.htm
    www.winian.us/ast/css/styles_services.css

    thanks for the help!
    ian

    ps. I'm not married to the li version of a horizontal nav bar, so if anyone has an easier way to do this, as long as I can easily set the "down" state of the navbar item (to indicate which section the user is in), that's all I care about!

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You wouldn't remove the link from the active page; instead add a 'curren't or 'active' ID or class to the relevant link and give it the same properties as your hover state so when you mouse over it, it doesn't change, but it's still an actual link.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello tyssen,

    thanks for the tip, but if you don't mind me asking, in the css I have, do I add the active class/ID to the li rule, the ul rule, or the li a rule?

    so would it be

    .active
    {
    background-color:#CCFFCC;
    color: #006d8b;
    }

    <li class="active"><a href="vidcaption.htm">Services</a></li>
    or

    .active a
    {
    background-color:#CCFFCC;
    color: #006d8b;
    }

    <li><a class="active" href="vidcaption.htm">Services</a></li>

    or something else completely?

    thanks so much for the help!
    ian

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I normally do: I have a footer div with a list of links:

    <div id="footerlinks">

    in the css I have

    /* sets current page state */
    #footerlinks .current a:link, #footerlinks .current a:visited, #footerlinks .current a:hover, #footerlinks .current a:active {
    color: #999999;
    text-decoration: none;
    background-color: transparent;
    }

    In the html, I apply the class to the link I want to show as 'current page'.

    <li class="current"><a href="aboutus.html">ABOUT US </a></li>

    I was just working on a page with the above, so I'll leave it to you to work it out for your situation

    Nadia

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DO remove the link from the active page.

    This is a basic usability issue that is often overlooked.
    I seem to remember reading a more in-depth explanation somewhere, but couldn't locate it quickly. Here is a brief summary (number ten):
    http://www.useit.com/alertbox/20031110.html

    I usualy put a class or id on the body of each top level section, and an id on the navigation link to each of those pages. I also leave the anchor, but remove the link (href) on the link of the page I'm on.

    Here's what the navigation would look like on the home page:
    Code:
    <body id="home"> ...snip...
    <div id="navigation">
    	<h2>Site Menu</h2>
    	<ul>
    		<li><a id="n1">home</a></li>
    		<li><a id="n2" href="/portfolio/">portfolio</a></li>
    		<li><a id="n3" href="/about/">about</a></li>
    		<li><a id="n4" href="/contact/">contact</a></li>
    	</ul>
    </div>
    Simplified style:
    Code:
    #navigation a {  background:#fff color:#000;  }
    #navigation a:hover, 
    #navigation a:focus,
    #navigation a:active,
    #home #n1,
    #port #n2,
    #about #n3,
    #contact #n4 {  background:#000;  color:#fff;  }
    It's a bit more coding to do than simply adding a single id or class to the active link, but I think it's worth it.

    You could also "fake it" with css. Though it's not the best way, at least it's a start. See here:
    http://www.themaninblue.com/writing/...ve/2004/11/19/

  6. #6
    SitePoint Enthusiast wildsue's Avatar
    Join Date
    Oct 2003
    Location
    Switzerland
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello!
    You could give each body tag and each menu-list-item an id
    (example: <body id="main"> ... and ... <ul class="global_nav">
    <li id="home"><a href="about.htm">About Us</a></li>)

    and than you could refer to this id's in this way:
    body#main #global_nav#home
    body#nextpage #global_nav#page1
    body#anotherpager #global_nav#page2 { background-color: #fff; /*or something else!*/}

    Try it out!
    Greetings ...

  7. #7
    SitePoint Enthusiast wildsue's Avatar
    Join Date
    Oct 2003
    Location
    Switzerland
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! I saw that Zachnefein had already the same idea for you... it seems to be a good way... ;-)

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zachnefein
    DO remove the link from the active page.

    This is a basic usability issue that is often overlooked.
    I seem to remember reading a more in-depth explanation somewhere, but couldn't locate it quickly. Here is a brief summary (number ten):
    http://www.useit.com/alertbox/20031110.html
    I can think of plenty of cases where removing the link would actually be detrimental, particularly in the cases of forums where people often look at the same page many times a day. Not everyone wants to (or knows how to use F5), so how else are they to refresh their page if you don't give 'em a link to the one they're already on?
    As for using an ID on the body, I think it should come down to how many links in your nav you have. If you have a few, it's probably the better option, but if you have lots, the code necessary to achieve the effect you want is going to be a lot greater than simply applying an active ID to the relevant link.

  9. #9
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello all!

    this forum rocks!

    Zachnefein, the one thing I'm not sure of is how to disable the link if the id (according to the code you provided) is defined as part of the <a> tag... is this related to the body tag?

    when I made a separate id for the <a> tags in the <li> tags, it worked beautifully, but of course the link was still active, so I moved the id to the <li> tag, so I could pull the <a> from the active page link, but that didn't work, and screwed up the formatting again, which led me to this forum!

    to all, actually I had another question: as you saw, I have a run-of-the-mill "converted list-navbar", so of course all the items are right next to each other, so how do I put a "home" link all the way to the right of the navbar, not next to the main navbar links? when I tried to put <span> tags within the <li> to override the ids for individual list items, it never works, and the formatting gets all screwed up again...

    sorry if this is more help than the usual forum poster needs, but I do appreciate it immensely!

    ian

  10. #10
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Zachnefein,

    never mind, I figured out what you meant!

    to all, thank you again for all your help... I love this forum, I've learned so much from all of you!

    ian


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
  •