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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Hover root item only

    Hi

    Ive got my menu displayed on this site http://valkesh.000space.com. The issue I am having is that I want the hover image (red part) to be displayed only when hovering the root li, and not all subsequent li items in the menu.. because as you may see now, even when hovering the li in the submenu the red gets displayed.

    The code I am using is the following

    Code:
    <script type="text/javascript">
    $(document).ready(function () {
    	$('#smoothmenu1 li').append('<div class="hover"></div>');
    
    	$('#smoothmenu1 li').hover(
    		function() {
    			$(this).children('div').fadeIn('500');	
    		}, 
    		function() {
    			$(this).children('div').fadeOut('500');	
    	}).click (function () {
    		$(this).addClass('selected');
    	});
    });
    </script>
    and

    Code:
    <div id="smoothmenu1" class="menu">
        <ul>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a>
                <ul>
                    <li><a href="#">2.1</a>
                    <ul>
                        <li><a href="#">2.1.1</a></li>
                    </ul>
                    </li>
                <li><a href="#">2.2</a></li>
                <li><a href="#">2.3</a></li>
            </ul>
            </li>
            <li><a href="#">Page 3</a>
                <ul>
                    <li><a href="#">3.1</a></li>
                    <li><a href="#">3.2</a></li>
                    <li><a href="#">3.3</a></li>
                </ul>
                </li>
            <li><a href="#">Page 4</a></li>
        </ul>
    </div>
    Is there a way to specify in the javascript functionality where to append the div to only the root li item?

    Thanks

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Try adding a css class to the root li. For example <li class="root"> and then do this:

    Code:
    $('#smoothmenu1 li.root').append('<div class="hover"></div>');


  •  

    Posting Permissions

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