SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Afrika
    Join Date
    Jul 2004
    Location
    Nigeria
    Posts
    1,737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show hide menu/dropdown with delay

    hi guys,
    Am trying to implement a dropdown menu with delay.

    Which I got working, however after it shows the dropdown div, I don't know how to keep the div displayed on hover over the div.

    Any ideas ?

    thanks

    Ehi


    Code:
      $(document).ready(function () {
    
    
          
           
    
            $('#menu_1').mouseover(function () {
                
             $("#mainmenu1").slideDown(500);
            });
            $('#menu_1').mouseout(function () {
                $("#mainmenu1").slideUp(500);
                
            });
    
           
    
        });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Can you post the HTML that goes with this, so that I can recreate the menu for myself.
    Failing that, can you post a link to a page where I can see the menu?

  3. #3
    Afrika
    Join Date
    Jul 2004
    Location
    Nigeria
    Posts
    1,737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div class="MainNavigations">
                      
    
    
                        <div class="TextBox_Search_div">
                            <asp:TextBox ID="TextBox1" runat="server" CssClass="TextBox_Search"></asp:TextBox>
                        </div>
                        <div class="mainmenu"  >
                            <asp:ImageButton ID="ImageButton6" runat="server" ImageUrl="~/Images/settings.png" />
                            <div class="menu" id="menu_1" >
                                <div>
                                    <asp:Image ID="Image11" runat="server" ImageUrl="~/Images/icons/arrow.gif" /><a href="#" id="menu1">- Favourites-</a><asp:Image ID="Image1" runat="server" ImageUrl="~/Images/icons/l_arrow.gif" />
    
                                </div>
                                <div class="popup" id="mainmenu1" >
                                    <input id="Checkbox1" type="checkbox" /><a href="index.html">The menu</a>
                                    <a href="#">Nowhere</a>
                                    <a href="#">Nowhere</a>
                                </div>
                            </div>
                            <div class="menu">
                                <div>
                                    <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/icons/arrow.gif" /><a href="#">- My Account  -</a><asp:Image ID="Image3" runat="server" ImageUrl="~/Images/icons/l_arrow.gif" />
    
                                </div>
                                <div class="popup">
                                    <input id="Checkbox2" type="checkbox" /><a href="index.html">The menu</a>
                                    <a href="#">Nowhere</a>
                                    <a href="#">Nowhere</a>
                                </div>
                            </div>
                            <asp:ImageButton ID="ImageButton7" runat="server" ImageUrl="~/Images/cart.png" />
                        </div>
    
                    </div>
    Code:
    .MainNavigations {
        /**/
        width: 90%;
        margin: 0 auto;
        text-align: center;
        border: 7px solid #000000;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 85%;
        margin-left: auto;
        margin-right: auto;
        height: 34px;
        box-shadow: 3px 3px 10px 5px #000; /* */
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,8);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,8);
        box-shadow: 0px 0px 10px rgba(0,0,0,13);
        border-radius: 10px;
        -moz-border-radius: 10px;
        background-image: url('../../Images/bg.gif');
        
        position: relative;
        min-width: 1240px;
         /*  this enables the 2nd div to show  ie the login div    */
        top: 30px;
        z-index:10;
    }
    
    div.mainmenu {
        /* ; top: 50px;
         left: 20px;*/
       /* position: absolute;*/
        font-weight: bold;
        
        left: 65%; /*------------15% centralizes the nested div in the above div ------------------*/
      position:absolute;
        clip: rect(2px, auto, auto );
         
        float: right;
        width: 40%;
    
       
    }
    
    div.menu {
        border: thin solid #FFFFFF;
        float: left;
        margin-left: 0px; /*  individual divs solid black borders    z-index:-4;*/ 
        z-index:2;
         border-bottom-color:red;
            
        
    }
        div.menu a {
        color: black;
        text-decoration: underline;
       /* border: thin solid #3333FF;
      
         background-image: url('../../Images/bg.gif');
     */
       
    }
    
         div.menu  a:hover {
                color: red;
    
            
        }
    
    div.popup a:hover {
        border: thick solid #FFFFFF;
        background-color: whitesmoke;
       
        
    }
    div.menu:hover div:first-child {
        
        background-position: center bottom;
        vertical-align: middle; /**/
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-color: white;
        border-radius: 8px 8px 0 0;
        -moz-border-radius: 8px 8px 0 0;
        -webkit-border-radius: 8px 8px 0 0; /*   this covers the lower border bottom, so it flows into the sub menu*/
       
        border-bottom: solid;
        border-bottom-color: red;
       
        border-bottom-width: thick;
        border-top: solid;
        border-top-color: blue;
        border-top-width: thin;
     background-image: url('../../Images/newday/top_nav.png');
     border-right:solid;
     border-right-color:red;
     border-right-width:thin;
    
     border-left:solid;
     border-left-color:red;
     border-left-width:thin;
    
      
    
         
    }
    div.menu div.popup {
        display: none;
        background-color: #FFFFFF;
        color: #000000;
    
    }
    div.menu:hover div.popup {
        background-position: center bottom;
        position: relative;
        /*display: block;*/
        right: 0%;
        width: 100px;
        height: 80px;
        border-bottom: ridge;
        width: 90%;
        margin: 0 auto;
        box-shadow: 3px 3px 10px 5px #000; /* */
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,3);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,3);
        box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        border-radius: -5px;
        -moz-border-radius: 25px;
        top: 0px;
        border-style: solid;
        background-color: #FFFFFF;
        font-family: verdana, Geneva, Tahoma, sans-serif;
        font-size: 10px;
        font-weight: normal;
        border-right: none;
        border-top: thick;
        border-top-width: thick;
        border-top: solid;
        border-top-color: #FF0000;
        border-right-color: inherit;
        border-bottom-color: #000000;
        border-left-color: #000000;
     
        border-width: 8px 5px 25px 5px;
    
        -webkit-transition: opacity 6s ease-out;
    
         -o-transition: opacity 3s;
             -moz-transition: opacity 3s;
             -webkit-transition: opacity 3s;
             transition: opacity 3s;
              opacity:1;
    
    }
    
    
    div.menu div {
        background-position: bottom;
        min-width: 150px;
       
        padding: 5px;
        /*border: solid 2px;*/
        
    
            
        background-repeat: repeat;
    
    }
    
    
    
    /*-----------------main nav 2*/
    The html and css are a bit dodgy, as the drop down was initially implemented in css, but I then wanted to change things and add a bit of jquery.

    many thanks

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,003
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    Change your JS to this, making sure not to wrap everything in a $(document).ready() callback:

    Code JavaScript:
    $('#menu_1').hover(function () {
      $("#mainmenu1").slideDown(500);
    }, function () {
      $("#mainmenu1").slideUp(500);
    });

    This works for me, although your CSS is doing weird stuff on hover (for example)

  5. #5
    Afrika
    Join Date
    Jul 2004
    Location
    Nigeria
    Posts
    1,737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok that's that sorted.

    Many thanks


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
  •