JQuery Menu Help

Discussion in 'jQuery' started by GrooTheWanderer, May 2, 2011.

0
  1. #1
    Hey Folks,

    I'm constructing this nice little jquery menu here, and there's a couple of things I need help with:

    After the #m1 menu div is shown and hovered over, I would like to be able to hide it again by mouseleaving out of the #button1 div, as well as by mouseleaving out of the "m1" menu div. So far it only hides when I mouseleave the "m1" menu div. So how do I make the menu hide again when I mouseleave the #button1 div? I hope this makes sense!

    Thanx!!

    here'z the code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Menu Fade</title>

    <style type="text/css">

    * { margin: 0; padding: 0; }

    body { background: #000; }

    ol, ul { list-style: none; }

    #wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    }

    #button1{
    position: absolute;
    left: 114px;
    top: 40px;
    display: block;
    width: auto;
    height: auto;
    padding: 10px 8px 8px 8px;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    color: yellow;
    z-index:1000;
    background-color: red;
    }

    #m1 {
    position: absolute;
    top: 40px;
    left: 206px;
    visibility: visible;
    margin: 0px;
    padding: 6px 0px 0px 0px;
    width: 120px;
    height: 160px;
    background-color: red;

    }

    #m1 a {
    position: relative;
    display: block;
    margin: 0px;
    padding: 4px 10px;
    width: auto;
    white-space: nowrap;
    text-align: right;
    text-decoration: none;
    color: #FFF;
    font: bold 16px arial;
    border: 0px;
    }

    #m1 a:hover {
    color: #00B5FF;
    margin: 0px;
    padding: 4px 10px;
    border: 0px;
    position: relative;
    }

    </style>

    <script src="http://code.jquery.com/jquery-1.5.2.js"></script>
    <script type="text/javascript">

    $(document).ready
    (function()
    {

    $("#m1").hide();

    $("#button1").mouseenter

    (function()
    {
    $("#m1").show();
    }
    );


    $("#m1").mouseleave

    (function()
    {
    $("#m1").hide();
    }
    );


    }
    );
    </script>
    </head>

    <body>
    <div id="wrapper"
    <div id="button1">Show me<br />the menu!</div>
    <div id="m1">
    <ul>
    <li><a href="#">List Item 1</a></li>
    <li><a href="#">List Item 2</a></li>
    <li><a href="#">List Item 3</a></li>
    <li><a href="#">List Item 4</a></li>
    <li><a href="#">List Item 5</a></li>
    <li><a href="#">List Item 6</a></li>
    </ul>
    </div> <!-- END "m1" -->
    </div> <!-- END "wrapper" -->
    </body>
    </html>
     
    GrooTheWanderer, May 2, 2011 IP
  2. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #2 
    
<!DOCTYPE html>
<html>
    <head>
        <title>Menu Fade</title>

        <style type="text/css">

            * { margin: 0; padding: 0; }

            body { background: #000; }

            ol, ul { list-style: none; }

            #wrapper {
                width: 100%;
                height: 100%;
                position: relative;
            }

            #button1{
                position: absolute;
                left: 114px;
                top: 40px;
                display: block;
                width: auto;
                height: auto;
                padding: 10px 8px 8px 8px;
                font-family: arial;
                font-size: 16px;
                font-weight: bold;
                color: yellow;
                z-index:1000;
                background-color: red;
            }

            #m1 {
                position: absolute;
                top: 40px;
                left: 206px;
                visibility: visible;
                margin: 0px;
                padding: 6px 0px 0px 0px;
                width: 120px;
                height: 160px;
                background-color: red;

            }

            #m1 a {
                position: relative;
                display: block;
                margin: 0px;
                padding: 4px 10px;
                width: auto;
                white-space: nowrap;
                text-align: right;
                text-decoration: none;
                color: #FFF;
                font: bold 16px arial;
                border: 0px;
            }

            #m1 a:hover {
                color: #00B5FF;
                margin: 0px;
                padding: 4px 10px;
                border: 0px;
                position: relative;
            }

        </style>

        <script src="http://code.jquery.com/jquery-1.5.2.js"></script>
        <script type="text/javascript">

            $(document).ready
            (function()
            {

                $("#m1").hide();

                $("#button1").mouseenter(function()
                {
                    $("#m1").show();
                }
            ).mouseleave(function()
                {
                    $("#m1").hide();
                }
            );


                $("#m1").mouseenter(function()
                {
                    $("#m1").show();
                }
            ).mouseleave(function()
                {
                    $("#m1").hide();
                }
            );


            }
        );
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="button1">Show me<br />the menu!</div>
            <div id="m1">
                <ul>
                    <li><a href="#">List Item 1</a></li>
                    <li><a href="#">List Item 2</a></li>
                    <li><a href="#">List Item 3</a></li>
                    <li><a href="#">List Item 4</a></li>
                    <li><a href="#">List Item 5</a></li>
                    <li><a href="#">List Item 6</a></li>
                </ul>
            </div> <!-- END "m1" -->
        </div> <!-- END "wrapper" -->
    </body>
</html>
    Code (markup):
     
    Jan Novak, May 2, 2011 IP