How To Make Different Styles Menuber With Dropdown Menu

Drop down Menu Tutorial

How to mae simple dropdown menu in html:

Style#1:

From menubar in notepad++ select new from file menu.Next save as command from File menu.Then please give it a name in file name field e.g(Dropdown Menu.html).

Now you simply copy the code below & pase it in your Dropdown Menu.html.After that from run menu select any browser e.g launch in google crome.

<!DOCTYPE html>

<html>
<head>
<title>Dropdown#1</title>
<style type="text/css">
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}

ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html>

Creating stylish dropdown menu using html5 & css3

Style#2:

<!DOCTYPE html>

<html>
<head>
<title>Dropdown#2</title>
<style type="text/css">
.menu1,
.menu1 ul,
.menu1 li,
.menu1 a {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.menu1 { /*Find this class in the css file*/

height: 40px;
width: 62%; /*I changed this to a percentage of the page,*/
margin-left:auto; /*Then added these two margin styles.*/
margin-right:auto;

background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.menu1 li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu1 li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;

border-left: 1px solid #393942;
border-right: 1px solid #4f5058;

font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;

color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);

-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}

.menu1 li:first-child a { border-left: none; }
.menu1 li:last-child a{ border-right: none; }

.menu1 li:hover > a { color: #8fde62;
}
.menu1 ul {

position: absolute;
top: 40px;
left: 0;

opacity: 50;
background: #1f2024;

-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;

-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;

}

.menu1 li:hover > ul { opacity: 50; }

.menu1 ul li {
height: 0;
overflow: hidden;
padding: 0;

-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}

.menu1 li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu1 ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;

border: none;
border-bottom: 1px solid #353539;
}

.menu1 ul li:last-child a { border: none;
}
.menu1 a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu1 a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu1 a.signout { background: url(../img/arrow.png) no-repeat 6px center;
}

</style>
</head>
<body>
<ul class="menu1">
<li><a href="#">My dashboard</a></li>
<li><a href="#">Likes</a></li>
<li><a href="#">Views</a>
<ul>
<li><a href="#" class="documents">Documents</a></li>
<li><a href="#" class="messages">Messages</a></li>
<li><a href="#" class="signout">Sign Out</a></li>
</ul>
</li>
<li><a href="#">Uploads</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Documents</a></li>
</ul>
</body>
</html>

Making a menuber with dropdown with java script

Style#3:

<!DOCTYPE html>

<html>
<head>
<title>Dropdown#2</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}

#menu:after {
clear: both;
}

#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}

#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}

#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
box-shadow: none;
}

#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
#menu-trigger { /* Hide it initially */
display: none;
}

@media screen and (max-width: 600px) {

#menu-wrap {
position: relative;
}

#menu-wrap * {
box-sizing: border-box;
}

#menu-trigger {
display: block; /* Show it now */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
font-weight: bold;
background-color: #111;
/* Multiple backgrounds here, the first is base64 encoded */
background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}

#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
display: none;
box-shadow: none;
}

#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
}

#menu ul ul {
margin: 0 0 0 20px !important;
box-shadow: none;
}

#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
box-shadow: none;
}

#menu ul li{
margin-left: 20px;
box-shadow: none;
}

#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}

#menu a:hover{
color: #fafafa;
}

#menu ul a{
padding: 0;
width: auto;
}

#menu ul a:hover{
background: none;
}

#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}

}

@media screen and (min-width: 600px) {
#menu {
display: block !important;
}
}

/* iPad */
.no-transition {
transition: none;
opacity: 1;
visibility: visible;
display: none;
}

