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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
  •