Vladimir Vladimir - 3 months ago 10
CSS Question

How do i select only one column when hovering over it in a drop down jQuery menu?

I need some help in finding out how to select only one column when I hover over the drop down menu. It works but all of the submenu items slide down. I want only the one I hover over to do so and then when hovering the next, the previous closes and just the next one stays opened.
Here is my HTML/CSS code and JS.
Thank's.




<head>
<title>Hover-Dropdown</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>

<style>

ul{list-style: none;}
.itemList{padding: 0;margin-top: 10px;}
.column{float: left;width: 100px;margin: 0 auto;}
.menu .column a:hover{color:red;}
</style>

<script>

$(document).ready(function(){
$('.menu .column .itemList li').hide();
$('.menu .column .title').hover(function(){
$('.menu .column .itemList li').slideDown('slow');
});
$('.menu .column').mouseleave(function(){
$('.menu .column .itemList li').slideUp('slow');
});
});

</script>




</head>

<body>

<ul class="menu">

<li class="column">
<a class="title" href="#">Title 1</a>

<ul class="itemList">

<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>

</ul>
</li>

<li class="column">
<a class="title" href="#">Title 2</a>

<ul class="itemList">

<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>

</ul>
</li>

<li class="column">
<a class="title" href="#">Title 3</a>

<ul class="itemList">

<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>

</ul>
</li>
</ul>

</body>



Answer

Lets start with a simple recap of your HTML structure. Nothing wrong here, but it helps explaining the issue.

ul.menu
    li.column
        a.title
        ul.itemList
            li
    li.column
        a.title
        ul.itemList
            li
    ...

Now lets take a look at the changes I made to your code.

First of all I changed the hover selector from .menu .column .title to .menu .column, we could have kept it, but the code became prettier by removing it. So regard this change as purely cosmetic. :)

The BIG change you'll see is on the two lines with slideDown and slideUp. First let me explain what your code did.

$('.menu .column .itemList li').slideDown('slow');

Whenever you use $(selector).something() jQuery will start at the top of the treestructure which is your DOM, and try to look for any matching elements. In your case it will find many. In fact, every item in your submenus matches this description. And that is why every menu was shown.

$(this).find('ul li').slideDown('slow');

By changing the line to something like above you fix the start position for the search at this (if you're not sure about this and JS/jQuery you should try finding some good articles about it). In this specific case this will allways be a reference to the specific column element which is being hovered over.

Recap

$('selector').something(); //Starts a search for the selector at the document root
$(this).find('selector').something(); //Starts a search at "this" element

Think of it as global vs local search.

Comments