5+ Bootstrap Dropdown Menu Examples

This post contains a total of 5+ Hand-Picked Bootstrap Dropdown Menu Examples with Source Code. All these Dropdown Menus are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Dropdown Menu Examples

1. By Darrion Ramdin

Made by Darrion Ramdin. Responsive Bootstrap Dropdown menu with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-wrapper">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span>toggle</span></button>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
          <ul class="nav navbar-nav navbar-items">
            <li class="dropdown"><a href="#">Home</a>
              <ul class="dropdown-menu">
                <li><a href="#">Home grid layout</a></li>
                <li><a href="#">Home list layout</a></li>
              </ul>
            </li>
            <li class="dropdown"><a href="#">Posts</a>
              <ul class="dropdown-menu">
                <li><a href="#">Gallery Post</a></li>
                <li><a href="#">Video Post</a></li>
                <li><a href="#">Audio Post</a></li>
                <li><a href="#">Quote Post</a></li>
              </ul>
            </li>
            <li><a href="#">Fashion</a></li>
            <li><a href="#">Health</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
      <script>

$(".navbar-items > li").hover(
function () {
  $(this).addClass("open");
},
function () {
  $(this).removeClass("open");
});
//# sourceURL=pen.js
    </script>
</body>
</html>

2. By Bram de Haan

Made by Bram de Haan. Simple Bootstrap Dropdown menu with Hamburger Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css'>
  
