Forums

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

Home Forums CSS Drop Down Menu with CSS Sprite Navigation

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #36660
    kennyk3
    Member

    I need to put a drop down menu on a navigation that’s based on one image (CSS Sprite). I’ve been trying for a few hours and I just can’t figure it out. Here’s the HTML:



    I need the drop down to go under the “About” link. I realize it had to go in the ‘li’ tag, but I can’t get the CSS right. Here’s the current CSS for this sprite:

    ul#nav {
    margin:75px 0 0 0;
    padding:0;
    list-style:none;
    clear: both;
    }

    #nav li {
    overflow:hidden;
    text-indent:-9999px;
    display:inline;
    float:left;
    width: 398px;
    }

    #nav li a {
    background:url(../images/nav-sprite.jpg) no-repeat;
    width: 398px;
    height: 40px;
    display:block;
    }


    #nav li.nav-1 {width:85px; height:40px;}
    #nav li.nav-1 a:hover{background-position:0px -40px;}

    #nav li.nav-2 {width:80px; height:40px;}
    #nav li.nav-2 a:hover{background-position:-85px -40px;}
    #nav li.nav-2 a{background-position:-85px 0px;}

    #nav li.nav-3 {width:82px; height:40px;}
    #nav li.nav-3 a:hover{background-position:-165px -40px;}
    #nav li.nav-3 a{background-position:-165px 0px;}

    #nav li.nav-4 {width:97px; height:40px;}
    #nav li.nav-4 a:hover{background-position:-247px -40px;}
    #nav li.nav-4 a{background-position:-247px 0px;}

    #nav li.nav-5 {width:54px; height:40px;}
    #nav li.nav-5 a:hover{background-position:-344px -40px;}
    #nav li.nav-5 a{background-position:-344px 0px;}

    Any help would be greatly appreciated!

    #96738
    kennyk3
    Member

    Would love some help with this. Still can’t figure it out. Here’s an exact example:

    http://jsfiddle.net/kennyk3/TTDNp/

    #96740
    Paulie_D
    Member

    You haven’t defined any CSS for the sub menu items and the sprite doesn’t include them either.

    #96741
    Paulie_D
    Member

    Is there a reason for the sprite…doesn’t look as though there is anything there already that can’t be achieved via ordinary CSS3?

    #96742
    kennyk3
    Member

    @Paulie_D

    That’s what I need help with. I’ve tried a lot of different CSS and just can’t get it to work.

    Reason for the sprite… I know how do use them and they work well. I don’t know much about CSS3.

    #96744
    Paulie_D
    Member

    Firstly, you’d have to re-do the sprite with all of the sub-navigation and go from there.

    You might also want to look at this:https://css-tricks.com/css-sprites-workflow/

    I know sprites are the ‘in’ think right now but they are incredibly inflexible when it comes to scaling or updating your nav.

    From what I can see, the only thing the sprite is doing now is adding a text-shadow which is incredibly simple. Obviously, that’s an issue for older browsers but a simple fallback would suffice there.

    #96746
    kennyk3
    Member

    Yeah, I re-read your first post that said “the sprite doesn’t include them” and it clicked. So I’m gonna add those images to the sprite and fiddle with the positioning.

    I understand there inflexibility. I do enjoy creating them though and like how they only use one image. I do want to move away from them, but I’d like to keep them on this particular site.

    Thank you for your input.

    #96748
    Paulie_D
    Member

    Here’s a sample dropdown (without sprites) that might help when combined with the workflow that Chris suggested: http://tinkerbin.com/QBvwRCKA

    #96754
    kennyk3
    Member

    I have given up on the CSS sprite drop down. I just spent too much time on it. And, it’ looks about the same with the Arial font.

    But, thanks for the help.

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