http://www.inc.com/下拉菜單效果

-3

我想實現從http://www.inc.com/http://www.inc.com/下拉菜單效果

下降和隱藏菜單效果，這是我目前的小提琴http://jsfiddle.net/elementhttp/56ThC/

$("#1").mouseover(function(){ 
    //alert("aaaaaaaaaa"); just for testing 
    $(".block2").stop().fadeToggle(700); 
    }); 
$("#1").mouseout(function(){  
    $(".block2").stop().fadeToggle(700); 
    }); 

$(".menu2").mouseover(function(){ 
    //alert("aaaaaaaaaa"); 
    $(".con2").stop().fadeToggle(700); 
    }); 
$(".menu2").mouseout(function(){  
    $(".con2").stop().fadeToggle(700); 
    });

目前，當你將鼠標懸停在菜單發生1個褪色，但它不解決這個神祕的幫助保持顯示

感謝：d

來源

2014-01-21 Ivan

爲什麼負面評級？只是給我一個改進提示，不是一個完整的代碼 – Ivan

請指定你想在你的問題中用實際詞語來達到的效果，而不是指向'inc.com'的鏈接，不管它可能是什麼。請詳細說明究竟哪些不適用於您的當前代碼。 –

拖放和顯示/隱藏菜單效果代碼不起作用，因爲我需要幫助實現該效果。當您將鼠標懸停在菜單上時，它會下降並顯示我需要的內容，以便不要立即隱藏 – Ivan

由於您的子菜單都沒有頂部菜單的孩子的，每次將鼠標移出菜單時都會調用「鼠標移出」事件。

我修正了你的HTML，Javascript和CSS，並清除了一些代碼給你的例子（http://jsfiddle.net/56ThC/1/）。

<body> 
<div class="block"> 
    <div class="box" id="1"> 
     menu1 
     <div class="submenu" id="1"> 
      <div class="box2">item1_1</div> 
      <div class="box2">item1_2</div> 
      <div class="box2">item1_3</div> 
      <div class="box2">item1_4</div> 
      <div class="box2">item1_5</div> 
     </div> 
    </div> 
    <div class="box " id="2"> 
     menu2 
     <div class="submenu" id="2"> 
      <div class="box2">item2_1</div> 
      <div class="box2">item2_2</div> 
      <div class="box2">item2_3</div> 
      <div class="box2">item2_4</div> 
      <div class="box2">item2_5</div> 
     </div> 
    </div> 
    <div class="box" id="3"> 
     menu3 
    </div> 
    <div class="box" id="4"> 
     menu4 
    </div> 
    <div class="box" id="5"> 
     menu5 
    </div> 

</div>

的Javascript：

$('.submenu').hide(); 


$(".box").hover(function(){ 
    $(this).find(".submenu").stop().fadeToggle(700); 
});

CSS：

.block{ 
    width: 615px; 
    border: solid 1px #aaa; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
} 
.box{ 
    width: 100px; 
    height: 50px; 
    border: solid 1px #ccc; 
    display: inline-block; 
    vertical-align: middle;   
} 
.submenu{ 
    width: 615px; 
    height:300px; 
    position:absolute;left:8px;top:60px; 
    border: solid 1px #aaa; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
      } 
.box2{ 
    width: 200px; 
    height: 200px; 
    border: solid 1px #ccc; 
    display: inline-block; 
    vertical-align: middle;   
      }

希望這有助於！

來源

2014-01-21 22:55:48 Yani

這是一種方式去去感謝你亞尼！ – Ivan

很高興能幫到你！ – Yani

嗨亞尼如何對齊這是屏幕效果的中心，當我嘗試對齊中心或邊距自動效果子菜單是錯位的 – Ivan

http://www.inc.com/下拉菜單效果

回答

相關問題