<style>
@charset "UTF-8";
.navbar-collapse .navbar-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown-menu > li > a {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

@media (max-width: 767px) {
  .navbar-default {
    max-height: 80px;
  }
}

@media (max-width: 767px) {
  .navbar-header {
    padding: 1em 0;
    max-height: 80px;
  }
}

.navbar-collapse[style] {
  height: 0 !important;
}

.navbar-collapse {
  font-size: 12px;
}
@media (max-width: 767px) {
  .navbar-collapse {
    border: none;
  }
}

@media (max-width: 767px) {
  .navbar-collapse .navbar-nav {
    position: absolute;
    top: 0;
    right: 0;
    margin: 80px 0 0 0;
    padding: 0;
    overflow: hidden;
    min-width: 13em;
  }
}
@media (min-width: 768px) {
  .navbar-collapse .navbar-nav {
    float: right;
  }
}

/* NAV LIST ITEMS */
@media (min-width: 768px) {
  .navbar-nav .dropdown {
    min-width: 7em;
    margin-left: 1px;
  }
}

@media (min-width: 768px) {
  .navbar-nav .dropdown:first-child,
.navbar-nav .dropdown:last-child {
    min-width: 6.5em;
  }
}

@media (min-width: 768px) {
  .navbar-nav .dropdown:first-child {
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-nav .dropdown:last-child {
    margin-right: 0;
  }
}

/* NAV LINKS */
.dropdown-toggle {
  background-color: #111;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .dropdown-toggle {
    transition: background-color 0.25s;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    text-align: center;
  }
  .dropdown-toggle:hover {
    background-color: #f53200;
  }
}
@media (min-width: 1200px) {
  .dropdown-toggle {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.dropdown-menu > li > a {
  padding-left: 1em !important;
  padding-right: 1em !important;
  line-height: 3 !important;
  transition: background-color 0.25s, color 0.5s 0.25s, border-color 0.75s 1s;
}
@media (max-width: 767px) {
  .dropdown-menu > li > a {
    background-color: #333;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
}
@media (min-width: 768px) {
  .dropdown-menu > li > a {
    color: transparent;
    background-color: transparent;
  }
}

.open .dropdown-menu a {
  border-top-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.95);
}
@media (min-width: 768px) {
  .open .dropdown-menu a {
    color: #fff;
  }
}

/* TOGGLE BUTTON */
.navbar-default .navbar-toggle {
  background-color: #444;
  width: 22px;
  height: 100%;
  width: 3em;
  height: 2.5em;
  position: relative;
}
.navbar-default .navbar-toggle:before, .navbar-default .navbar-toggle:after {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 1;
  z-index: 1;
}
.navbar-default .navbar-toggle:before {
  content: " Γ—";
  border: none;
  box-shadow: none;
  font-size: 32px;
  color: #f53200;
}
.navbar-default .navbar-toggle:after {
  content: "Menu";
  position: absolute;
  margin-top: -18px;
  color: #000;
}

.navbar-default .collapsed:before {
  content: "";
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  box-shadow: 0 4px 0 0 #444, 0 6px 0 0 #ccc;
  margin: 10px 8px 15px;
}
.navbar-default .collapsed:hover, .navbar-default .collapsed:focus {
  border-color: #777;
}
.navbar-default .collapsed:hover:before, .navbar-default .collapsed:focus:before {
  border-top: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  box-shadow: 0 4px 0 0 #ddd, 0 6px 0 0 #aaa;
}

/* Submenu */
.navbar-nav .dropdown-menu {
  display: block;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  list-style: none;
  text-transform: uppercase;
  transition: padding-bottom 0.75s cubic-bezier(0.6, 0.4, 0.25, 0.75), background-color 2s;
}
@media (max-width: 767px) {
  .navbar-nav .dropdown-menu {
    display: block;
    font-size: 11px;
    position: static;
    left: auto;
    margin: 0;
  }
}
@media (min-width: 768px) {
  .navbar-nav .dropdown-menu {
    left: -9999px;
    display: block;
    font-size: 12px;
    min-width: 176px;
    background-color: rgba(0, 0, 0, 0.5);
    margin-top: -1px !important;
  }
}

@media (min-width: 768px) {
  .dropdown:last-of-type .dropdown-menu {
    margin-left: -85%;
  }
}

@media (min-width: 768px) {
  .open .dropdown-menu {
    left: 0;
    right: 0;
    background-color: rgba(51, 51, 51, 0.96);
  }
}

@media (min-width: 768px) {
  .navbar-collapse .caret {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
}

.open[class*=itemcount-1] .dropdown-menu {
  padding-bottom: 44px;
}

.open[class*=itemcount-2] .dropdown-menu {
  padding-bottom: 88px;
}

.open[class*=itemcount-3] .dropdown-menu {
  padding-bottom: 132px;
}

.open[class*=itemcount-4] .dropdown-menu {
  padding-bottom: 176px;
}

.open[class*=itemcount-5] .dropdown-menu {
  padding-bottom: 220px;
}

.open[class*=itemcount-6] .dropdown-menu {
  padding-bottom: 264px;
}

.open[class*=itemcount-7] .dropdown-menu {
  padding-bottom: 308px;
}

.open[class*=itemcount-8] .dropdown-menu {
  padding-bottom: 352px;
}

.open[class*=itemcount-9] .dropdown-menu {
  padding-bottom: 396px;
}

.open[class*=itemcount-10] .dropdown-menu {
  padding-bottom: 440px;
}

h1 {
  text-transform: none;
  color: #000000;
  font-family: "Noto Serif", "Lucida Bright", Georgia, serif;
  font-weight: 400;
  letter-spacing: -1px;
  word-spacing: 1px;
  line-height: 1;
  margin: -0.125em 0 0 0;
}

html {
  font-size: 16px;
}

body {
  font: 14px/1.375 "Noto Sans", "Lucida Grande", "Lucida Unicode", "Calibri", sans-serif;
}
</style>
</head>
<body>
  <div class="navbar navbar-default navbar-static-top" role="navigation">

  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <a class="navbar-brand" href="#"><h1>Website Name</h1></a>
    </div>
    <nav class="navbar-collapse collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown active" id="tt-home"><a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Home <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Awards</a></li>
          <li><a href="#!">Beyond</a></li>
          <li><a href="#!">Beyond Children</a></li>
          <li><a href="#!">Beyond Love Within</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-blog">
        <a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Blog <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Biography</a></li>
          <li><a href="#!">Interviews</a></li>
          <li><a href="#!">Links</a></li>
          <li><a href="#!">Lyrics</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-books"><a href="#!" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" data-target="#">Books <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Flagg Grove School</a></li>
          <li><a href="#!">Magazines</a></li>
          <li><a href="#!">My Collection</a></li>
          <li><a href="#!">Songbooks</a></li>
          <li><a href="#!">Tourbooks</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-goodies">
        <a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Goodies  <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Drawings</a></li>
          <li><a href="#!">Ecards</a></li>
          <li><a href="#!">Fanmap</a></li>
          <li><a href="#!">Fans-Tina</a></li>
          <li><a href="#!">General</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-media">
        <a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Media <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!Albums</a></li>
          <li><a href="#!">Albums-Extended</a></li>
          <li><a href="#!">7 Inch Singles</a></li>
          <li><a href="#!">12 Inch Maxi Singles</a></li>
          <li><a href="#!">CD Singles</a></li>
          <li><a href="#!">DVD-VHS-Blu-Ray</a></li>
          <li><a href="#!">Videos with others</a></li>
          <li><a href="#!">LP's</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-news"><a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">News <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!">Film</a></li>
          <li><a href="#!">Photos</a></li>
          <li><a href="#!">Tour Photos 2008-2009</a></li>
          <li><a href="#!">Tours</a></li>
          <li><a href="#!">Videos</a></li>
        </ul>
        </li>
        <li class="dropdown" id="tt-contact"><a href="#!" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">Contact <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#!" target="_blank">Appearances</a></li>
          <li><a href="#!">Credits</a></li>
          <li><a href="#!">Donation</a></li>
          <li><a href="#!" target="_blank">Forum</a></li>
        </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js'></script>
      <script>
/**
 * @preserve
 * Project: Bootstrap Hover Dropdown
 * Author: Cameron Spear
 * Version: v2.0.11
 * Contributors: Mattia Larentis
 * Dependencies: Bootstrap's Dropdown plugin, jQuery
 * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
 * License: MIT
 * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
 */
;(function ($, window, undefined) {
  // outside the scope of the jQuery plugin to
  // keep track of all dropdowns
  var $allDropdowns = $();

  // if instantlyCloseOthers is true, then it will instantly
  // shut other nav items when a new one is hovered over
  $.fn.dropdownHover = function (options) {
    // don't do anything if touch is supported
    // (plugin causes some issues on mobile)
    // bram outcomment
    if ('ontouchstart' in document) return this; // don't want to affect chaining

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function () {
      var $this = $(this),
      $parent = $this.parent(),
      defaults = {
        delay: 500,
        instantlyCloseOthers: true },

      data = {
        delay: $(this).data('delay'),
        instantlyCloseOthers: $(this).data('close-others') },

      showEvent = 'show.bs.dropdown',
      hideEvent = 'hide.bs.dropdown',
      // shownEvent  = 'shown.bs.dropdown',
      // hiddenEvent = 'hidden.bs.dropdown',
      settings = $.extend(true, {}, defaults, options, data),
      timeout;

      $parent.hover(function (event) {
        // so a neighbor can't open the dropdown
        if (!$parent.hasClass('open') && !$this.is(event.target)) {
          // stop this event, stop executing any code
          // in this callback but continue to propagate
          return true;
        }

        openDropdown(event);
      }, function () {
        timeout = window.setTimeout(function () {
          $parent.removeClass('open');
          $this.trigger(hideEvent);
        }, settings.delay);
      });

      // this helps with button groups!
      $this.hover(function (event) {
        // this helps prevent a double event from firing.
        // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
        if (!$parent.hasClass('open') && !$parent.is(event.target)) {
          // stop this event, stop executing any code
          // in this callback but continue to propagate
          return true;
        }

        openDropdown(event);
      });

      // handle submenus
      $parent.find('.dropdown-submenu').each(function () {
        var $this = $(this);
        var subTimeout;
        $this.hover(function () {
          window.clearTimeout(subTimeout);
          $this.children('.dropdown-menu').show();
          // always close submenu siblings instantly
          $this.siblings().children('.dropdown-menu').hide();
        }, function () {
          var $submenu = $this.children('.dropdown-menu');
          subTimeout = window.setTimeout(function () {
            $submenu.hide();
          }, settings.delay);
        });
      });

      function openDropdown(event) {
        $allDropdowns.find(':focus').blur();

        if (settings.instantlyCloseOthers === true)
        $allDropdowns.removeClass('open');

        window.clearTimeout(timeout);
        $parent.addClass('open');
        $this.trigger(showEvent);
      }
    });
  };

  $(document).ready(function () {
    // apply dropdownHover to all elements with the data-hover="dropdown" attribute
    $('[data-hover="dropdown"]').dropdownHover();


  });
})(jQuery, this);
/* End Bootstrap Hover Dropdown jQuery plugin by Cameron Spear
 *
 *  Begin custom slidedown by Atelierbram **/
$(document).ready(function () {

  var itms = {
    home: $("#tt-home li").length,
    blog: $("#tt-blog li").length,
    books: $("#tt-books li").length,
    goodies: $("#tt-goodies li").length,
    media: $("#tt-media li").length,
    news: $("#tt-news li").length,
    contact: $("#tt-contact li").length };


  // add a class on the parent element with the appropriate value for the number of list-items
  jQuery.each(itms, function (i, val) {
    $("#tt-" + i).addClass('tt-nav__itemcount-' + val);
  });

  // make the top toggle-links clickable, [read more about this here](https://github.com/atelierbram/bootstrap-hover-dropdown)
  // effectively make create two dropdowns: this is for touch
  $('.dropdown').on({

    'hide.bs.dropdown': function (e) {

      $(this).on('click', function (e) {
        var self = $(this);
        $(this).toggleClass('is-clicked').siblings('.dropdown').removeClass('is-clicked');

        if ('ontouchstart' in document && self.hasClass('open', 'is-clicked')) {
          e.stopPropagation();
        } else
        {
          return this;
        }
      });
    } });



  // effectively make create two dropdowns: this is for desktop - or to be precise: non-touch
  $('.dropdown').on({

    'show.bs.dropdown': function (e) {

      $(this).on('click', function (e) {

        if ('ontouchstart' in document) {
          return this;
        } else
        {
          e.stopPropagation();
        }
      });
    } });
});
    </script>
</body>
</html>

3. By Gohar Zaprosyan

Made by Gohar Zaprosyan. Dropdown menu with Dark Mode. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');

/* #Primary
================================================== */

body{
    font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #212112;
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 7%;
	background-color: #fff;
	overflow-x: hidden;
    transition: all 200ms linear;
}
::selection {
	color: #fff;
	background-color: #8167a9;
}
::-moz-selection {
	color: #fff;
	background-color: #8167a9;
}


/* #Navigation
================================================== */

.start-header {
	opacity: 1;
	transform: translateY(0);
	padding: 10px 0;
	box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
	padding: 5px 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img{
	height: 28px;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar{
	padding: 0;
}
.navbar-brand img{
	height: 52px;
	width: auto;
	display: block;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar-toggler {
	float: right;
	border: none;
	padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
	outline: none;
}
.navbar-light .navbar-toggler-icon {
	width: 24px;
	height: 17px;
	background-image: none;
	position: relative;
	border-bottom: 1px solid #000;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after, 
.navbar-light .navbar-toggler-icon:before{
	width: 24px;
	position: absolute;
	height: 1px;
	background-color: #000;
	top: 0;
	left: 0;
	content: '';
	z-index: 2;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after{
	top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}
.nav-link{
	color: #212121 !important;
	font-weight: 500;
    transition: all 200ms linear;
}
.nav-item:hover .nav-link{
	color: #8167a9 !important;
}
.nav-item.active .nav-link{
	color: #777 !important;
}
.nav-link {
	position: relative;
	padding: 5px 0 !important;
	display: inline-block;
}
.nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background-color: #8167a9;
	opacity: 0;
    transition: all 200ms linear;
}
.nav-item:hover:after{
	bottom: 0;
	opacity: 1;
}
.nav-item.active:hover:after{
	opacity: 0;
}
.nav-item{
	position: relative;
    transition: all 200ms linear;
}

/* #Primary style
================================================== */

.bg-light {
	background-color: #fff !important;
    transition: all 200ms linear;
}
.section {
    position: relative;
	width: 100%;
	display: block;
}
.full-height {
    height: 100vh;
}
.over-hide {
    overflow: hidden;
}
.absolute-center {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
  margin-top: 40px;
	transform: translateY(-50%);
	z-index: 20;
}
h1{
	font-size: 48px;
	line-height: 1.2;
	font-weight: 700;
	color: #212112;
	text-align: center;
}
p{
	text-align: center;
	margin: 0;
	padding-top: 10px;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
    transition-delay: 1700ms;
}
body.hero-anime p{
	opacity: 0;
	transform: translateY(40px);
    transition-delay: 1700ms;
}
h1 span{
	display: inline-block;
    transition: all 300ms linear;
	opacity: 1;
	transform: translate(0);
}
body.hero-anime h1 span:nth-child(1){
	opacity: 0;
	transform: translateY(-20px);
}
body.hero-anime h1 span:nth-child(2){
	opacity: 0;
	transform: translateY(-30px);
}
body.hero-anime h1 span:nth-child(3){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(4){
	opacity: 0;
	transform: translateY(-10px);
}
body.hero-anime h1 span:nth-child(5){
	opacity: 0;
	transform: translateY(-50px);
}
body.hero-anime h1 span:nth-child(6){
	opacity: 0;
	transform: translateY(-20px);
}
body.hero-anime h1 span:nth-child(7){
	opacity: 0;
	transform: translateY(-40px);
}
body.hero-anime h1 span:nth-child(8){
	opacity: 0;
	transform: translateY(-10px);
}
body.hero-anime h1 span:nth-child(9){
	opacity: 0;
	transform: translateY(-30px);
}
body.hero-anime h1 span:nth-child(10){
	opacity: 0;
	transform: translateY(-20px);
}
h1 span:nth-child(1){
    transition-delay: 1000ms;
}
h1 span:nth-child(2){
    transition-delay: 700ms;
}
h1 span:nth-child(3){
    transition-delay: 900ms;
}
h1 span:nth-child(4){
    transition-delay: 800ms;
}
h1 span:nth-child(5){
    transition-delay: 1000ms;
}
h1 span:nth-child(6){
    transition-delay: 700ms;
}
h1 span:nth-child(7){
    transition-delay: 900ms;
}
h1 span:nth-child(8){
    transition-delay: 800ms;
}
h1 span:nth-child(9){
    transition-delay: 600ms;
}
h1 span:nth-child(10){
    transition-delay: 700ms;
}
body.hero-anime h1 span:nth-child(11){
	opacity: 0;
	transform: translateY(30px);
}
body.hero-anime h1 span:nth-child(12){
	opacity: 0;
	transform: translateY(50px);
}
body.hero-anime h1 span:nth-child(13){
	opacity: 0;
	transform: translateY(20px);
}
body.hero-anime h1 span:nth-child(14){
	opacity: 0;
	transform: translateY(30px);
}
body.hero-anime h1 span:nth-child(15){
	opacity: 0;
	transform: translateY(50px);
}
h1 span:nth-child(11){
    transition-delay: 1300ms;
}
h1 span:nth-child(12){
    transition-delay: 1500ms;
}
h1 span:nth-child(13){
    transition-delay: 1400ms;
}
h1 span:nth-child(14){
    transition-delay: 1200ms;
}
h1 span:nth-child(15){
    transition-delay: 1450ms;
}
#switch,
#circle {
	cursor: pointer;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
#switch {
	width: 60px;
	height: 8px;
	border: 2px solid #8167a9;
	border-radius: 27px;
	background: #000;
	position: relative;
	display: block;
	margin: 0 auto;
	text-align: center;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
    transition-delay: 1900ms;
}
body.hero-anime #switch{
	opacity: 0;
	transform: translateY(40px);
    transition-delay: 1900ms;
}
#circle {
	position: absolute;
	top: -11px;
	left: -13px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #000;
}
.switched {
	border-color: #000 !important;
	background: #8167a9 !important;
}
.switched #circle {
	left: 43px;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #fff;
}
.nav-item .dropdown-menu {
    transform: translate3d(0, 10px, 0);
    visibility: hidden;
    opacity: 0;
	max-height: 0;
    display: block;
	padding: 0;
	margin: 0;
    transition: all 200ms linear;
}
.nav-item.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
	max-height: 999px;
    transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
	padding: 10px!important;
	margin: 0;
	font-size: 13px;
	letter-spacing: 1px;
	color: #212121;
	background-color: #fcfaff;
	border: none;
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
    transition: all 200ms linear;
}
.dropdown-toggle::after {
	display: none;
}

.dropdown-item {
	padding: 3px 15px;
	color: #212121;
	border-radius: 2px;
    transition: all 200ms linear;
}
.dropdown-item:hover, 
.dropdown-item:focus {
	color: #fff;
	background-color: rgba(129,103,169,.6);
}

body.dark{
	color: #fff;
	background-color: #1f2029;
}
body.dark h1{
	color: #fff;
}
body.dark h1 span{
    transition-delay: 0ms !important;
}
body.dark p{
	color: #fff;
    transition-delay: 0ms !important;
}
body.dark .bg-light {
	background-color: #14151a !important;
}
body.dark .start-header {
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}
body.dark .start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
body.dark .nav-link{
	color: #fff !important;
}
body.dark .nav-item.active .nav-link{
	color: #999 !important;
}
body.dark .dropdown-menu {
	color: #fff;
	background-color: #1f2029;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
}
body.dark .dropdown-item {
	color: #fff;
}
body.dark .navbar-light .navbar-toggler-icon {
	border-bottom: 1px solid #fff;
}
body.dark .navbar-light .navbar-toggler-icon:after, 
body.dark .navbar-light .navbar-toggler-icon:before{
	background-color: #fff;
}
body.dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}



/* #Media
================================================== */

@media (max-width: 767px) { 
	h1{
		font-size: 38px;
	}
	.nav-item:after{
		display: none;
	}
	.nav-item::before {
		position: absolute;
		display: block;
		top: 15px;
		left: 0;
		width: 11px;
		height: 1px;
		content: "";
		border: none;
		background-color: #000;
		vertical-align: 0;
	}
	.dropdown-toggle::after {
		position: absolute;
		display: block;
		top: 10px;
		left: -23px;
		width: 1px;
		height: 11px;
		content: "";
		border: none;
		background-color: #000;
		vertical-align: 0;
		transition: all 200ms linear;
	}
	.dropdown-toggle[aria-expanded="true"]::after{
		transform: rotate(90deg);
		opacity: 0;
	}
	.dropdown-menu {
		padding: 0 !important;
		background-color: transparent;
		box-shadow: none;
		transition: all 200ms linear;
	}
	.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
		margin-top: 10px !important;
		margin-bottom: 20px !important;
	}
	body.dark .nav-item::before {
		background-color: #fff;
	}
	body.dark .dropdown-toggle::after {
		background-color: #fff;
	}
	body.dark .dropdown-menu {
		background-color: transparent;
		box-shadow: none;
	}
}

/* #Link to page
================================================== */

.link-to-portfolio {
	  position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 200;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: cover;
    background-image: url('https://ivang-design.com/ig-logo.jpg');
    box-shadow: 0 0 0 2px rgba(12,12,12,.1);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(12,12,12,.1);
}
</style>
</head>
<body>
  <body class="hero-anime">	

	<div class="navigation-wrap bg-light start-header start-style">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<nav class="navbar navbar-expand-md navbar-light">
					
						<a class="navbar-brand" href="https://themeforest.net/user/ig_design/portfolio" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/logo.svg" alt=""></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 py-4 py-md-0">
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4 active">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Home</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<a class="dropdown-item" href="#">Another action</a>
									</div>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">Portfolio</a>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">Agency</a>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Services</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<a class="dropdown-item" href="#">Another action</a>
									</div>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">Journal</a>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">Contact</a>
								</li>
							</ul>
						</div>
						
					</nav>		
				</div>
			</div>
		</div>
	</div>
	<div class="section full-height">
		<div class="absolute-center">
			<div class="section">
				<div class="container">
					<div class="row">
						<div class="col-12">
				<h1><span>B</span><span>o</span><span>o</span><span>t</span><span>s</span><span>t</span><span>r</span><span>a</span><span>p</span> <span>4</span><br>
				<span>m</span><span>e</span><span>n</span><span>u</span></h1>
				<p>scroll for nav animation</p>	
						</div>	
					</div>		
				</div>		
			</div>
			<div class="section mt-5">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<div id="switch">
								<div id="circle"></div>
							</div>
						</div>	
					</div>		
				</div>			
			</div>
		</div>
	</div>
	<div class="my-5 py-5">
	</div>
  
<!-- Link to page
================================================== -->

<a href="https://themeforest.net/user/ig_design/portfolio"      class="link-to-portfolio" target=”_blank”></a>

</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>

(function ($) {"use strict";

  $(function () {
    var header = $(".start-style");
    $(window).scroll(function () {
      var scroll = $(window).scrollTop();

      if (scroll >= 10) {
        header.removeClass('start-style').addClass("scroll-on");
      } else {
        header.removeClass("scroll-on").addClass('start-style');
      }
    });
  });

  //Animation

  $(document).ready(function () {
    $('body.hero-anime').removeClass('hero-anime');
  });

  //Menu On Hover

  $('body').on('mouseenter mouseleave', '.nav-item', function (e) {
    if ($(window).width() > 750) {
      var _d = $(e.target).closest('.nav-item');_d.addClass('show');
      setTimeout(function () {
        _d[_d.is(':hover') ? 'addClass' : 'removeClass']('show');
      }, 1);
    }
  });

  //Switch light/dark

  $("#switch").on('click', function () {
    if ($("body").hasClass("dark")) {
      $("body").removeClass("dark");
      $("#switch").removeClass("switched");
    } else
    {
      $("body").addClass("dark");
      $("#switch").addClass("switched");
    }
  });

})(jQuery);
    </script>
</body>
</html>
 

4. By Pramod Choudhari

Made by Pramod Choudhari. Twitter Bootstrap Dropdown with Hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css'>
</head>
<body>
  <div class="btn-group">
                <button class="btn btn-large">Large action</button>
                <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
      <script>
jQuery(function ($) {
  $('.btn-group').hover(function () {
    $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
  }, function () {
    $(this).find('.dropdown-menu').first().stop(true, true).delay(500).slideUp();
  });});
//# sourceURL=pen.js
    </script>
</body>
</html>

5. By Daniel Lemky

Made by Daniel Lemky. A simple bootstrap dropdown menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
</head>
<body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
 
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

</body>
</html>

6. By Ollie

Made by Ollie. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
.navbar .popover {
    width: 400px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    overflow: hidden;
}

.navbar .popover-content {
    text-align: center;
}

.navbar .popover-content img {
    height: 212px;
    max-width: 250px;
}

.navbar .dropdown-menu {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.navbar .dropdown-menu > li > a:hover {
    background-image: none;
    color: white;
    background-color: rgb(0, 129, 194);
    background-color: rgba(0, 129, 194, 0.5);
}

.navbar .dropdown-menu > li > a.maintainHover {
    color: white;
    background-color: #0081C2;
}
</style>
</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
            <ul class="nav navbar-nav">
              <li class="active">
                
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">text</a>
                
                <ul class="dropdown-menu" role="menu">
                  
                    <li data-submenu-id="submenu-patas">
                        <a href="#">text</a>
                        <div id="submenu-patas" class="popover">
                            <h3 class="popover-title">text</h3>
                        </div>
                    </li>
                  
                    <li data-submenu-id="submenu-snub-nosed">
                        <a href="#">text</a>
                        <div id="submenu-snub-nosed" class="popover">
                            <h3 class="popover-title">text</h3>
                        </div>
                    </li>
                  
                    <li data-submenu-id="submenu-duoc-langur">
                        <a href="#">text</a>
                        <div id="submenu-duoc-langur" class="popover">
                            <h3 class="popover-title">text</h3>
                        </div>
                    </li>
                  
                    <li data-submenu-id="submenu-pygmy">
                        <a href="#">text</a>
                        <div id="submenu-pygmy" class="popover">
                            <h3 class="popover-title">text</h3>
                        </div>
                    </li>
                </ul>
                
              </li>
              
              <li class="active">
                
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">text</a>
                
                <ul class="dropdown-menu" role="menu">
                  
                    <li data-submenu-id="submenu-patas2">
                        <a href="#">text</a>
                        <div id="submenu-patas2" class="popover">
                            <h3 class="popover-title">text</h3>
                        </div>
                    </li>
                  
                    <li data-submenu-id="submenu-duoc-langur2">
                        <a href="#">text</a>
                        <div id="submenu-duoc-langur2" class="popover">
                            <h3 class="popover-title">text</h3>
                        </div>
                    </li>
                  
                    <li data-submenu-id="submenu-pygmy2">
                        <a href="#">text</a>
                        <div id="submenu-pygmy2" class="popover">
                            <h3 class="popover-title">text</h3>
                        </div>
                    </li>
                </ul>
                
              </li>
            </ul>
        </div>
      </div>
    </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.menu-aim/0.1/jquery.menu-aim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
      <script id="rendered-js" >
var $menu = $(".dropdown-menu");

// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
  activate: activateSubmenu,
  deactivate: deactivateSubmenu });

