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 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    problems with CSS dropdown menu

    let me please start by saying that i'm in no way even remotely good at css, but i try...

    here is a link to what i'm working on:

    http://www.modnpop.com/dropdown/tester.html

    i started by downloading and modifying the suckerfish dropdown menu to use graphics rather than text. the dropdowns are working great! but i have a question...

    when using text buttons in suckerfish, you are able to change background color and text color in hover. i've tried figuring out a way to sub out a rollover "hover" image, but i just can't get it. any help on this?

    (in my example, i would sub out the image "HISTORY1.png" with "HISTORY2.png" on rollover)

    thanks so much for you time.
    Last edited by danllinehan; 03-08-2012 at 07:42 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hey there danllinehan,

    This is easily done by toggling display: none; and display: block; with the :hover pseudo class, which can be placed on parent elements. Make sure to follow these instructions carefully!

    1. Start by adding your second image below the first like so, note that I added class="image-1" and class="image-2," as well as class="switch-image" on the li:



    2. Next add in your css:

    Code:
    .nav .switch-image a {
       display: block;
    }
    
    .nav .switch-image .image-1 {
       display: block;
    }
    .nav .switch-image .image-2 {
       display: none;
    }
    
    .nav .switch-image:hover .image-1 {
       display: none !important;
    }
    .nav .switch-image:hover .image-2 {
       display: block !important;
    }
    Last edited by Sammy12; 03-09-2012 at 06:21 AM.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I AM GONNA DANCE AT YOUR WEDDING! that is such a simple solution that it even makes sense to ME! thank you thank you thank you!!!

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ERP. the rollover is not working in firefox... but works great in chrome, safari.

    internet explorer, though. sigh. i don't get it.

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hey there again danllinehan,

    The toggle display: block; display: none; should work for all browsers, but I'm going to give you a method used more commonly. I wanted to answer your question based on what you asked for, but I think I should have given you the best solution in this case:

    1. Delete both <img>s for HISTORY (let's start by fixing just one, later you can use this on all of the dropdown links)



    2. Add this code anywhere in your css

    Code:
    #nav-one ul {
       width: auto !important; /* overrides a previous css styling that set ul to width: 0; */
    }
    #nav-one .switch-image a {
        width: 100%;
        height: 23px;
    }
    3. Add class="nav-history" to the correct li



    4. Now instead of switching an entire image, we are just going to switch the background (which we are going to set to the <a> tag). Notice that we gave #nav-one .switch-image a { width: 100%; height: 23px; } (above), so that it will take up space on the page (without a width and height, the <a> will be width: 0; height: 0; - because nothing is inside the <a> tag, no text or images! backgrounds don't count as space!).

    Code:
    #nav-one .nav-history a {
        background: url('/dropdown/nav/HISTORY1.png') no-repeat center center;
    }
    #nav-one .nav-history:hover a {
        background-image: url('/dropdown/nav/HISTORY2.png') !important;
    }
    5. Now you will have to repeat those steps for each link. Take note that your image heights vary from 23-25, I set it to 23 in my css. I would go ahead and try to make them all a uniform height.


    All the best, Sammy12
    Last edited by Sammy12; 03-10-2012 at 06:20 PM.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks again for your time and help on this! and thanks for the heads-up on image heights (i really threw these images together quickly for this test run)... i've updated all images to have the same height (25px).

    unfortunately, after implementing the new changes, my entire drop down menu seems to not be working. i feel confident that i entered the new code in correctly. could it be that now i have too much/lots of extra code? something in here somewhere is confusing the browser?

    again, i thank you so much for your time in helping me! i'm learning by doing, just little-by-little.

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I see what I did wrong, I set the <a> to width: 100%, but if there's no content, then 100% is actually 0. The problem didn't occur for me, because I only did it for one link haha.

    Sorry about that, here's the fix:

    1. Look 2 posts up, where I set #nav-one ul { width: auto !important; } Delete that part in the css file.

    Now add in it's place:
    Code:
    #nav-one ul {
        width: 190px;
    }
    you see, an auto width would be correct if there was actually content "words or images" inside. But there are none since we are using backgrounds. Therefore we have to set the width.
    Last edited by Sammy12; 03-10-2012 at 07:33 PM.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    does this mean that all images will need to be the same width, as well? looks like it...

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    No they don't have to be.

    What you can do is set individual widths to the ul's

    1. Add classes



    2. Make the width for each one individual (it will override the #nav-one ul { width: 190px; } if you use !important; }. For your "cast" it would be:

    Code:
    .nav-one-cast ul {
       width: 160px !important;
    }
    because each one is 160px; (so instead of changing the image, change the width of the ul instead)
    Last edited by Sammy12; 03-10-2012 at 07:47 PM.

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    After you set individual widths, it is time to clean things up:

    1. Change center center to left top on all:
    Code:
    #nav-one .nav-history a {
        background: url('nav/HISTORY1.png') no-repeat left top;
    }
    2. Delete our previous method (it is interfering with our current)

    Code:
    #nav-one .switch-image a {
        width: 100%;
        height: 25px;
    }
    
    .nav .switch-image a {
       display: block;
    }
    
    .nav .switch-image .image-1 {
       display: block;
    }
    
    .nav .switch-image .image-2 {
       display: none;
    }
    
    .nav .switch-image:hover .image-1 {
       display: none !important;
    }
    
    .nav .switch-image:hover .image-2 {
       display: block !important;
    }
    3. And I would definitely recommend making the heights the same for all the images.

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh, man. i really screwed it up there for a minute! i got lost somewhere in one of the posts, i guess and just really started messing the whole thing up.

    i've reverted back to what was working (everywhere except firefox) and i'm gonna start over... on a copy of that page! hopefully i will manage to go back through your instructions and get it the second go-round...

    i thank you so much for all of your help and kindness!

    EDIT - i just started firefox back up again and had to do an update. i updated the browser and, um, well, it seems to be working now without a hitch! crazy!!! again, thank you so much for everything!
    Last edited by danllinehan; 03-11-2012 at 10:15 AM.


  •  

    Posting Permissions

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