展開子菜單從頂部而非下拉

我有這下顯示子菜單上懸停，像這樣https://jsfiddle.net/z6vur05u/展開子菜單從頂部而非下拉

取而代之的是菜單下的下拉列表中的「標準」導航菜單，我需要的子菜單從頂部推向下移動導航時的頁面。這個最近的例子是，這裏http://callmenick.com/_development/slide-push-menus/（頂部開始生效），但我只是想不出使它工作..

代碼很簡單，乾淨的版本是在這裏：

<div id="menu-wrapper"> 

    <ul class="nav"> 
    <li> 
     <a href="#">Parent</a> 
     <div> 
     <div class="nav-column"> 
      Submenu lists here 
     </div> 
    </li> 
    <li> 
     <a href="#">Parent</a> 
     <div> 
     <div class="nav-column"> 
      Submenu lists here 
     </div> 
    </li> 
    <li> 
     <a href="#">Parent</a> 
     <div> 
     <div class="nav-column"> 
      Submenu lists here 
     </div> 
    </li> 
    <li><a href="#">Parent</a></li> 
    <li><a href="#">Parent</a></li> 
    <li><a href="#">Parent</a></li> 
    </ul> 

</div>

如果有人能幫忙，它意味着很多！我玩絕對/相對定位，但我沒有得到遠，所以任何幫助將不勝感激！

來源

2015-10-08 This and that

也許你應該檢查從鏈接教程/源您提供的？ :) http://callmenick.com/post/slide-and-push-menus-with-css3-transitions – VilleKoo

你能減少CSS嗎？有很多CSS沒有被使用，因此，我找不到合適的編輯線（當然，我可以，但我不想挖掘污點找到黃金）。 – Rvervuurt

好吧，我已經添加了幾行CSS，結果可以看到here。

CSS

.nav > li > div { 
    [..] 
    height: 0; /*added a height*/ 
    [..] 
    top: 0px; /*changed this from 50 to 0*/ 
    [..] 
} 

.nav > li { /*completely new selector, but probably already available somewhere*/ 
    margin-top: 0; /*since the menu has to start at the top*/ 
    transition: margin-top .3s ease .15s;/*same animation as the rest, but only margin-top*/ 
} 

.nav:hover > li { /*completely new selector, but probably already available somewhere*/ 
    margin-top: 250px;/*same height as the menu*/ 

} 

.nav > li:hover > div { 
    [..] 
    height: 250px; /*so it animates from 0 to 250px*/ 
}

有了這個，你是一個良好的開端。你只需要添加一些jQuery或JS來檢查一個菜單點是否有子菜單。如果是的話，添加懸停東西，如果沒有，則不要。現在它運行每個菜單點懸停的效果。

來源

2015-10-08 12:40:04 Rvervuurt

非常感謝您的幫助，但我無法看到您的鏈接上的任何內容，它的行爲就像它一樣。您確定鏈接正確嗎？ –

這很奇怪！但它現在應該工作:)在某種程度上，它並沒有在小提琴上的更新2中保存任何內容，但它在更新3中進行了。 – Rvervuurt

這裏的小提琴：JSBIN

添加的jQuery
刪除position:relative從.nav類
變化position:relative到position:absolute類.nav > li > div
的添加以下類屬性沿你的css

.hovered { margin-top:215px; transition: all 1s; }

4.增加這一塊的jQuery在HTML文件中

$(function() { 
$('.nav li').hover(function(){ 
    $(this).parent().parent().addClass("hovered"); 
}, 
function(){ 
    $(this).parent().parent().removeClass("hovered"); 
}); 
});

來源

2015-10-08 12:58:03

展開子菜單從頂部而非下拉

回答

相關問題