CODEWITHSUNDEEP
jquerycss
okenshield
okenshield

Reputation: 565

Creating a JQuery menu popup

Can anyone tell me how the best way to create this menu popup with the below images?

enter image description here

The next image shows what it should look like when you hover over the more link. I have the popup menu as an image.

enter image description here

<script type="text/javascript">  
    $(function() {
        $(this).find('#more_ddown').hide();
    });

    $(function() {
        $('#v3NavHeaderLink3').hover(function(){                    
            $('#more_ddown').fadeIn('fast');                        
            }, function(){
                $('#more_ddown').hide();
            });
        });

</script>

    <nav id="NavHeader">
        <a href="#" title="" id="Link1">Link #1</a>
        <a href="#" title="" id="Link2">Link #2</a>
        <a href="#" title="" id="Link3">More</a>
        <img src="img/more.png" id="more_ddown" alt="alt" />    
    </nav>

Upvotes: 0

Views: 3912

Answers (1)

richsoni
richsoni

Reputation: 4278

HTML

<ul id="menu">
    ...
    <li id="moreButton">MORE</li>
</ul>

<div id="morePopup">
   <div id="heading"><img src="arrow.png"/></div>
    <ul>
       <li><a href="#">link 1</a>
       <li><a href="#">link 1</a>
       <li><a href="#">link 1</a>
   </ul>
</div>

CSS

#morePopup
{
  display:none;
  position:absolute;
  left:/*whatever you want*/
  top:/*whatever you want*/
  width:/*whatever you want*/
  height:/*whatever you want*/
}
#heading
{
  display:block;
  width:/*same as morePopup*/
  height:/*whatever you want*/
}

*/ this is for rounded corners too long to put here

JQUERY

$("#moreButton").bind('mouseover',function(){
              $('#morePopup').css('display','block');
});
$("#morePopup").bind('mouseout',function(){
        $(this).css('display','none');
});

Upvotes: 2

Related Questions