HTML
<header id="menu-code">
<!--//Menu Start-->
<input type="checkbox" name="checkbox" id="menu-trigger" class="trigger" />
<label for="menu-trigger">
<div class="codehim-menu-trigger">
</div>
</label>
<nav>
<ul class="codehim-menu cute-theme">
<li> <a href="#"> <i class="fa fa-home icon"></i> </a> </li>
<li class="dropdown has-four-item">
<a href="#Bros"> Browsers <div class="arrow"> </div> </a>
<ul>
<li><a href="#">Chrome</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Opera</a></li>
</ul>
</li>
<li class="dropdown has-five-item">
<a href="#Web">Web Development<div class="arrow"></div> </a>
<ul class="large">
<li><a href="#">CSS3</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Bootsrap</a></li>
<li><a href="#">Jquery </a></li>
</ul>
</li>
<li class="dropdown has-six-item">
<a href="#Pro">Products<div class="arrow"></div> </a>
<ul class="large">
<li><a href="#">Item Name 1</a></li>
<li><a href="#">Item Name 2</a></li>
<li><a href="#">Item Name 3</a></li>
<li><a href="#">Item Name 4</a></li>
<li><a href="#">Item Name 5 </a></li>
<li><a href="#">Item Name 6 </a></li>
</ul>
</li>
<li class="more-item">
<label for="menu-trigger">
<span></span>
<div class="touch"></div> </label>
</li>
<span class="codehim-more">
<li> <a href="#"> About</a></li>
<li> <a href="#"> Contact</a></li>
<li> <a href="#"> Tour</a></li>
</span>
</ul>
</nav>
<!--//Menu End-->
</header>
<br> <br> <br> <br>
<div class="card">
<h1>CodeHim Menu - Pure CSS Dropdown Navigation </h1>
<p>
A responsive navigation system for all devices. Created in only CSS3 and HTML5.
</p>
</div>
<div class="res">
<div class="resp">
<div class="card">
<h2> Menu Themes </h2>
<input type="radio" name="radio" id="check1" checked="checked" />
<label for="check1">
<div id="red" class="color-plate selected">
<span class="red"></span><span class="dark-gray"></span>
<p>Red</p>
</div>
</label>
<input type="radio" name="radio" id="check2" />
<label for="check2">
<div id="orange" class="color-plate">
<span class="orange"></span><span class="gray"></span>
<p>Orange</p>
</div>
</label>
<input type="radio" name="radio" id="check3" />
<label for="check3">
<div id="blue" class="color-plate">
<span class="blue"></span><span class="dark-blue"></span>
<p>Blue</p>
</div>
</label>
<input type="radio" name="radio" id="check4" />
<label for="check4">
<div id="pink" class="color-plate">
<span class="pink"></span><span class="dark-gray"></span>
<p>Pink</p>
</div>
</label>
<input type="radio" name="radio" id="check5" />
<label for="check5">
<div id="green" class="color-plate">
<span class="green"></span><span class="dark-green"></span>
<p>Green</p>
</div>
</label>
<h2> Effects </h2>
<ul>
<li class="option set-glossy"> Glossy Color</li>
<li class="option set-shade"> Text Shadow</li>
</ul>
</div>
</div>
<div class="resp">
<div class="card">
<h2> Menu Position </h2>
<ul>
<li class="option set-top"> Fixed Top </li>
<li class="option set-static"> Static</li>
</ul>
<h2> Menu Trigger </h2>
</div>
</div>
</div>
<div class="card">
<h2>Generated HTML</h2>
<button class="codehim-copy-btn" onclick="copyFunction()" title="Copy Code">
<i class='fa fa-clipboard'></i> Copy
</button>
<textarea id="display" class="codehim_menu_code">
</textarea>
</div>
CSS
/*CodeHim Navigation Menu
* Copyright 2019 (c) CodeHim
* Author: Asif Mughal
* URL: www.codehim.com
*/
* { margin: 0; padding: 0;}
.codehim-menu{
font-family: FontAwesome;
font-weight: 400;
font-size: 16px;
background: #438D80;
padding: 10px;
transition: .3s;
}
.codehim-menu a{
text-decoration: none;
display: inline;
}
ul.codehim-menu{
list-style: none;
}
.codehim-more > li,
.codehim-menu > li {
display: inline;
margin: 0;
}
.codehim-more > li > a,
.codehim-menu > li > a {
height: 35px;
line-height: 35px;
padding: 18px;
color: rgba(255, 255, 255, .8);
text-decoration: none;
outline: 0;
}
.codehim-more > li > a:hover,
.codehim-menu > li > a:hover {
background: rgba(0, 0, 0, 0.2);
color: #fff;
}
.codehim-menu > li.active > a,
.codehim-menu > li > a:active,
.codehim-menu > .dropdown:hover > a {
background: rgba(0, 0, 0, 0.2);
}
.dropdown {
position: relative;
}
.dropdown:hover ul {
z-index: 998;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
}
.dropdown ul {
height: 0;
min-height: 0;
position: absolute;
top: 36px;
left: -1px;
overflow: hidden;
display: block;
border-top: 0;
background: #fff;
min-width: 160px;
z-index: -1;
}
.has-one-item:hover ul {min-height: 40px}
.has-two-item:hover ul {min-height: 80px}
.has-three-item:hover ul {min-height: 120px}
.has-four-item:hover ul {min-height: 160px}
.has-five-item:hover ul {min-height: 200px}
.has-six-item:hover ul {min-height: 240px}
.has-seven-item:hover ul {min-height: 280px}
.has-eight-item:hover ul {min-height: 320px}
.has-nine-item:hover ul {min-height: 360px}
.has-ten-item:hover ul {min-height: 400px}
.has-infinte-item:hover ul{ min-height: 500px; overflow: auto;}
.dropdown ul.large {
min-width: 200px;
}
.codehim-menu-trigger,
.trigger,
.codehim-menu .more-item{
display: none;
}
.dropdown li {
display: block;
margin: 0 18px;
overflow: visible;
}
.dropdown li + li {
border-top: 1px dotted #eee;
}
.dropdown li a {
color: #555;
padding: 8px 18px;
margin: 0 -18px;
display: block;
}
.dropdown li a:hover {
color: #fff;
background: #438D80;
}
.arrow{
display: inline-block;
width: 4px;
height: 4px;
margin-left: 6px;
margin-bottom: 2px;
border-right: 2px solid rgba(255, 255, 255, .8);
border-bottom: 2px solid rgba(255, 255, 255, .8);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
.dropdown:hover .arrow{
transform: rotate(222.5deg);
transition: .5s;
-webkit-transform: rotate(222.5deg);
-webkit-transition: .5s;
-moz-transform: rotate(222.5deg);
-moz-transition: .5s;
}
.icon {font-size: 20pt;
position: relative;
}
@media only screen and (min-width: 220px) and (max-width: 540px) {
.codehim-menu {
border-right: 2px solid #666;
}
.codehim-menu{
padding: 0;
width: 230px;
height: 100vh;
position: fixed;
top: 0;
left: -232px;
transition: .6s;
-webkit-transition: .6s;
-moz-transition: .6s;
}
.codehim-more > li ,
.codehim-menu > li {
display: block;
margin: 0;
border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
}
.codehim-more > li a,
.codehim-menu > li a{
display: block;
}
.dropdown ul {
height: 0;
min-height: 0;
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: block;
border-top: 0;
background: #fff;
min-width: 100%;
z-index: 997;
}
.dropdown ul {
min-height: 0px;
transition: .6s;
-webkit-transition: .6s;
-moz-transition: .6s;
box-shadow: 0 0 0;
margin: 0;
}
.dropdown:hover ul {
box-shadow: none;
margin:0;
}
.dropdown li {
margin-right: 5px;
}
.dropdown li a {
color: #555;
padding: 10px 18px;
display: block;
}
.arrow{
float: right;
margin: 16px 10px 5px 5px;
}
.codehim-menu-trigger{
position: fixed;
left: -15px;
top: 20%;
width: 15px;
padding-left: 10px;
height: 40px;
line-height: 40px;
background: rgba(0, 0, 0, .3);
padding: 10px;
color: #fff;
border-radius: 0 6px 6px 0;
font-size: 18pt;
z-index: 500;
display: inline-block;
animation-name: openMe;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.codehim-menu-trigger:before{
content: "\f105";
font-family: FontAwesome;
margin-left: 10px;
}
.codehim-menu-trigger:hover{
background: #666;
transition: .6s;
animation-duration: 0s;
animation-iteration-count: 0;
}
.trigger:checked + label .codehim-menu-trigger {
left: 224px;
top: 20%;
transition: .6s;
background: #666;
z-index: 0;
animation-duration: 0s;
animation-iteration-count: 0;
}
.trigger:checked + label .codehim-menu-trigger:before{
content: "\f104";
font-family: FontAwesome;
transition: .6s;
}
.trigger:checked ~ nav > .codehim-menu {
left:0;
transition: .6s;
}
.nav-bar {
background: #000;
width: 100%;
position: relative;
top: 0;
cursor: pointer;
display: inline-block;
}
.nav-bar:before{
content: "\f0c9";
font-family: FontAwesome;
font-size: 18pt;
position: relative;
left: 20px;
}
}
/* Positions For Desktop and Tabs */
@media only screen and (min-width: 541px){
/* Fixed Top on Pc and Tabs*/
.fixed-top{
position: fixed;
top:0;
width: 100%;
}
/* Static Position*/
.static{
position: static;
top:0;
width: 100%;
}
}
/*Design For Tabs */
@media only screen and (min-width: 541px) and (max-width: 720px){
.codehim-more{
display: none;
height: 0;
min-height: 0;
top: 55px;
right: 50px;
overflow: hidden;
display: block;
border-top: 0;
background: #fff;
z-index: 997;
position: absolute;
width: 0;
}
.codehim-menu .more-item{
display: inline-block;
float: right;
margin-right: 40px;
user-select: none;
-webkit-user-select: none;
}
.more-item span:before {
content: "\f142";
font-family: FontAwesome;
font-size: 17pt;
font-weight: 400;
height: 35px;
line-height: 35px;
padding: 18px;
color: rgba(255, 255, 255, .8);
text-decoration: none;
outline: 0;
}
.touch{
position: absolute;
margin-top: -36px;
width: 36px;
height: 36px;
line-height: 36px;
border: 0;
margin-left: 8px;
}
.trigger:checked ~ nav > .codehim-menu > li[class*="more-item"] .touch{
background:#fff;
border-radius:100%;
display:block;
opacity:.8;
position:absolute;
-webkit-animation:ripple-effect .4s linear;
animation:ripple-effect .4s linear
-webkit-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0)
}
.trigger:checked ~ nav > .codehim-menu > li[class*="more-item"] span:before {
content: "\f141";
}
.trigger:checked ~ nav > .codehim-menu > .more-item ~ span[class*="codehim-more"] {
display: block;
z-index: 998;
min-height: 153px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
width: 160px;
}
.trigger:checked ~ nav > .codehim-menu > .more-item ~ span[class*="codehim-more"] li a{
color: #555;
padding: 8px 18px;
margin: 0 -18px;
display: block;
}
.trigger:checked ~ nav > .codehim-menu > .more-item ~ span[class*="codehim-more"] li a:hover{ background: #ddd !important;}
.trigger:checked ~ nav > .codehim-menu > .more-item ~ span[class*="codehim-more"] li{
display: block;
margin: 0 18px;
overflow: visible;
}
}
/*CodeHim Menu Effects
* Copyright 2019 (c) CodeHim
* Author: Asif Mughal
* URL: www.codehim.com
*/
/* Glass Effect*/
/*Text Shadow*/
.text-shade{
-webkit-text-shadow: 1px 0px 0 rgba(0, 0, 0, .5);
text-shadow:1px 0px 0 rgba(0, 0, 0, .5);
}
/* Open Me alert Animation*/
@keyframes openMe {
0% {left:-10px;}
45% {left: -10px;}
46% {left:-10px;}
47% {left: -10px;}
48% {left: -2px;}
49% {left: -5px;}
50% {left: -8px; background: #e41b17;}
51% {left: -3px;}
52% {left: -7px;}
53% {left: -4px;}
54% {left: -10px;}
100% {left: -10px;}
}
/* Touch Effect*/
@-webkit-keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
@keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
.glossy{
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
}
/*CodeHim Menu Themes
* Copyright 2019 (c) CodeHim
* Author: Asif Mughal
* URL: www.codehim.com
*/
/* Cute Theme*/
.cute-theme {
background-color: #666;
}
.cute-theme a{
color: #333;
}
.cute-theme .dropdown li a:hover {
background: #FF2400;
color: #fff;
text-indent: 10px;
transition: .3s;
}
.codehim-more > li > a:hover,
.cute-theme > li > a:hover {
background: #C11B17 !important;
color: #fff;
}
.cute-theme > li.active > a,
.cute-theme > li > a:active,
.cute-theme > .dropdown:hover > a {
background: #C11B17 !important;
color: #fff;
}
@media only screen and (min-width: 800px){
.codehim-menu{
margin-left: auto;
margin-right: auto;
text-align: center; }
.dropdown ul {
text-align: left; }
/* Fixed Top on Pc and Tabs*/
.fixed-top{
position: fixed;
top:0;
width: 100%;
}
/* Fixed Bottom on Pc and Tabs*/
.fixed-bottom{
position: fixed;
bottom: 0;
width: 100%;
}
}
/* Dark Theme*/
.dark-theme {
background-color: #595959;
}
.dark-theme .dropdown li a:hover {
background-color: #595959;
}
/* Orange Theme*/
.orange-theme{
background-color: #FF7F50;
}
.orange-theme .dropdown li a:hover {
background-color: #FF7F50;
}
/* Blue Theme*/
.blue-theme{
background-color: #488AC7
}
.blue-theme .dropdown li a:hover {
background-color: #488AC7
}
/* Pink Theme */
.pink-theme{
background-color: #F52887
}
.pink-theme .dropdown li a:hover {
background-color: #F52887
}
.glossy .dropdown li a:hover,
.glossy li a:hover {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));}
/*CSS For Demo*/
body{ font-family: fontawesome;
background: #f5f5f5; }
.card{
background: #fff;
padding: 15px;
margin: 20px;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: 2px 1px 6px rgba(0, 0, 0, .3);
}
.card h2 {
font-size: 15pt;
font-weight: 400;
border-bottom: 2px solid #ddd;
padding: 10px;
margin-bottom: 5px;
}
input[type="radio"]{
display: none;
}
.color-plate{
display: inline-block;
margin: 3px;
border: 1px solid #ddd;
background: #ddd;
color: #000;
cursor: pointer;
transition: .2s;
-webkit-transition: .2s;
-moz-transition: .2s;
outline: 0;
}
.color-plate:hover{
box-shadow: 1px 2px 6px rgba(0, 0, 0, .5);
}
.color-plate span {
width: 35px;
height: 35px;
display: inline-block;
margin: -1px;
}
.color-plate p{
text-align: center;
font-size: 10px;
padding: 2px;
}
.red { background-color: #e41b17;
}
.dark-gray{background-color: #666;}
.gray{ background-color: #888;}
.orange{background-color: #F88017;}
.blue{ background-color: #1589FF;}
.dark-blue{background-color: #2554C7}
.pink{background-color: #F535AA;}
.green{ background-color: #3EA055;}
.dark-green{ background-color: #254117;}
.red,
.dark-gray,
.pink,
.gray,
.green,
.dark-green,
.blue,
.dark-blue, .orange {
box-shadow: inset 0px 3px 3px rgba(255, 255, 255, 0.5);
}
.codehim_menu_code { width: 100%;
height: 300px;
padding: 10px;
resize: none;
box-sizing: border-box;
border: 2px solid #bbb;
color: #444;
font-size: 13px;
white-space: pre;
background: #fff;
border-radius: 4px;
margin: 15px 0 10px 0 ;
outline:0; }
.card ul li{
padding: 10px;
list-style: none;
}
.card ul {
margin-top: 15px;
}
/* Toggle Options*/
.card .option{
display: block;
background: rgba(0, 0, 0, .2);
color: rgba(0, 0, 0, .8);
font-size: 15px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding: 15px;
cursor: pointer;
}
.set-glossy:before,
.set-shade:before,
.set-static:before,
.set-top:before{
content: "\f204";
font-family: FontAwesome;
color: #999;
font-size: 20pt;
float: right;
}
.active:before{
content: "\f205";
font-family: FontAwesome;
color: #16a085;
font-size: 20pt;
float: right;
}
.selected{
text-align: center;
}
input[type="radio"]:checked + label p:before{
content: "\f00c";
font-family: FontAwesome;
color: #fff;
font-size: 8pt;
float: right;
}
input[type="radio"]:checked + label .color-plate{
background: #000;
color: #fff;
border: 1px solid #000;
}
.card h1 {
font-size: 16pt;
text-align: center;
line-height: 1.2;
color: #16a085;
}
.card h1 ~ p{
font-size: 16px;
}
.codehim-copy-btn{
padding: 12px;
color: rgba(255, 255, 255, 0.8);
border: 0;
outline:0;
background: #16a085;
border-radius: 3px;
font-size: 15px;
transition: .4s;
cursor: pointer;
}
.codehim-copy-btn:hover{
background: #666;
}
@media only screen and (min-width: 480px){
.resp{ display: block;
width: 50%;
float: left;
box-sizing: border-box;
}
.card{ min-height: 200px; }
.res{ overflow: hidden; box-sizing: border-box; }
}
{ } JS
$(document).ready(function() {
// Orange Theme
$('#orange').click(function() {
$(".codehim-menu").addClass("orange-theme").removeClass("pink-theme cute-theme blue-theme green-theme");
});
// Pink Theme
$('#pink').click(function() {
$(".codehim-menu").addClass("pink-theme").removeClass("cute-theme orange-theme blue-theme green-theme");
});
// Blue Theme
$('#blue').click(function() {
$(".codehim-menu").addClass("blue-theme").removeClass("cute-theme orange-theme pink-theme green-theme");
});
// Red Theme
$('#red').click(function() {
$(".codehim-menu").addClass("cute-theme").removeClass("blue-theme orange-theme pink-theme green-theme");
});
// Green Theme
$('#green').click(function() {
$(".codehim-menu").addClass("green-theme").removeClass("cute-theme orange-theme pink-theme blue-theme");
});
//Generated Code
$('.color-plate').click(function() {
MenuSource();
});
// Fixed Top
$('.set-top').click(function() {
$(".codehim-menu").toggleClass("fixed-top").removeClass("static");
$(this).toggleClass("active");
$('.set-static').removeClass("active");
MenuSource();
});
// Set Static
$('.set-static').click(function() {
$(".codehim-menu").toggleClass("static").removeClass("fixed-top");
$(this).toggleClass("active");
$('.set-top').removeClass("active");
MenuSource();
});
// Set Glossy Color
$('.set-glossy').click(function() {
$(".codehim-menu").toggleClass("glossy");
$(this).toggleClass("active");
MenuSource();
});
// Set Text Shadow
$('.set-shade').click(function() {
$(".codehim-menu").toggleClass("text-shade");
$(this).toggleClass("active");
MenuSource();
});
function MenuSource(){
var Source = $('#menu-code').html();
$('.codehim_menu_code').val(Source);
}
MenuSource();
});
//Copy to Clipboard
function copyFunction() {
var copyText = document.getElementById("display");
copyText.select();
document.execCommand("Copy");
}
Preview