SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get hover to stay when mouse goes to submenu

    Welcome to K&M Medical Inc!

    Check out the poly link:

    When you hover the submenu drops down and the arrow next to Poly turns down, however, when you move your mouse to select a link from the submenu the arrow tuns back up because you are no longer hovering over the poly link?

    Any ideas?

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add to a.poly:hover list another entry: a.poly.clicked. Then you in js where you are showing/hiding menu, toggle class "clicked" for that link.

    So css changes from
    Code:
    #nav a.poly:hover, #nav a.poly:focus{background:url(site_images/km_sprite.png) -397px -30px no-repeat;}
    to
    Code:
    #nav a.poly:hover, #nav a.poly.clicked, #nav a.poly:focus{background:url(site_images/km_sprite.png) -397px -30px no-repeat;}
    and in drop.js before this code
    Code:
        $(this)
    	  .find('ul') /*find all the children ul contained and display*/
    add this
    Code:
        $('#nav a.poly').toggleClass('clicked');
    and the same change in similar code few lines below it.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @cyberalien thanks for the reply,

    I added this #nav a.poly.clicked (I'm assuming it's suppose to be #nav a.poly:clicked with a semicolon instead of a period).

    That's not a pseudo class is it? I tried it and it didn't work. It actually disabled the hover for poly.

    and the same change in similar code few lines below it.
    Was I suppose to add some more code to the drop.js then what you pointed out? Thanks!

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh Ok I see what you're saying, add the class="clicked" to my HTML nav code.

    So the problem now is, that the "clicked" toggles on and off every time I hover over a new lin, even if it is not a submenu link.

  5. #5
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In first entry replace toggleClass with addClass, on second entry replace it with removeClass

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You can do this with css alone quite easily.

    Code:
    #nav li:hover a{
        background-image: url("site_images/km_sprite.png");
        background-repeat:no-repeat;
        background-position:-397px -30px 
    }
    #nav li:hover li a{background-image:none}

  7. #7
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CyberAlien View Post
    In first entry replace toggleClass with addClass, on second entry replace it with removeClass
    This is what my jquery looks like
    Code:
    $(document).ready(function(){
      $('#nav li ul').css({       /*overrides .CSS and hides submenus*/
        display: "none",           
        left: "auto"
      });
      $('#nav li').hoverIntent(function() { /*plugin smooths everything out compared to just using hover*/
        $('#nav a.poly').addClass('clicked');
        $(this)
    	  .find('ul') /*find all the children ul contained and display*/
          .stop(true, true) /* stops other animations from queing up if mouse moves to fast*/
          .slideDown('slow');
      },function() {
    $('#nav a.poly').removeClass('clicked');
        $(this)
          .find('ul')
          .stop(true,true)
    	.slideUp('slow');
      });
    });
    My CSS

    Code:
    #nav a.poly:hover, #nav a.poly.clicked, #nav a.poly:focus{
    background:url(site_images/km_sprite.png) -397px -30px no-repeat;}
    and my HTML

    Code:
    	            <li><a class="poly" class="clicked" href="#.html"><span>Polysomnography</span></a>
    					<ul class="sub">
    						<li><a href="seminars.html">Seminars</a></li>
    						<li><a href="event.html">Host Your Own Event</a></li>						
    						<li><a href="products.html">Educational Products</a></li>
    						<!-- <li><a href="#">Consultation Services</a></li> -->
    					</ul>
    Not sure why it's still not working.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    What was wrong with the css solution

  9. #9
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    What was wrong with the css solution

    Oh I just tried it! Nice Paul!

    Could you explain a little what that did, I'm stil new to CSS.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bades View Post
    Oh I just tried it! Nice Paul!

    Could you explain a little what that did, I'm stil new to CSS.
    Yes sure.

    The trick is to change the arrow on the anchor when the list is hovered and not when the anchor is hovered. (#nav li:hover a{})

    i.e.

    Code:
    #nav li:hover a{     background-image: url("site_images/km_sprite.png");     background-repeat:no-repeat;     background-position:-397px -30px  }
    This means that while the list is hovered all anchors will have a background image applied and that image will remain as long as the list is hovered (which is exactly what's needed because it's the hovering on the list that makes the ul appear also).

    As this rule would affect all anchors in the nested list also we therefore need one more rule to turn the images off on the nested list.
    Code:
    #nav li:hover li a{background-image:none}
    In your original example you were turning the arrow on with a:hover which means that as soon as you moved off the anchor the image disappeared.

    My example makes the arrow image dependent on the list being hovered which makes it persistent all the time the list is hovered.


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
  •