SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    un hilight highlighted tab

    Hi all,
    I have list for a menu and when the page is loaded I want one link that is highlighted (has a default description div).
    Code:
    <ul class="sub-menu">
    	<li class="active">link1</li>
    	<li>link2</li>
    	<li>link3</li>
    	<li>link4</li>
    </ul>
    in the css
    Code:
    .sub-menu li:hover > a, .sub-menu li.active > a {
        background-color: red;
    }
    What I want is for the link1 to have a background of default white when hovering over the other links.
    This will always be the first li element (first-child, tried that also).

    Thanks,
    Loren
    What I lack in acuracy I make up for in misteaks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Can you say a bit more about what you want? I'm assuming that the .active styles are working, but that if a link colored red because of the .active class, you want it to change to white while any of the other links are being hovered?

    I also don't understand why you say this will always be the first LI. Won't Link3 be highlighted red on some pages, for example?

  3. #3
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @ Ralph, a picture is worth a thousand words,

    http://wlmark.com/z-presto/z-menu.php

    Hover over models and you will see where I am going with this. My client wants to replicate the site http://cruisersyachts.com/ but I personally can't just lift their code and styles.

    If you hover over Company, you will see what I want. I just can't figure it out.
    Thanks.
    What I lack in acuracy I make up for in misteaks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    They are using some jQuery to do that (stored in the global.js file):

    Code:
    $('.menu-main .menu-models > li').mouseover(function() {
            $('.menu-models .modal-dropdown').hide();
            $(this).find('.modal-dropdown').show();
        });
        
        $('.menu-main .menu-innovation > li').mouseover(function() {
            $('.active').removeClass('active');
            $('.menu-innovation .modal-dropdown').hide();
            $(this).addClass('active');
            $(this).find('.modal-dropdown').show();
        });

  5. #5
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You are brilliant. I suspected a jQuery solution and you nailed it.
    Thank you so much. I have not even looked at the jQuery files, only the CSS part.
    You rock. Thanks.
    (I had no idea about .removeClass and makes perfect sense. I was hoping for a CSS solution but this absolutely works for me.)
    What I lack in acuracy I make up for in misteaks

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad that helps. Have you tried it out? I'm not sure if it's as simple as just cutting and pasting, but let us know if it's not working out.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    We could avoid JQ here by setting a CSS override.
    .sub-menu li, .sub-menu:hover li{ normal styles}
    .sub-menu .active, li.active:hover, .sub-menu li:hover { active styles}

  8. #8
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @Ralph, got it working by just,
    Code:
        $('.main .sub-menu > li').mouseover(function() {
            $('.active').removeClass('active');
        });
    This works great, I updated http://wlmark.com/z-presto/z-menu.php so you can see it in action.
    Once removeClass is invoked I cant seem to add addClass.
    This is what I have tried (along with many variations).
    Code:
        $('.main .sub-menu > li').mouseout(function() {
            $('.active').addClass('active');
        });
    // and / or
        $('.main > li').mouseover(function() {
            $('.active').addClass('active');
        });
    If you hover over models and then over company you will see that the first link is no longer hi lighted.
    (I also noticed that the upper left rounded corner disappears but I know how to deal with that)

    @dresden_phoenix, I could not get the over ride going, I kind of understand the concept and that's what I originally was trying to accomplish.
    What I lack in acuracy I make up for in misteaks

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I know nothing about jQuery, I'm afraid, so I can only tinker in the dark. This is probably really inefficient, but seems to do the job:

    Code:
    $('.main .sub-menu > li:first-child').addClass('active');
    
    $('.main .sub-menu > li').mouseover(function() {
        $('.active').removeClass('active');
    });
    
    $('.main .sub-menu > li').mouseout(function() {
        $('.main .sub-menu > li:first-child').addClass('active');
    });

  10. #10
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ralph, you saved the day. I know very little about jQuery but can now glimpse some of it's power.
    I added one little bit to your code because as soon as you moused over the content, the .sub-menu > li a was moused out.
    This is my complete block,
    Code:
    $('.main .sub-menu > li:first-child a').addClass('active');
    
    $('.main .sub-menu > li  a').mouseover(function() {
        $('.active').removeClass('active');
    });
    
    $('.main .sub-menu > li  .modall-dropdown').mouseover(function() {
        $('.active').removeClass('active');
    });
    
    $('.main .sub-menu > li').mouseout(function() {
        $('.main .sub-menu > li:first-child').addClass('active');
    });
    You can visit the link I previously posted to see it in action.

    I really do appreciate your help and now I have the ultimate menu.
    Sorry about the delays in my replies but am busy incorporating this into a CMS I designed.
    The menu will be built on the fly from info from the database. Now that I have the basics I can port it into my PHP code.
    Once again, many thanks.
    Loren.
    What I lack in acuracy I make up for in misteaks

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You're welcome, Loren. There's no problem with the timing of your replies. Thanks for the feedback.

    It's always nice to find a solution for yourself, so well done for finding a way to refine it.


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
  •