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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mouse Over and MouseOut on Javascript and CSS Menu

    Hello

    Can anyone offer me some assistance on how I can modify the following Drop Line Menu. I have updated the Menu so it fit's my requirement and it works really well, however I would like the Drop Line to display on MouseOver and Hide on MouseOut. Currently it remains visible unless another Link is selected

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Drop Line Menu</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    <script type="text/javascript" src="iStu1/iStu1.js"></script>
    
    <script>
    
    $(document).ready(function () {
    $('#menuHolder ul li a').mouseover(function (event) {
    if (this == event.target) {
    $(this).parent().toggleClass('clicked');
    if ($(this).parent().attr('class').indexOf('clicked') != -1) {
    $(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing");
    }
    else {
    $(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
    }
    $(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
    }
    })
    $('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) {
    if (this == event.target) {
    $(this).parent().toggleClass('clicked');
    $(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
    }
    });
    });
    
    </script> 
    
    
    <style>
    
    #menuHolder {width:950px; height:25px; position:relative; z-index:100;}
    #menuHolder ul {width:950px; height:25px; padding:0; margin:0; list-style:none; text-align:center;}
    #menuHolder ul {background: #000000;}
    #menuHolder ul li {display:inline; margin:0 -4px 0 0;}
    #menuHolder ul li a {display:inline-block; padding:2px 15px; font: bold 13px/13px arial, sans-serif; color:#fff; text-decoration:none;}
    #menuHolder ul li.clicked > a {color:#ffff00;}
    #menuHolder ul li ul {position:absolute; left:0; top:0; z-index:-1; background:transparent;}
    #menuHolder ul li ul li a {padding:0 10px; font-size:13px; color:#000000;}
    #menuHolder ul li ul li a:hover {color:#0000ff; text-decoration:underline;}
    
    </style>
    
    
    
    </head>
    
    <body>
    	<div id="menuHolder">
    	<ul>
    		<li><a href="index.html" title="About Skittle Pins and Balls">ABOUT US</a></li>
    
    		<li><a href="#">PRODUCTS</a>
    			<ul>
    				<li><a href="#" title="General Information About Our Products">General Information</a></li>
    				<li><a href="skittleballs.html" title="Skittle Balls We Manufacture">Skittle Balls</a></li>
    				<li><a href="skittlepins.html" title="Skittle Pins We Mnaufacture">Skittle Pins</a></li>
    				<li><a href="deals.html" title="Skittle Pin and Ball Deals - Purchase Both And Save Money">Pin and Ball Deals</a></li>
    				<li><a href="miniature.html" title="Miniature Skittle Sets">Miniature Skittle Sets</a></li>
    				<li><a href="other.html" title="Other Products We Offer">Other Products</a></li>
    			</ul>
    		</li>
    
    		<li><a href="#">ADVICE AND INFORMATION</a>
    			<ul>
    				<li><a href="advice.html" title="Advice Before Selecting Your Products">Selection Advice</a></li>
    				<li><a href="maintain.html" title="Maintaining your Skittle Equipment">Maintaining your Items</a></li>
    				<li><a href="timber.html" title="Statement Regarding Our Timber Quality">Timber Statement</a></li>
    				<li><a href="calculator.html" title="Calculate the Dimensions of Your Existing Items">Pin and Ball Size Calculator</a></li>
    				<li><a href="#" title="Purchasing Second Hand Items">Purchasing Old Sets</a></li>
    			</ul>
    		</li>
    
    		<li><a href="#x">ORDERING</a>
    			<ul>
    				<li><a href="#" title="How To Order your Skittle Equipment">How To Order</a></li>
    				<li><a href="#" title="How To Pay For Your Skittle Equipment">How To Pay</a></li>
    				<li><a href="#" title="Delivery Options">Delivery Options</a></li>
    			</ul>
    		</li>
    
    		<li><a href="#x">REGIONAL STYLES</a>
    			<ul>
    				<li><a href="#" title="Regional Skittle Ball Styles">Skittle Balls</a></li>
    				<li><a href="#" title="Regional Skittle Pin Styles">Skittle Pins</a></li>
    			</ul>
    		</li>
    		
    		<li><a href="#">CONTACT DETAILS</a>
    			<ul>
    				<li><a href="#" title="Contact Us Form">Contact Form</a></li>
    				<li><a href="#" title="Our Location - How to Final Us">Location</a></li>
    			</ul>
    		</li>
    		
    		<li><a href="links.html" title="Links To Other Websites">LINKS</a></li>
    	</ul>
    </div>
    
    <br><br>
    </body>
    </html>
    Many Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,354
    Thanks
    23
    Thanked 618 Times in 617 Posts
    Your using doctype 1 so JS should start with <script type="text/javascript"> not <script>.
    Wouldn't it be simpler to use the CSS :hover selector?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I hadn't considered this an an option, what do i need to do, presumably replace the mouseover selection. If you could offer guidance

    I've corrected the Javascript tag

    Many Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Drop Line Menu</title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    
    <script type="text/javascript">
    
    $(document).ready(function () {
    $('#menuHolder ul li a').mouseover(function (event) {
    if (this == event.target) {
    $(this).parent().toggleClass('clicked');
    if ($(this).parent().attr('class').indexOf('clicked') != -1) {
    $(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing");
    }
    else {
    $(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
    }
    $(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
    }
    })
    $('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) {
    if (this == event.target) {
    $(this).parent().toggleClass('clicked');
    $(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
    }
    });
    });
    
    </script> 
    
    
    <style>
    
    #menuHolder {width:950px; height:25px; position:relative; z-index:100;}
    #menuHolder ul {width:950px; height:25px; padding:0; margin:0; list-style:none; text-align:center;}
    #menuHolder ul {background: #000000;}
    #menuHolder ul li {display:inline; margin:0 -4px 0 0;}
    #menuHolder ul li a {display:inline-block; padding:2px 15px; font: bold 13px/13px arial, sans-serif; color:#fff; text-decoration:none;}
    #menuHolder ul li.clicked > a {color:#ffff00;}
    #menuHolder ul li ul {position:absolute; left:0; top:0; z-index:-1; background:transparent;}
    #menuHolder ul li ul li a {padding:0 10px; font-size:13px; color:#000000;}
    #menuHolder ul li ul li a:hover {color:#0000ff; text-decoration:underline;}
    
    </style>
    
    
    
    </head>
    
    <body>
    	<div id="menuHolder">
    	<ul>
    		<li><a href="index.html" title="About Skittle Pins and Balls">ABOUT US</a></li>
    
    		<li><a href="#">PRODUCTS</a>
    			<ul>
    				<li><a href="#" title="General Information About Our Products">General Information</a></li>
    				<li><a href="skittleballs.html" title="Skittle Balls We Manufacture">Skittle Balls</a></li>
    				<li><a href="skittlepins.html" title="Skittle Pins We Mnaufacture">Skittle Pins</a></li>
    				<li><a href="deals.html" title="Skittle Pin and Ball Deals - Purchase Both And Save Money">Pin and Ball Deals</a></li>
    				<li><a href="miniature.html" title="Miniature Skittle Sets">Miniature Skittle Sets</a></li>
    				<li><a href="other.html" title="Other Products We Offer">Other Products</a></li>
    			</ul>
    		</li>
    
    		<li><a href="#">ADVICE AND INFORMATION</a>
    			<ul>
    				<li><a href="advice.html" title="Advice Before Selecting Your Products">Selection Advice</a></li>
    				<li><a href="maintain.html" title="Maintaining your Skittle Equipment">Maintaining your Items</a></li>
    				<li><a href="timber.html" title="Statement Regarding Our Timber Quality">Timber Statement</a></li>
    				<li><a href="calculator.html" title="Calculate the Dimensions of Your Existing Items">Pin and Ball Size Calculator</a></li>
    				<li><a href="#" title="Purchasing Second Hand Items">Purchasing Old Sets</a></li>
    			</ul>
    		</li>
    
    		<li><a href="#x">ORDERING</a>
    			<ul>
    				<li><a href="#" title="How To Order your Skittle Equipment">How To Order</a></li>
    				<li><a href="#" title="How To Pay For Your Skittle Equipment">How To Pay</a></li>
    				<li><a href="#" title="Delivery Options">Delivery Options</a></li>
    			</ul>
    		</li>
    
    		<li><a href="#x">REGIONAL STYLES</a>
    			<ul>
    				<li><a href="#" title="Regional Skittle Ball Styles">Skittle Balls</a></li>
    				<li><a href="#" title="Regional Skittle Pin Styles">Skittle Pins</a></li>
    			</ul>
    		</li>
    		
    		<li><a href="#">CONTACT DETAILS</a>
    			<ul>
    				<li><a href="#" title="Contact Us Form">Contact Form</a></li>
    				<li><a href="#" title="Our Location - How to Final Us">Location</a></li>
    			</ul>
    		</li>
    		
    		<li><a href="links.html" title="Links To Other Websites">LINKS</a></li>
    	</ul>
    </div>
    
    <br><br>
    </body>
    </html>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You're using a very old jQuery - 1.4. I highly recommend to use the latest version 1.11.1. If you don't support IE8 and below, use version 2.1.1
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by sunfighter View Post
    Your using doctype 1 so JS should start with <script type="text/javascript"> not <script>.
    Wouldn't it be simpler to use the CSS :hover selector?
    If the OP supports touch devices on his site, I recommend not to use :hover.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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