2017-05-26 10 views
0

私はドロップダウンメニューを作成しましたが、このドロップダウンをアニメーション表示で上にスライドさせたいと思います。誰でも助けてくれますか?ブートストラップ以外にカスタムドロップダウンを行う方法

$('.need-help').click(function() { 
 
    $('.need_help_dropdown').slideToggle(); 
 
});
.need-help { 
 
    background:url(../images/need-help.png) no-repeat; color:#000; width:100px; 
 
    text-align:center; 
 
    text-transform:uppercase; 
 
    padding-top: 10px; 
 
    padding-bottom: 4px; 
 
    float:right; 
 
    margin-top:190px; 
 
} 
 
.need-help i { 
 
    font-size:20px; 
 
} 
 
.need_help_dropdown { 
 
    padding:0; 
 
    display:none; 
 
    background:#ccc; 
 
} 
 
.need_help_dropdown li { 
 
    display:block; 
 
    background:#eb3b2a; 
 
    border-bottom:1px solid #fff; 
 
} 
 
.need_help_dropdown li a { 
 
    color:#fff; 
 
    text-decoration:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="need-help"> 
 
    <i class="fa fa-question-circle"></i> 
 
    <br/> 
 
    Need help 
 

 
    <ul class="need_help_dropdown"> 
 
     <li><a href="#">FAQ</a></li> 
 
     <li><a href="#">Bug or Feedback</a></li> 
 
     <li><a href="#">Close</a></li> 
 
    </ul> 
 
</div>

答えて

0

私は私の解決策を更新しましたUser113 @

.need_help_dropdown { 
    padding:0; 
    display:none; 
    background:#ccc; 
    position:absolute; 
    bottom:0; 
} 
+0

以下のようにそれを確認してください、このCSS、このアップデートで

使用してみてください –

関連する問題