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
$(document).ready(function () {
$('#menu_1').mouseover(function () {
$("#mainmenu1").slideDown(500);
});
$('#menu_1').mouseout(function () {
$("#mainmenu1").slideUp(500);
});
});
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?
<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>
.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
Hey,
Change your JS to this, making sure not to wrap everything in a $(document).ready() callback:
$('#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)
ok that’s that sorted.
Many thanks