使用动画引导自定义下拉列表

Question

有人知道如何使引导下拉列表看起来像这样吗？

我的问题是自定义基本下拉菜单以使边框消失，并使底部蓝线在打开时缓慢向下移动。

http://prntscr.com/g3u587

谢谢你的回答。

Answer 1

你可以用CSS尝试这样的东西

.CSS

.dropdown-toggle{
border:none;
background-color: transparent;
outline:0;
}
.dropdown-toggle:active{
box-shadow:none;
}
.btn.dropdown-toggle:focus{
outline:0;
}
.dropdown-toggle[aria-expanded="true"] .caret{
transform:rotate(180deg);
transition:all ease 0.5s;
}
.dropdown-toggle .caret{
transition:all ease 0.5s;
}
.dropdown .dropdown-menu{
height:0;
padding:0;
overflow:hidden;
margin:0;
display:block;
border:none;
box-shadow:2px 2px 2px rgba(33,150,243,0.2);
border-bottom:1px solid #2196F3;
transition:all ease 0.5s;
border-radius:0px;
padding-left:2px;
padding-right:2px;
}
.dropdown.open > .dropdown-menu{
height:auto;
}
.dropdown.open > .dropdown-menu > li a:hover{
background-color: #2196F3;
border-radius:5px;
color:#fff;
}

.HTML

<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>

参考链接

风格相应。

希望这有帮助..