I’m trying to make a simple navigation menu with jquery, where you hover over one of the li, and a sub ul li slides in under it. I can get it to work with slideToggle() just fine, but can’t for the life of me get slide to work. (I was debugging with click but need it to be hover).
Javascript:
<script type="text/javascript">
// Wait for the page and all the DOM to be fully loaded
$(document).ready(function() {
// Add the 'hover' event listener to our drop down class
$(".dropdown").click(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation' and display/hide them
//$(this).find('.sub_navigation').slideToggle();
$(this).find(".sub_navigation").show("slide", { direction: "left" }, 1000);
});
});
</script>
CSS
ul {
margin:0;
padding:0;
list-style-type:none;
min-width:200px;
}
ul#navigation {
float:left;
}
ul#navigation li {
float:left;
border:1px black solid;
min-width:200px;
}
ul.sub_navigation {
position:absolute;
display:none;
overflow: hidden;
}
ul.sub_navigation li {
clear:both;
margin-left: 9999px;
float: left;
}
a,a:active,a:visited {
display:block;
padding:10px;
}
List
<div id="menu">
<ul id="navigation">
<li class="dropdown"><a href="javascript:ajaxpage('home.php', 'body');">Home</a></li>
<li class="dropdown"><a href="javascript:ajaxpage('projects.php', 'body');">Projects</a>
<ul class="sub_navigation">
<!-- pull projects with P H P -->
<?php
require('config/config.php');
//pull all data from projects table
$result = mysql_query("SELECT * FROM projects") or die('Unable to query!');
$num_results = mysql_num_rows($result);
//make sure there is at least 1 project
if ($num_results > 0) {
//loop to catch each project in database
while ($row = mysql_fetch_array($result)) {
//return in list each project name
?>
<li><a href="openproject.php?id=<? echo $row['id']; ?>"><? echo $row['name']; ?></a></li>
<?php
}
} else {
//return to add a project
?>
<li><a href="createproj.php">Add a project</a></li>
<?php
}
?>
</ul>
</li>
<li class="dropdown"><a href="javascript:ajaxpage('pubfiles.php', 'body');">Public Files</a></li>
<li class="dropdown"><a href="javascript:ajaxpage('users.php', 'body');">Users</a></li>
<li class="dropdown"><a href="javascript:ajaxpage('settings.php', 'body');">Settings</a></li>
<!-- only pull if admin and logged in per P H P session-->
<li class="dropdown"><a href="javascript:ajaxpage('admin.php', 'body');">Admin</a></li>
</ul>
</div>
Your code for
show()has the wrong signature: http://api.jquery.com/show/It can be:
.show()or
.show( duration [, callback] )or
.show( [duration] [, easing] [, callback] )In your case, you can use
animate()to slide horizontally:Edit:
Althrough if you are using the jQuery UI effects, the syntax is correct. Make sure you have included the jQuery UI .js file in the page and that this file was built with the effects module.