// jQuery-menu-aim: </meaningful part of the example>

// jQuery-menu-aim: the following JS is used to show and hide the submenu
// contents. Again, this can be done in any number of ways. jQuery-menu-aim
// doesn't care how you do this, it just fires the activate and deactivate
// events at the right times so you know when to show and hide your submenus.
function activateSubmenu(row) {
  var $row = $(row),
  submenuId = $row.data("submenuId"),
  $submenu = $("#" + submenuId),
  height = $menu.outerHeight(),
  width = $menu.outerWidth();

  // Show the submenu
  $submenu.css({
    display: "block",
    top: -1,
    left: width - 3, // main should overlay submenu
    height: height - 4 // padding for main dropdown's arrow
  });

  // Keep the currently activated row's highlighted look
  $row.find("a").addClass("maintainHover");
}

function deactivateSubmenu(row) {
  var $row = $(row),
  submenuId = $row.data("submenuId"),
  $submenu = $("#" + submenuId);

  // Hide the submenu and remove the row's highlighted look
  $submenu.css("display", "none");
  $row.find("a").removeClass("maintainHover");
}

// Bootstrap's dropdown menus immediately close on document click.
// Don't let this event close the menu if a submenu is being clicked.
// This event propagation control doesn't belong in the menu-aim plugin
// itself because the plugin is agnostic to bootstrap.
$(".dropdown-menu li").click(function (e) {
  e.stopPropagation();
});

$(document).click(function () {
  // Simply hide the submenu on any click. Again, this is just a hacked
  // together menu/submenu structure to show the use of jQuery-menu-aim.
  $(".popover").css("display", "none");
  $("a.maintainHover").removeClass("maintainHover");
});
//# sourceURL=pen.js
    </script>
</body>
</html>