#menu li:hover > .no-transition {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<script>
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
});
</script>
<script>
/* Mobile */
$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
$("#menu-trigger").on("click", function(){
$("#menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#menu ul').addClass('no-transition');
</script>
</body>
</html>

Creating a drop down menu

Style#4:

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS3 Menu Tutorial</title>
<link rel="stylesheet" href="menu.css" media="screen">
<meta name="robots" content="noindex,nofollow" />
<LINK REL="SHORTCUT ICON" HREF="http://www.mypixel.se/menu/index.html/pics/favicon.ico">
<style>
/******Lets make a CSS3 Dropdown nav! ******/

/****** Resets ******/

html, body { margin: 0; padding: 0; }
body { background: #222; }
ul.nav { margin: 10px auto 0 auto; }
header { height:170px; background-color:#06C; margin:0;}
h1 { font-size:35px; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; color:#eee; padding-top:75px; font-weight:bolder; }
.nav,
.nav ul,
.nav li,
.nav a {
margin: 0;padding: 0;border: none;outline: none;
}

/****** nav *******/
.nav {
height: 44px;width: 580px;
background: #06C;
background: -webkit-linear-gradient(top, #0280fe 0%,#0152a4 100%);
background: -moz-linear-gradient(top, #0280fe 0%,#0152a4 100%);
background: -o-linear-gradient(top, #0280fe 0%,#0152a4 100%);
background: -ms-linear-gradient(top, #0280fe 0%,#0152a4 100%);
background: linear-gradient(top, #0280fe 0%,#0152a4 100%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.nav li {
position: relative;list-style: none;float: left;display: block;height: 44px;

}
/****** The links in the menu ******/

.nav li a {
display: block;padding: 0 15px;margin: 8px 0;line-height: 28px;
text-decoration: none; border-right: 1px solid #107df8;
font-family: Georgia, "Times New Roman", Times, serif ;
font-weight: bolder;
font-size: 14px;
color: #f5f5f5;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
-ms-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
}

.nav li:last-child a{ border-right: none; }
.nav li:hover > a { color: #222; }
.nav ul {
position: absolute;
top: 45px; left: 0;opacity: 0;background: #06C;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}

.nav li:hover > ul { opacity: 1; }

.nav ul li {
height: 0;overflow: hidden;padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}

.nav li:hover > ul li {
height: 36px;overflow: visible;padding: 0;

}
.nav ul li a {
width: 100px;padding: 4px 0 4px 45px;margin: 0;
border: none;border-bottom: 1px solid #eee;

}

.nav ul li:last-child a { border: none; }

/****** Navigation icons ******/

.nav a.facebook { background: url(pics/facebook.png) no-repeat 6px center; }
.nav a.twitter { background: url(pics/twitter.png) no-repeat 6px center; }
.nav a.youtube { background: url(pics/youtube.png) no-repeat 6px center; }
.nav a.delicious { background: url(pics/delicious.png) no-repeat 6px center; }
</style>
</head>
<body>
<header>
<h1>A CSS3 Menu</h1>
</header>

<ul class="nav">

<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Customers</a>
<li><a href="#">Social</a>
<ul>
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="youtube">Youtube</a></li>
<li><a href="#" class="delicious">Delicious</a></li>
</ul>

</li>
<li><a href="#">Documents</a></li>
<li><a href="#">Designs</a></li>

</ul>


</body>

</html>

Styling dropdown menu with html5 & css3

Style#5:

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">
<title>drop5</title>
<LINK REL="SHORTCUT ICON" HREF="http://www.mypixel.se/menu/index.html/pics/favicon.ico">
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {
margin: 0;
padding: 0;
}
.nav {
background: #232323;
height: 60px;
display: inline-block;
}

.nav li {
float: left;
list-style-type: none;
position: relative;
}
.nav li a {
font-size: 16px;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 1px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
background-color: #2e2e2e;
}

#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: rgb(64, 151, 119);
}
#search_button {
border: 0 none;
background: #1f7f5c url(search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
#options a{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #232323;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
</style>
</head>
<body>
<ul class="nav">
<li id="settings">
<a href="#"><img src="settings.png" /></a>
</li>
<li>
<a href="#">Application</a>
</li>
<li>
<a href="#">Board</a>
</li>
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"></a>
</form>
</li>
<li id="options">
<a href="#">Options</a>
<ul class="subnav">
<li><a href="#">Settings</a></li>
<li><a href="#">Application</a></li>
<li><a href="#">Board</a></li>
<li><a href="#">Options</a></li>
</ul>
</li>
</ul>

<script src="prefixfree-1.0.7.js" type="text/javascript"></script>

</body>

</html>

Html5,Css3 and java script dropdown menu

Style#6:

Drop down menu with pure css3

Style#7:

<!<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS3 Menu Tutorial</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
*{
margin: 0;
padding:0;
}
body{background: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/type.png') repeat;
font-family: 'Archivo Narrow', sans-serif;
text-transform: uppercase;
font-size:0.8em;
}
nav {
text-align: center;
margin: 20px 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 30px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
</style>
</head>
<body>
<nav>
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Tutorials</a>
   <ul>
   <li><a href="#">Photoshop</a>
   <ul>
   <li><a href="#">Kureski</a></li>
   </ul>
   </li>
   <li><a href="#">Illustrator</a></li>
   <li><a href="#">Web Design</a>
   <ul>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   </ul>
   </li>
   </ul>
   </li>
   <li><a href="#">Articles</a>
   <ul>
   <li><a href="#">Web Design</a></li>
   <li><a href="#">User Experience</a></li>
   </ul>
   </li>
   <li><a href="#">Inspiration</a></li>
   <li><a href="#">Kureshki</a></li>
   </ul>
</nav>


</body>

</html>DOCTYPE html>

Ok boss, Please Try All Those Code Above.Thanks a lot for visiting me.To Go Home Page Click Home.

Code Tutorial For Developing Web,Android and Windows Apps With HTML5,CSS3,JS,VBS,BOOTSTRAP

Search This Blog

How To Make Different Styles Menuber With Dropdown Menu

Comments

Post a Comment