我想構建一個僅限於CSS的菜單。沒有jQuery。懸停時的CSS3滑動菜單

我已經得到這麼多，但不能使菜單從頂部滑入。這裏有一個fiddle（奇怪的是，它看起來並不像我的菜單......但所有的款式都在那裏）

一些代碼：HTML：

<div class="menu"> 
    <ul> 
     <li class="blue"> <a style="text-decoration: none" href="/who-we-are">Who We Are</a> 

     </li> 
     <li class="red"> <a style="text-decoration: none" href="/services">Services</a> 

      <ul> 
       <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a> 

       </li> 
       <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a> 

       </li> 
       <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a> 

       </li> 
      </ul> 
     </li> 
     <li class="orange"><a style="text-decoration: none" href="/packages">Packages</a> 

      <ul> 
       <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a> 

       </li> 
       <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a> 

       </li> 
       <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a> 

       </li> 
      </ul> 
     </li> 
     <li class="green"><a style="text-decoration: none" href="/contact-us">Contact</a> 

     </li> 
    </ul> 
</div>

我的CSS：

.menu { 
    float: left; 
    margin-top: 0px; 
} 
.blue, div.item.blue div { 
    color: #009dc4; 
} 
.red, div.item.red div { 
    color: #fe4f00; 
} 
.orange, div.item.orange div { 
    color: #ff5958; 
} 
.green, div.item.green div { 
    color: #50c402; 
} 
.menu ul li a { 
    display: block; 
    height: 45px; 
    padding-top: 18px; 
} 
.menu ul li a:visited { 
    color: inherit; 
} 
.menu ul { 
    list-style: none; 
    margin: 0; 
} 
.menu ul li { 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    width: 145px; 
    font-family: Georgia; 
    height: 45px; 
    font-size: 20px; 
    line-height: 22px; 
    font-weight: bold; 
    padding-left: 5px; 
    margin-top: 0px; 
    margin-right: 46px; 
    border-bottom: 5px solid; 
    z-index: 5000; 
} 
.menu ul li:hover { 
    color: #ffffff !important; 
} 
.menu ul li.blue:hover { 
    background-color: #009dc4; 
    border-bottom: 5px solid #009dc4; 
} 
.menu ul li.red:hover { 
    background-color: #fe4f00; 
    border-bottom: 5px solid #fe4f00; 
} 
.menu ul li.orange:hover { 
    background-color: #ff5958; 
    border-bottom: 5px solid #ff5958; 
} 
.menu ul li.green:hover { 
    background-color: #50c402; 
    border-bottom: 5px solid #50c402; 
} 
.menu ul li ul { 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 45px; 
} 
.menu ul li ul li { 
    display: block; 
    font-size: 12px; 
    border-bottom: none; 
    width: 145px; 
    color: #ffffff; 
    padding-left: 0px; 
    height: 34px; 
    line-height: normal; 
    position: relative; 
    left: -5px; 
} 
.menu ul li ul li a { 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: normal; 
    height: auto; 
    padding: 10px 5px; 
    font-size: 12px; 
    background-color: #4fc7c1; 
    -webkit-transition: all 0.1s; 
    -moz-transition: all 0.1s; 
    -ms-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s; 
} 
.menu ul li ul li a:hover { 
    background: #a3edf5; 
} 
.menu ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 
.menu > ul > li:last-of-type { 
    margin-right: 0px; 
}

如果有人可以幫助滑下來工作，我會很感激。

來源

2014-10-06 Albert

你的JS小提琴似乎並不試圖包括任何 '滑' 的邏輯，它只是實現了一個 '顯示/隱藏' 技術。從這個觀點來看，你應該首先嚐試一些東西，而不是簡單地讓社區爲你提供一個完整的解決方案。除此之外，我已經爲你提供了一些東西（下面的答案）。 – 2014-10-06 05:46:47

http://jsfiddle.net/mmnUT/ – 2014-10-06 05:48:40

http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu – 2014-10-06 05:49:13

不幸的是，沒有辦法使用CSS（從CSS3開始）將height:0動畫爲height:auto。然而，有一個解決方法使用max-height這裏記錄：http://css3.bradshawenterprises.com/animating_height/

有了這個邏輯，我創建了一個簡單的例子，從你的JS小提琴。它所做的只是在下拉<ul>元素上設置css樣式max-height:0，在菜單懸停上爲max-height css屬性設置了一些轉換，然後設置了大的max-height值。

不幸的是，max-height必須是硬編碼（不能是自動），所以我們在這裏是有限的;但如果你確信你的菜單永遠不會超過500px，那麼你只需要放500px。

這裏的小提琴： http://jsfiddle.net/6ame5wcu/4/

來源

2014-10-06 05:51:31

你的小提琴沒有下滑過渡發生......錯誤的鏈接？ – misterManSam 2014-10-06 05:57:29

好吧，現在你可以有我的upvote; p – Azrael 2014-10-06 06:10:31

所有你需要做的是設置max-height:0;和overflow:hidden;然後在其上添加一個transition這樣的：

.menu ul li ul { 
    max-height:0em; 
    overflow:hidden; 
    position: absolute; 
    top: 45px; 
    transition:max-height .9s ease 
}

上:hover設置max-height即max-height:600px;

.menu ul li:hover ul { 
    max-height:600px; 
}

DEMO

全碼：

<div class="menu"> 
    <ul> 
     <li class="blue"> <a href="/who-we-are">Who We Are</a> 

     </li> 
     <li class="red"> <a href="/services">Services</a> 

      <ul> 
       <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a> 

       </li> 
       <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a> 

       </li> 
       <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a> 

       </li> 
      </ul> 
     </li> 
     <li class="orange"><a href="/packages">Packages</a> 

      <ul> 
       <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a> 

       </li> 
       <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a> 

       </li> 
       <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a> 

       </li> 
      </ul> 
     </li> 
     <li class="green"><a href="/contact-us">Contact</a> 

     </li> 
    </ul> 
</div>

CSS

a{text-decoration: none} 
.menu { 
    float: left; 
    margin-top: 0px; 
} 
.blue, div.item.blue div { 
    color: #009dc4; 
} 
.red, div.item.red div { 
    color: #fe4f00; 
} 
.orange, div.item.orange div { 
    color: #ff5958; 
} 
.green, div.item.green div { 
    color: #50c402; 
} 
.menu ul li a { 
    display: block; 
    height: 45px; 
    padding-top: 18px; 
} 
.menu ul li a:visited { 
    color: inherit; 
} 
.menu ul { 
    list-style: none; 
    margin: 0; 
} 
.menu ul li { 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    width: 145px; 
    font-family: Georgia; 
    height: 45px; 
    font-size: 20px; 
    line-height: 22px; 
    font-weight: bold; 
    padding-left: 5px; 
    margin-top: 0px; 
    margin-right: 46px; 
    border-bottom: 5px solid; 
    z-index: 5000; 
} 
.menu ul li:hover { 
    color: #ffffff !important; 
} 
.menu ul li.blue:hover { 
    background-color: #009dc4; 
    border-bottom: 5px solid #009dc4; 
} 
.menu ul li.red:hover { 
    background-color: #fe4f00; 
    border-bottom: 5px solid #fe4f00; 
} 
.menu ul li.orange:hover { 
    background-color: #ff5958; 
    border-bottom: 5px solid #ff5958; 
} 
.menu ul li.green:hover { 
    background-color: #50c402; 
    border-bottom: 5px solid #50c402; 
} 
.menu ul li ul { 
    max-height:0em; 
    overflow:hidden; 
    position: absolute; 
    top: 45px; 
    transition:max-height .9s ease 
} 
.menu ul li:hover ul { 
    max-height:600px; 
} 
.menu ul li ul li { 
    display: block; 
    font-size: 12px; 
    border-bottom: none; 
    width: 145px; 
    color: #ffffff; 
    padding-left: 0px; 
    height: 34px; 
    line-height: normal; 
    position: relative; 
    left: -5px; 
} 
.menu ul li ul li a { 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: normal; 
    height: auto; 
    padding: 10px 5px; 
    font-size: 12px; 
    background-color: #4fc7c1; 
    -webkit-transition: all 0.1s; 
    -moz-transition: all 0.1s; 
    -ms-transition: all 0.1s; 
    -o-transition: all 0.1s; 
    transition: all 0.1s; 
} 
.menu ul li ul li a:hover { 
    background: #a3edf5; 
} 

.menu > ul > li:last-of-type { 
    margin-right: 0px; 
}

來源

2014-10-06 05:55:10

它的工作原理，但你能提供一個關於它如何在你的答案中的解釋？ – misterManSam 2014-10-06 06:01:21

好吧，我會更新它。 – 2014-10-06 06:02:03

懸停時的CSS3滑動菜單

回答

DEMO

相關問題