Анимация выпадающего меню Bootstrap Navbar
Анимация выпадающего меню для Bootstrap Navbar. Простой сниппет Бутстрап для создания анимированного выпадающего меню навигационных панелей Bootstrap 4.
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Animated Dropdown</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me!
</a>
<!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
<div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<h1 class="mt-5 text-white font-weight-light">Animated Bootstrap Navbar Dropdowns</h1>
<p class="lead text-white-50">An attractive yet subtle dropdown animation for dropdown menus loacated within a Bootstrap navbar</p>
</div>
CSS
/* Change this breakpoint if you change the breakpoint of the navbar */
@media (min-width: 992px) {
.animate {
animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform:translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-webkit-opacity: 1;
}
0% {
-webkit-transform: translateY(1rem);
-webkit-opacity: 0;
}
}
.slideIn {
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
/* Other styles for the page not related to the animated dropdown */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Заголовок верхнего уровня в HTML