CODEWITHSUNDEEP
jquery
user468204
user468204

Reputation: 3

Jquery dropdown when mouseover

How do I stay the child open on mouseover/mouseout on the PARENT1 and if mouseover the other PARENT2 its child opens up and the PARENT1 childs hide on mouseover on this PARENT2..

var drop = $('#nav li > ul');
var par = $('#nav li')
drop.hide();
$('#nav li').mouseover(function(){
    drop.show();
});
drop.mouseout(function(){
      drop.show()
});
<ul id="nav">
<li>PARENT 1
  <ul>
    <li>CHILD </li>
    <li>CHILD </li>
    <li>CHILD </li>
  </ul>
</li>
<li>PARENT 2
                   <ul>
    <li>CHILD </li>
    <li>CHILD </li>
    <li>CHILD </li>
  </ul>
                </li>
<li>PARENT 3</li>
<li>PARENT 4</li>
</ul>

Upvotes: 0

Views: 1660

Answers (3)

Chandresh M
Chandresh M

Reputation: 3828

You can use Accordion menu jquery for that.i'll give you code soon.

// Jquery:

    $(document).ready(function()
    {   
        //slides the element with class "menu_body" when mouse is over the paragraph
        $("#secondpane p.menu_head").mouseover(function()
        {
             $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
             $(this).siblings().css({backgroundImage:"url(left.png)"});
        });
    });


// CSS :
    <style type="text/css">
    body {
        margin: 10px auto;
        font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
    }
    .menu_list {    
        width: 150px;
    }
    .menu_head {
        padding: 5px 10px;
        cursor: pointer;
        position: relative;
        margin:1px;
        font-weight:bold;
        background: #eef4d3 url(left.png) center right no-repeat;
    }
    .menu_body {
        display:none;
    }
    .menu_body a{
      display:block;
      color:#006699;
      background-color:#EFEFEF;
      padding-left:10px;
      font-weight:bold;
      text-decoration:none;
    }
    .menu_body a:hover{
      color: #000000;
      text-decoration:underline;
      }
    </style>

// HTML CODE:
    <div style="float:left; margin-left:20px;"> <!--This is the second division of right-->
      <p><strong>Works with mouse over </strong></p>
      <div class="menu_list" id="secondpane"> <!--Code for menu starts here-->
            <p class="menu_head">Header-1</p>
            <div class="menu_body">
            <a href="#">Link-1</a>
             <a href="#">Link-2</a>
             <a href="#">Link-3</a> 
            </div>
            <p class="menu_head">Header-2</p>
            <div class="menu_body">
                <a href="#">Link-1</a>
             <a href="#">Link-2</a>
             <a href="#">Link-3</a> 
            </div>
            <p class="menu_head">Header-3</p>
            <div class="menu_body">
              <a href="#">Link-1</a>
             <a href="#">Link-2</a>
             <a href="#">Link-3</a>         
           </div>
      </div>      <!--Code for menu ends here-->
    </div>

You can try this code, i am sure it will helpful to you. you can also refer my blog for that..goto Source files box in sidebar, and download source code zip file.

Thanks.

Upvotes: 1

Vivek
Vivek

Reputation: 11028

First assign a common class to all parent li and child ul something like this... 

<ul id="nav">
            <li class="parent">PARENT 1
              <ul class="child">
                <li>CHILD </li>
                <li>CHILD </li>
                <li>CHILD </li>
              </ul>
            </li>
            <li class="parent">PARENT 2
             <ul class="child">
                <li>CHILD </li>
                <li>CHILD </li>
                <li>CHILD </li>
              </ul>
            </li>
            <li class="parent">PARENT 3</li>
            <li class="parent">PARENT 4</li>
 </ul>

then try this.. 

 $('.parent').mouseover(function(){
            $('.child').hide()//will first hide all the child
           $(this).find('.child').show();//show the current child
        });

Upvotes: 1

Rohit Singh Sengar
Rohit Singh Sengar

Reputation: 999

Use jQuery Accordion, http://docs.jquery.com/UI/Accordion

Upvotes: 0

Related Questions