Beautiful Drop-down Menubar

You only have so much space on a web page to fit all of your material. Dropdown menus can be used to maximise space. A dropdown menu, for example, is used by the eCommerce website Designer Junkie Apparel to present all of its product categories. Visitors can either shop the entire collection or hover over the menu and select one of the choices to narrow down their search to the items they're most interested in.

Beautiful Drop-down Menubar - Website Design

Beautiful Drop-down Menubar HTML

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News ▾</a>
<ul>
<li><a href="#">Bangladesh</a></li>
<li><a href="#">India</a></li>
<li><a href="#">Pakistan</a></li>
<li><a href="#">Australia ▸</a>
<ul>
<li><a href="#">Australia 1</a></li>
<li><a href="#">Australia 2</a></li>
<li><a href="#">Australia 3</a></li>
<li><a href="#">Australia 4</a></li>
<li><a href="#">Australia 5</a></li>
<li><a href="#">Australia 6</a></li>
</ul>
</li>
<li><a href="#">Srilanka</a></li>
</ul>
</li>
<li><a href="#">Countries</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Beautiful Drop-down Menubar CSS

*{
margin:0;
padding:0;
}
#menu{width:650px;margin:20px auto;}
#menu ul{
list-style: none;
}
#menu ul li{
background: linear-gradient(#00ca00, #000063);
border: 1px solid white;
width:120px;
height: 35px;
line-height: 35px;
text-align: center;
float: left;
position: relative;
border-radius: 5px;

}
#menu ul li a{
text-decoration: none;
color:white;
display: block;
text-transform: uppercase;
transition: all .3s;
}
#menu ul li a:hover{
background-color:green;
border-radius: 5px;
}
#menu ul ul{
position: absolute;
display: none;
}
#menu ul li:hover > ul{
display: block;
}
#menu ul ul ul{
margin-left: 120px;
top:0;
}

css dropdown menubar or navigation bar with animations _Website Design

css dropdown menubar or navigation bar HTML

css dropdown menubar or navigation bar CSS

body{
font-family: 'Cormorant Garamond', serif;
font-size:15px;
font-weight: bold;
}
ul{
position:absolute;
list-style-type:none;
background:#CE93D8;
margin:0px;
padding:0px;
margin-top:-90px;
}
li{
display:inline-block;
padding:20px;
cursor:pointer;
}
a{
text-decoration:none;
color:black;
}
.ul{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:mymove .3s linear ;
}
.ul:hover .ul{
display:block;
}
li ul li:hover a{
color:white;
}
.projects:hover ul{
display:block;
margin-top:20px;
}
.projects:hover .ul li{
display:block;
}
.projects .ul li a{
padding:10px;
color:black;
}
.projects .ul li:hover a{
color:white;
}
li ul li{
transition:all .2s;
}
li ul li:hover{
background:#795548;
}
@-webkit-keyframes mymove {
0% {transform:translate3d(0px,50px,0px)}

25% {transform:translate3d(0,0px,0)}

50% {transform:translate3d(0,25px,0)}

100% {transform:translate3d(0,0,0)}
}
div{
background:#80CBC4;
height:70px;
box-shadow:
0px 11px 8px -10px #CCC,
0px -11px 8px -10px #CCC;
}
.ul1{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move .3s linear alternate ;
}
.about .ul1 li a{
color:black;
}
.about .ul1 li:hover a{
color:white;
}
.about:hover .ul1{
display:block;
margin-top:20px;
}
.about:hover .ul1 li{
display:block;
}
.ul1:hover .ul1 {
display:block;
}
@-webkit-keyframes move {
0% {transform:translate3d(50px,0,0)}

25% {transform:translate3d(0,0,0)}

50% {transform:translate3d(25px,0,0)}

100% {transform:translate3d(0,0,0)}
}
.ul2{
position:absolute;
display:none;
background:#b3d4fc;
-webkit-animation:move1 .2s linear alternate ;
}
.about .ul2 li a{
color:black;
}
.about .ul1 li:hover a{
color:white;
}
.about:hover .ul2{
display:block;
margin-top:20px;
}
.about:hover .ul2 li{
display:block;
}
.ul2:hover .ul2 {
display:block;
}
@-webkit-keyframes move1 {
0% {transform: scale(.5);}
50% {transform:scale(1.2);}
100% {transform:scale(1);}
}

.ul li:hover{
background:#689F38;
}
.ul1 li:hover{
background:#689F38;
}
.ul2 li:hover{
background:#689F38;
}

CSS3/Javascript Pure Dropdown Menu

Pure Dropdown Menu HTML

<div class="container">
<h1 class="title">Dropdown Menu</h1>
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>

Pure Dropdown Menu CSS

@import "compass/css3";
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
.text-center {
text-align: center;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;

& > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
}
// =============================================================================
// Mixins and Variables
// =============================================================================
$blue: #2980B9;
$gray: #EEE;
@mixin ul-nostyle {
list-style: none;
padding: 0;
margin: 0;
}
@mixin double-shadow($color) {
@include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset);
}
@mixin hover-style($color) {
&:hover {
background: lighten($color, 3%);
}
}
@mixin animation($content) {
animation: $content;
-moz-animation: $content;
-webkit-animation: $content;
}
@mixin keyframes($name) {
@keyframes #{$name} { @content; }
@-moz-keyframes #{$name} { @content; }
@-webkit-keyframes #{$name} { @content; }
}
// =============================================================================
// Classes
// =============================================================================
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: $blue;
}
.dropdown {
a {
text-decoration: none;
}
[data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: $blue;
@include double-shadow($blue);
@include hover-style($blue);
@include text-shadow(0 -1px 0 rgba(0,0,0,0.3));
padding: 10px;
}
.icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
&.open {
@include transform(rotate(-180deg));
@include transition(transform .6s);
}
&.close {
@include transform(rotate(0deg));
@include transition(transform .6s);
}
&:before {
content: '\25BC';
}
}
.dropdown-menu {
max-height: 0;
overflow: hidden;
@include ul-nostyle;
li {
padding: 0;
a {
display: block;
color: darken($gray, 50%);
background: $gray;
@include double-shadow($gray);
@include hover-style($gray);
@include text-shadow(0 -1px 0 rgba(255,255,255,0.3));
padding: 10px 10px;
}
}
}
.show, .hide {
@include transform-origin(50%, 0%);
}
.show {
display: block;
max-height: 9999px;
@include transform(scaleY(1));
@include animation(showAnimation .5s ease-in-out);
@include transition(max-height 1s ease-in-out);
}
.hide {
max-height: 0;
@include transform(scaleY(0));
@include animation(hideAnimation .4s ease-out);
@include transition(max-height .6s ease-out);
}
}
@include keyframes(showAnimation) {
0% {
@include transform(scaleY(0.1));
}
40% {
@include transform(scaleY(1.04));
}
60% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.04));
}
100% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.02));
}
100% {
@include transform(scaleY(1));
}
}
@include keyframes(hideAnimation) {
0% {
@include transform(scaleY(1));
}
60% {
@include transform(scaleY(0.98));
}
80% {
@include transform(scaleY(1.02));
}
100% {
@include transform(scaleY(0));
}
}

Pure Dropdown Menu javascript

// Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

Website Design99