CSS transition bootstrap导航栏下拉菜单
我想让这样的下拉菜单site menas第一个下拉菜单可以在margin-top 100px中看到,并且过渡到顶部。我使用下面的代码,但不适合我。对不起我的英文不好。CSS transition bootstrap导航栏下拉菜单
<nav class="navbar navbar-default transparent row" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="">menu1</a></li>
<li class="divider-vertical"></li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a>
<ul class="dropdown-menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
.navbar-nav li .dropdown-menu{
width: 160px;
border-top: 4px solid #90cc00;
border-radius: 0;
font-weight: bold;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
margin-top: 90px;
}
.navbar-nav li:hover .dropdown-menu{
margin-top: 0px;
}
为了达到预期的效果,请使用以下选项
HTML:
<nav class="navbar navbar-default transparent row" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="">menu1</a></li>
<li class="divider-vertical"></li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a>
<ul class="dropdown-menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
CSS:
.navbar-nav li .dropdown-menu{
width: 160px;
margin-top: 90px;
visibility:hidden;
}
.navbar-nav li:hover .dropdown-menu{
margin-top: 0px;
visibility:visible;
border-top: 4px solid #90cc00;
border-radius: 0;
font-weight: bold;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
JS: $( '下拉菜单')addClass( '打开');
Codepen -
不适合我和Codepen不工作! – user3243573
可以点击并悬停并确认是否寻找相同的效果? –
检查更新codepen- http://codepen.io/nagasai/pen/XKYKgG希望这适用于你:) –
请分享你的HTML代码 –
我的问题的更新。谢谢 – user3243573