SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Menu Question

    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>

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had to change a few things to get this to work. The cyan coloured background represents the limits beyond which the switch hides the list when you don't go over the button.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Menu Fade</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js">
    </script>
    <script type="text/javascript">
    <!--
    var menuOpen=false;
     $(document).ready (function() 
       { $("#listA").hide();  
         $("#button1").mouseenter( function()
            { if(menuOpen==false)
                 {  $("#listA").show(); menuOpen=true; }
              else
                 {  $("#listA").hide(); menuOpen=false; } 
            });  
         $("#m1").mouseleave( function(){ $("#listA").hide(); menuOpen=false; });  
     });
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:16px; color:#000; text-align:left; }
    li { margin-bottom:1px; }
    ul { list-style: none; margin:0; padding:0; }
    #wrap { position:relative; top:0px; left:0px; width:300px; height:300px; margin-left:50px;  }
    #m1 { position:absolute; top:100px; left:120px; height:190px; width:106px; background-color:#0FF;  }
    #m1 a:link, #m1 a:visited { margin:0px; text-decoration: none; color: #FFF; }
    #m1 a:hover { color: #FF0; }
    #button1{ position:absolute; left:0px; top:5px; width:100px; height:50px; margin-left:3px; color: #000; background-color:#FFF; text-align:center; cursor:pointer; }
    #listA { position:absolute; top:60px; left:0px; width:100px; margin-left:3px; background-color:#000; text-align:center; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <div id="m1">
        <div id="button1">
          Show me<br />
          the menu!</div>
          <!-- end button1 -->
          <div id="listA">
            <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 listA -->
        </div>
        <!-- end "m1" -->
      </div>
      <!-- end wrap -->
     
    </body>
     
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •