動畫子菜單純css

我試圖做一個菜單，其中有3個菜單項和1個子項。如果我點擊第二個項目，應該顯示第一個子項目。但通常不會顯示它。它應該動畫並滑動它。我認爲transition有一種方法，但我不太瞭解CSS3。我想要一個純粹的CSS解決方案。動畫子菜單純css

這裏我的HTML代碼：

<div id="menu"> 
    <ul> 
     <li><a href="#">First</a></li> 
     <li class="active"><a href="#">Second</a> 
      <ul class="child"> 
       <li><a href="#">First child</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Third</a></li> 
    </ul> 
</div>

我創造了這個fiddle。現在，如果我點擊Second菜單項，我想慢慢顯示First child菜單項。

我以前做的唯一的事情是檢查transition但我只是不明白。

有人可以給我一個提示嗎？

乾杯

來源

2013-10-17 Tyler

看到你的jsfiddle更新http://jsfiddle.net/3kEg4/3/

#menu { 
    height: auto; 
    width: auto; 
} 
#menu ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
} 
#menu ul li { 
    float: left; 
    position: relative; 
} 
#menu ul li a { 
    line-height: 30px; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    width: 100px; 
    height: 30px; 
    border: thin solid #999; 
    color: #FFF; 
    background-color: #0CF; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
#menu ul li a:hover { 
    background-color: #0C3; 
} 
#menu ul li ul { 
    position: absolute; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
    height: 0px; 
    overflow:hidden; 
} 
#menu ul li:hover ul { 
    height: 100px; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
}

（從http://jsfiddle.net/ashukasama/2BqGY/啓發）

來源

2013-10-17 21:49:07

這太棒了！非常感謝，那正是我在找的！你救了我的傍晚:)謝謝！ – Tyler

恩，我已經在我的電腦上測試了它（昨天我已經用它測試過了），它在懸停時起作用。你知道一個jQuery腳本，這種效果通過菜單項點擊出現嗎？ – Tyler

Tou可以使用複選框破解，如果你想效果出現在點擊事件看到樣品在這裏：http：//dabblet.com/gist/1507175 –

你可以使用一些CSS3動畫來實現這一效果。

#menu ul li ul{ 
    opacity:0; 
    -webkit-transition: .6s ease; 
    -moz-transition: .6s ease; 
    -ms-transition: .6s ease; 
    -o-transition: .6s ease; 
    height: 0; 
} 

#menu ul li:hover ul { 
    opacity: 1; 
    height: 100px; 
}

JSFIDDLE

無線電活動狀態

JSFIDDLE Radio

Stackoverflow Q

的jQuery

$('.subMenu').on('click', function() { 
    $('.subMenu ul').slideToggle(1000); 
});

JSFIDDLE jQuery

來源

2013-10-17 21:34:25

讓我給這個'ul'添加一些樣式，它看起來真的很棒：p –

可以用'click'而不是'hover'來獲得這個效果嗎？ – Tyler

@rschweri除非您使用複選框hack，否則不能使用純粹的CSS。如果您需要'click'事件，您將需要JS。 1+儘管如此。 –

我認爲這是更好的

#menu ul li ul{ 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s, opacity 0.5s linear; 
    position: absolute; 
} 

#menu ul li:hover ul { 
    visibility: visible; 
    opacity: 1; 
    position: relative; 
}

也相當實用。請添加前綴。希望這可以幫助某人。

來源

2016-09-02 08:34:59 Danish

動畫子菜單純css

回答

相關問題