Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS On Deadline! Need Drop Down With Current Page State

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #32346
    grovesk
    Member

    Hi – I am wanting a menu similar to the one on A List Apartbut it needs to work with a drop down.

    Their menu has a background image that appears on the top on hover but also appears on the current page. (When you click on Topics, for example).

    I’ve got my menu bar working and have a hover state using a border rather than an image, but I can’t get the red bar to appear on on the current page.

    What am I doing wrong?

    Here’s the HTML

    Here’s My CSS

    .selected a:hover {
    color: #8B745A;
    border-top-width: medium;
    border-top-style: solid;
    border-top-color: #CC092F;
    text-decoration: none;
    }


    ul {
    font-family: 'DistrictLight' Arial, Verdana;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    }

    li ul { display: none; }

    /*Main bar*/
    ul li a {
    display: block;
    text-decoration: none;
    color: #CC092F;
    margin-left: 0px;
    white-space: nowrap;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 4px;
    margin-right: 20px;
    }

    ul li a:hover {
    background-color: #FFFFFF;
    }
    li:hover ul {
    display: block;
    position: absolute
    }

    li:hover li {
    float: none;
    font-size: 12px;
    }

    li:hover li a {
    color: #CC092F;
    background-color: #FFFFFF;
    }

    li:hover li a:hover {
    color: #FFFFFF;
    background-color: #CC092F;
    }

    li:hover a {
    background-color: #FFFFFF;
    }
    li:hover li a:hover {
    background-color: #CC092F;
    }
    #51444
    DogsGhost
    Member

    One of the more efficient ways to handle current navigation highlighting is to give each of your navigation items a unique class name. Then give each page a unique ID on the body element. Then CSS can control what each navigation item looks like based on that body ID.
    ex. #home .home, #about .about, #philosophy .philosophy, #approach .approach
    {color: #8B745A;
    border-top-width: medium;
    border-top-style: solid;
    border-top-color: #CC092F;
    text-decoration: none}

    #51427
    grovesk
    Member

    How do I give each page a unique id? Like this?

    #51428
    DogsGhost
    Member




    #51076
    grovesk
    Member

    Do you think it’s better to use an image in the background or is a border style ok in this case?

    #51078

    if you just want a simple red bar, border-top works fine, one less image for the page to load. Also I recommend adding an ‘invisible’ top-border (ie. the same color as the links button background) to your standard ul li a { } properties so when its hovered over and the top border becomes red, you don’t get any unintended text jumping, as the border is merely changing color rather than inserting itself and moving the anchor down.
    Hope that makes sense.

    Also, here’s some really handy shorthand for writing a border, just add the side suffixes (-top, etc) to target a specific side { border: size style color; }.
    Using your CSS it would be
    border-top: medium solid #CC092F;

    shorthand may take some getting used to, but in the long run I think it saves a lot of time.

    #50942
    grovesk
    Member

    That’s a really neat trick to add the white border behind the other one. No more text bouncing.

    #50867
    grovesk
    Member

    Hi – So I have the border on the active page working (Yay), but the border is showing up in the drop downs when you are on the active page. (See Example

    What do I need to fix?

    Here’s my current HTML

    I added this to my CSS



    #menu a:hover,
    .about #menu #about a,
    .services #menu #services a,
    .groups #menu #groups a,
    .partnerships #menu #partnerships a,
    .contact #menu #contact a,
    .current #menu #current a {
    color: #8B745A;
    border-top-width: medium;
    border-top-style: solid;
    border-top-color: #CC092F;
    text-decoration: none
    }

    Each of the active pages has had a body id added in the form of . I tried body id but that didn’t seem to work.

    #50835
    grovesk
    Member

    Here’s a link to the CSS if anyone wants to see the whole thing.

    CSS

    #50836

    In the bit of CSS you posted for #menu a:hover, .about #menu #about a, etc, adding a > sign before the a tags should do the trick, so it only targets direct children of the ids rather than all of the anchor tags inheriting it.



    #menu a:hover,
    .about #menu #about > a,
    .services #menu #services > a,
    .groups #menu #groups > a,
    .partnerships #menu #partnerships > a,
    .contact #menu #contact > a,
    .current #menu #current > a {
    color: #8B745A;
    border-top-width: medium;
    border-top-style: solid;
    border-top-color: #CC092F;
    text-decoration: none
    }

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.