On mouseover dropdowns

JavaScript
1

I have a nav bar and two of the buttons have scripts on them. What Im trying to achieve is when you rollover one if the other is already down it rolls up, and so on, but I haven’t quite got that working.

here is the page that’s its being worked on, and the two nav buttons are ‘Type Categories’ and ‘Regional Clocks’

and here is my code.

<ul style="margin-left:10px;">
<li><a href="/" title="Pendulum of Mayfair Home Page">Home</a></li>
<li><a href="/our-clocks" title="Present Stock">Present Stock</a></li>
<li><a href="/sold-stock" title="Sold Stock" id="up">Sold Stock</a></li>
<li><a href="#" title="Type Categories" id="events">Type Categories</a></li>
<li><a href="#" title="Regional Clocks" id="regional">Regional Clocks</a></li>
<li><a href="/our-cheshire-workshop" title="Workshop">Workshop</a></li>
<li><a href="/blog" title="Antique Blog">Antique Blog</a></li>
<li><a href="/antique-clocks" title="Antique Clocks Information">Information</a></li>
<li><a href="/location" title="Location">Location</a></li>
<li><a href="/contact" title="Contact Us">Contact Us</a></li>
</ul>

<script>
$(document).ready(function() {
$('#topBottom #events').click(function() {
$('#login-form').slideToggle(300);
$(this).toggleClass('close');
});
$('#topBottom #events').mouseover(function() {
$('#login-form').slideToggle(300);
$('#regional-form').slideToggle(300);
});
}); // end ready
</script>

<script>
$(document).ready(function() {
$('#topBottom #regional').click(function() {
$('#regional-form').slideToggle(300);
$(this).toggleClass('close');
});
$('#topBottom #regional').mouseover(function() {
$('#regional-form').slideToggle(300);
$('#login-form').slideToggle(300);
});
}); // end ready
</script>
2

Hi,

I’m not sure why you are adding click and hover at the same time as that would seem to conflict a little as you will be hovering while you are clicking.

Click would seem a more obvious choice.

Here’s rough working example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.toggle-items {
	display:none
}
.forms {
	clear:both;
	position:relative
}
#toggle-list {
	margin:0;
	padding:0;
	list-style:none;
}
#toggle-list li, #toggle-list a {
	float:left;
}
#toggle-list a {
	padding:5px 20px;
	background:blue;
	color:#fff;
	margin:0 10px;
	border-radius:5px;
}
#toggle-list a:visited {
	color:#fff
}
#toggle-list a:hover {
	background:red
}
.toggle-items {
	position:absolute;
	top:10px;
	left:10px;
	width:80px;
	background:blue;
	color:#fff;
	margin:0 20px 0 0;
}
.toggle-items + .toggle-items {
	background:red;
	left:110px;
	width:150px;
}
</style>
</head>

<body>
<ul id="toggle-list" >
		<li><a class="toggle" href="#login-form" title="Type Categories" id="events">Events</a></li>
		<li><a class="toggle" href="#regional-form" title="Regional Clocks" id="regional">Regional Clocks</a></li>
</ul>
<div class="forms">
		<div id="login-form" class="toggle-items">
				<p>login form</p>
				<p>login form</p>
				<p>login form</p>
				<p>login form</p>
		</div>
		<div id="regional-form" class="toggle-items">
				<p>Regional form</p>
				<p>Regional form</p>
				<p>Regional  form</p>
				<p>Regional  form</p>
		</div>
</div>
<script>
$(document).ready(function() {
 $('.toggle').on('click', function () {
		 var activeTab = $(this).attr("href"); //Find the href attribute value to identify the target
		 	if ($(activeTab).is(':visible') ) {
			  $(activeTab).slideUp(300); 
			} else {
				$('.toggle-items').slideUp(300);
				$(activeTab).slideDown(300);		 
		 }
		 return false;
 });
}); // end ready
</script>
</body>
</html>

You can add your mouseover in here as well:
).on('click mouseover',

But then clicking will only close the menu because the hover was opening it.

Hope it points you in the right direction anyway:)

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.