CODEWITHSUNDEEP
jqueryhtmlcssmenu
JAVAGeek
JAVAGeek

Reputation: 2794

Multiple category Dropdown menu

I am trying to create a category menu like this.

I have created this so far : http://jsfiddle.net/q5GcD/

The big menu should close only if i take mouse out of bigmenu div.

Also, i am unable to position the big menu correctly so that it overlaps the small menu button.

Html :

<div id="mydiv">Menu</div>
<div id="bigmenu">This is big menu</div>

Css :

#mydiv {
    position:absolute;
    top:10px;
    left:50px;
    height:50px;
    width:200px;
    background-color:#fff;
    border:1px solid black;
}
#bigmenu {
    position:absolute;
    top:10px;
    left:50x;
    height:500px;
    width:200px;
    background-color:orangered;
}

script :

$(document).ready(function(){


    $('#bigmenu').css("display","none");
    $('#mydiv').hover(function(){
        $('#bigmenu').css("display","inline");

        },function(){
           $('#bigmenu').css("display","none");
            }

        );

});

Upvotes: 0

Views: 1018

Answers (3)

Andrea Ligios
Andrea Ligios

Reputation: 50281

You don't need javascript, you can do it with CSS only using the :hover dynamic pseudo-class.

#bigmenu should be a child of #mydiv, not a sibling, to keep it active until you go out of #bigmenu (instead of just out of #mydiv).

You don't need absolute position too.

Demo: http://jsfiddle.net/q5GcD/1/

HTML

<div id="mydiv">
   Menu
   <div id="bigmenu">
      This is big menu
   </div>
</div>

CSS

#mydiv {
    min-height:50px;
    width:200px;
    background-color:#fff;
    border:1px solid black;
}

#mydiv:hover > #bigmenu{
    display: block;
}

#bigmenu {  
    display: none;
    height:500px;
    width:200px;
    background-color:orangered;
}

This line:

#mydiv:hover > #bigmenu{

is telling the browser to apply the rule between the brackets for an element with id="bigmenu", that is child (with >, the Child Selector) of an element with id="myDiv", when you are hovering (mouse on) it.

In the case of a sibling, like in your original HTML code, you should have used +, that is the Adjacent Sibling Selector.

Upvotes: 2

bashleigh
bashleigh

Reputation: 9324

That's actually a list menu :) 

<ul>
    <li><a href=''>Cat drop</a>
    <ul>
        <li>
            <a href=''>second drop</a>
        </li>
    </ul>
    </li>
</ul>

quick CSS:

ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
  }
ul >li {
    /* top style */
    background:#FF0000;
}
ul>li>ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
    position:absolute;
    display:none;
    background:#00FF00;
}
ul>li:hover>ul{
   display:block;
}

with the last selector yo won't need any jQuery or javascript. That's what I think they're using but I could be wrong. You can still use both I think? Not 100% sure on that one.

Upvotes: 0

ZolaKt
ZolaKt

Reputation: 4719

Is this what you are looking for?
http://jsfiddle.net/q5GcD/2/

You have a typo in your css, 50x instead of 50px, that takes care of the alignment.

As for JS, use mouseenter and mouseleave instead of hover

Upvotes: 1

Related Questions