延遲關閉菜單上的子菜單專用divs製作

我已經制作了帶有DIVs的這個水平菜單（根本沒有ul和li列表），我正在尋找一種方法來延遲子菜單在鼠標上的粘連出來，不介意是否與JavaScript，jQuery或CSS。我嘗試了一些JavaScript解決方案，但都沒有工作。延遲關閉菜單上的子菜單專用divs製作

的CSS

.topmenu 
{ 
margin: 0 auto; width: auto;float:left; 
position:relative; 
z-index:4; 
height: 50px; 
font-family: Arial, Helvetica, sans-serif; 
font-size:16px; 
color:#444; 
} 

.topmenu a 
{ 
padding:0 16px; 
line-height:50px; /*Note: keep this value the same as the height of .topmenu */ 
font-size:16px; 
font-weight:normal; 
display:block; 
outline:0; 
text-decoration: none; 
position:relative; 
color:#444; 
} 

.topmenu .home, .topmenu .button1, .topmenu .button2 {float: left;} 
.topmenu .home img {vertical-align: top; margin-top:8px; border:none;} 
.topmenu .home:hover a, .topmenu .button1:hover a, .topmenu .button2:hover a 
    {background-color:#333; color:#FFF; z-index:9;} 



.topmenu .subhome, 
.topmenu .submenu1, 
.topmenu .submenu2 
{ 
position: absolute; 
right:0; 
z-index:20; 
display:none; 
background-color:#0e5079;   
text-align: left; 
padding: 20px; 
top:50px; 
color:#999; 
border-radius:3px; 
-moz-box-shadow:1px 2px 12px #333333; 
-webkit-box-shadow:1px 2px 12px #333333; 
box-shadow:1px 2px 12px #333333; 
text-shadow: 
-1px -1px 0 #333,0px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,0px 1px 0 #333,1px 1px 0 #333; 
} 
.topmenu .home:hover .subhome {display:block;} 
.topmenu .button1:hover .submenu1 {display:block;} 
.topmenu .button2:hover .submenu2 {display:block;} 

.topmenu .subhome { 
width:960px; 
height:560px; 
background-image:url(menu/menu-bg/corfu-bw-bg.jpg); 
background-repeat:no-repeat; 
background-position:center;  
    } 
.topmenu .submenu1 { 
background-image:url(menu/menu-bg/benitses-bg.jpg); 
background-repeat:no-repeat; 
background-position:center;  
} 
.topmenu .submenu2 { 
background-image:url(menu/menu-bg/corfu-bg.jpg); 
background-repeat:no-repeat; 
background-position:center;  
} 
.topmenu .submenuleft {padding:20px;float:left;} 
.topmenu .submenuleft span {font-weight:bold; font-size:16px;color:#DDD;line- height:32px;} 
.topmenu .submenuleft a span {font-weight:bold; font-size:16px;color:#FA0;padding- top:5px;padding-bottom:8px;} 
.topmenu .submenuleft a span:hover {color:#FF0; text-decoration:none;} 
.topmenu .submenuleft a:hover {color:#FF0;font-size:14px;text-decoration:none;background:none;} 
.topmenu .submenuleft img {display:block;border:#FFF 2px solid;padding:4px;margin-top:5px;} 

.topmenu .subhome .submenuleft a, 
.topmenu .submenu1 .submenuleft a, 
.topmenu .submenu2 .submenuleft a 
{ 
padding:0px; 
line-height:26px; 
font-size:14px; 
background:none; 
display: inline; 
text-align:left;  
z-index: 0; 
}

和HTML

 <div class="topmenu"> 
<div class="home"><a href="#">HOME</a> 
    <div class="subhome"> 
    </div> 
</div> 
<div class="button1"><a href="#">ITEM1</a> 
    <div class="submenu1" style="width:840px;"> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a> 
     </div> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a> 
     </div> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a> 
     </div> 
     <div class="submenuleft" style="text-align:right;width:130px;"> 
      <img src="menu/benitses-m.jpg" alt="" style="width:128px; height:200px; height:190px;margin-top:5px;"> 
     </div>    
    </div> 
</div> 

<div class="button2"><a href="#">ITEM2</a> 
    <div class="submenu2" style="width:800px;"> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a>     
     </div> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br>     
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a>     
     </div> 
     <div class="submenuleft"> 
        <a href="#">Example link</a><br> 
        <a href="#">Example link</a><br> 
        <a href="#">Example link</a>     
     </div> 
     <div class="submenuleft" style="text-align:right; width:140px;"> 
      <img src="menu/mouse-island.jpg" alt="" style="width:140px; height:210px;"> 
     </div> 
    </div> 
</div>

你可以看到這個菜單的測試例here

謝謝

來源

2013-12-22 user3127709

淡出？在jQuery – niko

您可以使用CSS轉換。只需使用visibility屬性來顯示和隱藏菜單（而不是在block和none之間切換display），指定其上的轉換，您將只將延遲從visible改爲hidden，而不是相反。

顯然你也可以創建一個淡入淡出效果，動畫opacity屬性。

直播例如：http://jsfiddle.net/KVtV7/

樣品的編號：

<ul id="menu"> 
    <li> 
     <a href="">Text</a> 
     <ul> 
      <li><a href="">A</a></li> 
      <li><a href="">B</a></li> 
      <li><a href="">C</a></li> 
      <li><a href="">D</a></li> 
      <li><a href="">E</a></li> 
     </ul> 
    </li> 
</ul>

CSS：

#menu ul{ 
    visibility: hidden; 
    position: absolute; 
    padding: 0; 
    -moz-transition-property: visibility; 
    -moz-transition-duration: 2s; 
    -webkit-transition-property: visibility; 
    -webkit-transition-duration: 2s; 
    transition-property: visibility; 
    transition-duration: 2s; 
} 

#menu li:hover > ul{ 
    visibility: visible; 
}

來源

2013-12-22 19:59:16

使用這種技術，只要用戶在其外面盤旋，子菜單的隱藏就會開始。如果可以接受，那麼這是一個很好的解決方案。 – koenpeters

@koenp我不明白，它應該在什麼時候開始呢？ –

這取決於你想如何發生效果。如果我沒有誤用此技術，則子菜單將在2秒內淡出。如果你不想淡出，但是在用戶用鼠標離開子菜單後2秒瞬間消失，那麼這是行不通的。 – koenpeters

只能使用CSS來隱藏元素（使用：hover）。瀏覽器立即呈現新狀態。你需要一些JavaScript和setTimeout魔法來實現這個功能。

一個簡單的例子就像下面的代碼一樣。我在這裏使用了jQuery，因爲它很緊湊，它提供了一些有用的東西，比如mouseleave事件。

我給每個按鈕div添加了一個類button。

<div class="button1 button"><a href="#">ITEM1</a> 

$('.button').each(function() { 

    // We use closures here so that each button has it's own 'to'. 
    var $that = $(this) 
     ,to; 

    $that.on('mouseleave', function() { 

    // We wait 500 ms using setTimeout 
    to = setTimeout(function() { 
     $that.find('> div').hide(); 
    }, 500); 
    }); 

    $that.on('mouseenter', function() { 

    // Hide all other open submenu's that are potentially open. 
    $('.button > div').hide(); 

    // I use a show here, but you could also keep using your CSS :hover technique. 
    // In that case remove this show call. 
    $that.show(); 
    });

來源

2013-12-22 19:43:58 koenpeters

謝謝，試過但它沒有工作 – user3127709

用3個主要的按鈕的代碼（可以擴展到任何數量的）可以是這樣的，包括圖片和背景圖片等...

HTML

<div class="topmenu"> 
<div class="home"><a href="#">HOME</a> 
    <div class="subhome"> 
    </div> 
</div> 
<div class="button1 sub"><a href="#">ITEM1</a> 
    <div class="submenu1" style="width:840px;"> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a> 
     </div> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a> 
     </div> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a> 
     </div> 
     <div class="submenuleft" style="text-align:right;width:130px;"> 
      <img src="" alt="" style="width:128px; height:200px; height:190px;margin-top:5px;"> 
     </div>    
    </div> 
</div> 

<div class="button2"><a href="#">ITEM2</a> 
    <div class="submenu2" style="width:800px;"> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a>     
     </div> 
     <div class="submenuleft"> 
       <a href="#"><span>LINK TITLE</span></a><br>     
       <a href="#"><span>LINK TITLE</span></a><br> 
       <a href="#">Example link</a><br> 
       <a href="#">Example link</a>     
     </div> 
     <div class="submenuleft"> 
        <a href="#">Example link</a><br> 
        <a href="#">Example link</a><br> 
        <a href="#">Example link</a>     
     </div> 
     <div class="submenuleft" style="text-align:right; width:140px;"> 
      <img src="" alt="" style="width:140px; height:210px;"> 
     </div> 
    </div> 
</div>

和CSS部分

 .home .topmenu .home a, 
     .button1 .topmenu .button1 a, 
     .button2 .topmenu .button2 a { 
     color:#FFF; 
     background-color:#a4472d; 
} 
.topmenu 
{ 
     margin: 0 auto; width: auto;float:left; 
     position:relative; 
     z-index:20; 
     height: 50px; 
     font-family: Arial, Helvetica, sans-serif; 
    font-size:16px; 
    color:#444; 
    } 

    .topmenu a 
{ 
    padding:0 16px; 
    line-height:50px; /*Note: keep this value the same as the height of .topmenu */ 
    font-size:16px; 
    font-weight:normal; 
    display:block; 
    outline:0; 
    text-decoration: none; 
    position:relative; 
color:#444; 
} 

    .topmenu .home, .topmenu .button1, .topmenu .button2 {float: left;} 
    .topmenu .home img {vertical-align: top; margin-top:8px; border:none;} 
    .topmenu .home:hover a, .topmenu .button1:hover a, .topmenu .button2:hover a {background-color:#333; color:#FFF; z-index:9;} 



    .topmenu .subhome, 
    .topmenu .submenu1, 
    .topmenu .submenu2 
{ 
    position: absolute; 
right:0; 
    z-index:20; 
visibility:hidden; 
opacity:0;  **/* use both visibility and opacity */** 
    background-color:#0e5079;   
    text-align: left; 
    padding: 20px; 
    top:50px; 
color:#999; 
border-radius:3px; 
-moz-box-shadow:1px 2px 12px #333333; 
-webkit-box-shadow:1px 2px 12px #333333; 
box-shadow:1px 2px 12px #333333; 
text-shadow: 
-1px -1px 0 #333,0px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,0px 1px 0 #333,1px 1px 0 #333; 

    -moz-transition-property: visibility, opacity; 
    -moz-transition-duration: 2s; 
    -webkit-transition-property: visibility, opacity; 
    -webkit-transition-duration: 2s; 
    transition-property: visibility, opacity; 
    transition-duration: 2s; **/* some changes on transition */** 

    } 
    .topmenu .home:hover .subhome {visibility:visible; opacity:1; z-index:150;} 
    .topmenu .button1:hover .submenu1 {visibility:visible; opacity:1; z-index:150;} 
    .topmenu .button2:hover .submenu2 {visibility:visible; opacity:1; z-index:150; **/* the rise of z-index during topbuttons hover is important */**} 


.topmenu .subhome { 
width:960px; 
height:560px; 
background-image:url(example.jpg); 
background-repeat:no-repeat; 
background-position:center;  
} 
    .topmenu .submenu1 { 
background-image:url(example2.jpg); 
background-repeat:no-repeat; 
background-position:center;  
} 
    .topmenu .submenu2 { 
background-image:url(example3.jpg); 
background-repeat:no-repeat; 
background-position:center;  
} 
    .topmenu .submenuleft {padding:20px;float:left;} 
    .topmenu .submenuleft span {font-weight:bold; font-size:16px;color:#DDD;line-height:32px;} 
    .topmenu .submenuleft a span {font-weight:bold; font-size:16px;color:#FA0;padding-top:5px;padding-bottom:8px;} 
    .topmenu .submenuleft a span:hover {color:#FF0; text-decoration:none;} 
    .topmenu .submenuleft a:hover {color:#FF0;font-size:14px;text-decoration:none;background:none;} 
    .topmenu .submenuleft img {display:block;border:#FFF 2px solid;padding:4px;margin-top:5px;} 

    .topmenu .subhome .submenuleft a, 
    .topmenu .submenu1 .submenuleft a, 
    .topmenu .submenu2 .submenuleft a 
{ 
    padding:0px; 
    line-height:26px; 
    font-size:14px; 
background:none; 
    display: inline; 
    text-align:left;  
    z-index: 0; 
color:#FFF; 
}

來源

2013-12-23 07:41:07

延遲關閉菜單上的子菜單專用divs製作

回答

相關問題