CodeHim Menu - Pure CSS Dropdown Navigation

gravatar
CSS 2/3, codehim-menu
Snippet by Anon
967 0
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