如何或在何处向CSS垂直下拉菜单添加javascript settimeout函数
我想使用settimeout稍微延迟菜单的关闭,这样它们就不会在mouseout上消失得太快。我知道语法应该是setTimeout('someaction',350);然而,由于它是css,我不确定在哪里应用mouseout以及该函数是什么 以下是html:如何或在何处向CSS垂直下拉菜单添加javascript settimeout函数,javascript,jquery,css,menu,Javascript,Jquery,Css,Menu,我想使用settimeout稍微延迟菜单的关闭,这样它们就不会在mouseout上消失得太快。我知道语法应该是setTimeout('someaction',350);然而,由于它是css,我不确定在哪里应用mouseout以及该函数是什么 以下是html: <div id="navigation"> <ul class="top-level"> <?php $query = "select * from categories";
<div id="navigation">
<ul class="top-level">
<?php $query = "select * from categories";
$categories = mysql_db_query ($dbname, $query, $link);
while ($row= mysql_fetch_array($categories)) { ?>
<li><a href="<?php echo $site_url;?>/<?php echo $row['category_url'];?>.php"><?php echo $row['category_name'];?></a>
<ul class="sub-level">
<?php $query = "select * from subcategories WHERE category_number = '".$row['category_number']."' ORDER BY subcategory_name ASC";
$subcategories = mysql_db_query ($dbname, $query, $link);
while ($row2= mysql_fetch_array($subcategories)) { ?>
<li><a href="<?php echo $site_url;?/subcat_lookup.php?c=<?php echo $row['category_number'];?>&s=<?php echo $row2['subcategory_name'];?>"><?php echo $row2['subcategory_name']; ?></a></li>
<?php }?>
<li><a href="<?php echo $site_url;?>/<?php echo $row['category_url'];?>.php">View all for <?php echo $row['category_name'];?></a></li>
</ul>
</li><?php }?>
</ul>
</div>
-
我修改了你的小提琴。下面是一个jQuery解决方案
我还将
li:hover.sub-level{
更改为.sub-level{
在您的css中我不是css专家,但由于您有手动设置的伪类:hover
,我不知道有什么方法可以延迟它。我认为您必须创建另一个类,并手动使用onMouseOver
和onMouseLeave
事件设置它,然后您可以轻松设置设置超时()
函数在onMouseLeave
事件中。也许有人知道更好的解决方案。您也可以放下:悬停
并使用JQuery的.animate()
也可以逐步更改数字CSS属性。请使用完成的HTML创建一个JSFIDLE。PHP与问题无关。@iambriansreed我在这里创建了JSFIDLE:这几乎是完美的。我喜欢淡出。是否有办法只在鼠标淡出时进行淡出,以便在选择不同内容时不会出现延迟耳鼻喉科子菜单?非常感谢,这是完美的。
#navigation { position:absolute;font-size:0.75em; width:214px;top:115px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}
/* FIRST LEVEL TEXT/BACKGROUND/BORDER SETTINGS */
ul.top-level {background:#fff;}
ul.top-level li {
font-family: arial, sans-serif;
font-size:14px;
font-weight:bold;
border:1px solid #D2D2D2; border-color:#fff #A5A5A5 #A5A5A5 #A5A5A5;
background:#fff url(images/arrow.gif) no-repeat center right;
}
/* FIRST LEVEL TEXT COLOR */
#navigation a {
text-align:left;
display:block;
color: #<?php echo $tab_color;?>;
cursor: pointer;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:214px;
}
/* FIRST LEVEL TEXT HOVER COLOR */
#navigation a:hover{
text-decoration:none;
}
/* FIRST LEVEL HOVER BACKGROUND COLOR */
#navigation li:hover {
background-color:#<?php echo $tab_color;?>;
position: relative;
}
#navigation li{
background-color:#FFF;
position: relative;
}
/* SECOND LEVEL TEXT SETTINGS */
ul.sub-level li a{
font-family: arial, sans-serif;
font-size:12px;
font-weight:normal;
background-color:#FFF;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
position: absolute;
display: block;
background: #FFF;
border: #A5A5A5 solid;
border-width: 1px;
/* set the sub menu flyout position here */
left: 207px;
top: -15px;
z-index:10;
}
/* SECOND LEVEL TEXT HOVER COLOR */
#navigation ul li ul li a:hover{
color:#FF6633;
text-decoration:underline;
}
#navigation ul ul{
padding-top:5px;
padding-bottom:5px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: 0px 3px 10px #B0B0B0;
}
#navigation ul li ul li a{
text-indent: 20px;
line-height: 17px;
}
ul.sub-level li {
background:#fff;
border:none;
float:left;
}
/* FIRST LEVEL HOVER BACKGROUND COLOR WHEN IN CHILD NODE*/
#navigation li:hover > a{
color:#fff;
}
$('ul.sub-level').css('display', 'none');
$('ul.top-level > li').hover(function(){
$(this).find('> ul').show();
}, function(e){
var t = e.relatedTarget.nodeName;
if(t === 'LI' || t === 'A'){
$(this).find('> ul').hide();
}else{
$(this).find('> ul').fadeOut('fast');
}
});