- Share this text:
Responsive menu bar - posted by guest on 22nd January 2020 02:48:34 PM
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Auto Show/Hide Toggle Menu Demo</title>
<style>
nav {
width: 100%;
}
.nav_wrapper {
width: 100%;
transition: top .5s ease-out;
background: #2f3b3f;
}
.nav_wrapper .menu-link {
display: none;
}
.nav_wrapper .spinner-master input[type=checkbox] {
display: none;
}
.nav_wrapper .menu {
width: 100%;
height: auto;
background: #2f3b3f;
transition: all 0.3s ease;
}
.nav_wrapper .menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.nav_wrapper .menu>li>ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #f4f4f4;
border: 1px solid #fff;
}
.nav_wrapper .menu ul li {
padding: 0px;
}
.nav_wrapper .menu>ul>li {
display: inline-block;
}
.nav_wrapper .menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 14px;
}
.nav_wrapper .menu ul li a:hover {
background: #efa666;
color: #fff;
}
.nav_wrapper .menu ul li.hover>a {
background: #efa666;
color: #fff;
}
.nav_wrapper .menu ul li>a {
padding: 15px;
}
.nav_wrapper .menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #39484d;
}
.nav_wrapper .menu ul li:hover>ul {
display: block;
}
.nav_wrapper .menu ul ul>li {
position: relative;
}
.nav_wrapper .menu ul ul>li a {
padding: 10px 15px;
height: auto;
background: #39484d;
}
.nav_wrapper .menu ul ul>li a:hover {
background: #efa666;
color: #fff;
}
.nav_wrapper .menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
@media all and (max-width: 768px) {
.example-header .container {
width: 100%;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked~.spinner-spin>.horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked~.spinner-spin>.diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked~.spinner-spin>.diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
.nav_wrapper a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
.nav_wrapper a.menu-link:hover {
color: #efa666;
}
.nav_wrapper a.menu-link:after {
content: "\2630";
font-weight: normal;
}
.nav_wrapper a.menu-link.active:after {
content: "\2715";
}
.nav_wrapper .menu {
clear: both;
min-width: inherit;
float: none;
}
.nav_wrapper .menu,
.nav_wrapper .menu>ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.nav_wrapper .menu>li>ul.sub-menu {
padding: 0px;
border: none;
}
.nav_wrapper .menu.active,
.nav_wrapper .menu>ul ul.active {
max-height: 55em;
}
.nav_wrapper .menu ul {
display: inline;
}
.nav_wrapper .menu li,
.nav_wrapper .menu>ul>li {
display: block;
}
.nav_wrapper .menu>ul>li:last-of-type a {
border: none;
}
.nav_wrapper .menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.nav_wrapper .menu li.has-submenu>a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.nav_wrapper .menu li.has-submenu>a.active:after {
content: "-";
}
.nav_wrapper .menu ul ul>li a {
background-color: #39484d;
padding: 10px 18px 10px 30px;
}
.nav_wrapper .menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.nav_wrapper .menu ul li.hover>a {
background: #4b5f65;
color: #fff;
}
.nav_wrapper .menu ul ul,
.nav_wrapper .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
}
</style>
</head>
<body>
<div class="nav_wrapper">
<!--<a class="menu-link" href="#menu"></a>-->
<div class="spinner-master">
<input type="checkbox" id="spinner-form" />
<label for="spinner-form" class="spinner-spin">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>
<nav id="menu" class="menu">
<ul class="dropdown">
<li><a href="#Link" title="Link">Home</a>
<ul>
<li><a href="#Link" title="Link">Link » </a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">About</a></li>
<li><a href="#Link" title="Link">Link » </a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Link" title="Link">Category</a>
<ul>
<li><a href="#Link" title="Link ">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Portfolio</a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Work</a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title=" Link"> Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Services</a>
<ul>
<li><a href="#Link" title="Link">Link </a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Contact</a></li>
</ul>
</nav>
</div>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$('.nav_wrapper ul li:has(ul)').addClass('.nav_wrapper has-submenu');
$('.nav_wrapper ul li ul').addClass('.nav_wrapper sub-menu');
$('.nav_wrapper ul.dropdown li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
var $menu = $('#menu'),
$menulink = $('#spinner-form'),
$search = $('#search'),
$search_box = $('.search_box'),
$menuTrigger = $('.has-submenu > a');
$menulink.click(function(e) {
$menulink.toggleClass('active');
$menu.toggleClass('active');
if ($search.hasClass('active')) {
$('.nav_wrapper .menu.active').css('padding-top', '50px');
}
});
$menuTrigger.click(function(e) {
e.preventDefault();
var t = $(this);
t.toggleClass('active').next('ul').toggleClass('active');
});
$('ul li:has(ul)');
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Auto Show/Hide Toggle Menu Demo</title>
<style>
nav {
width: 100%;
}
.nav_wrapper {
width: 100%;
transition: top .5s ease-out;
background: #2f3b3f;
}
.nav_wrapper .menu-link {
display: none;
}
.nav_wrapper .spinner-master input[type=checkbox] {
display: none;
}
.nav_wrapper .menu {
width: 100%;
height: auto;
background: #2f3b3f;
transition: all 0.3s ease;
}
.nav_wrapper .menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.nav_wrapper .menu>li>ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #f4f4f4;
border: 1px solid #fff;
}
.nav_wrapper .menu ul li {
padding: 0px;
}
.nav_wrapper .menu>ul>li {
display: inline-block;
}
.nav_wrapper .menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 14px;
}
.nav_wrapper .menu ul li a:hover {
background: #efa666;
color: #fff;
}
.nav_wrapper .menu ul li.hover>a {
background: #efa666;
color: #fff;
}
.nav_wrapper .menu ul li>a {
padding: 15px;
}
.nav_wrapper .menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #39484d;
}
.nav_wrapper .menu ul li:hover>ul {
display: block;
}
.nav_wrapper .menu ul ul>li {
position: relative;
}
.nav_wrapper .menu ul ul>li a {
padding: 10px 15px;
height: auto;
background: #39484d;
}
.nav_wrapper .menu ul ul>li a:hover {
background: #efa666;
color: #fff;
}
.nav_wrapper .menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
@media all and (max-width: 768px) {
.example-header .container {
width: 100%;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked~.spinner-spin>.horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked~.spinner-spin>.diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked~.spinner-spin>.diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
.nav_wrapper a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
.nav_wrapper a.menu-link:hover {
color: #efa666;
}
.nav_wrapper a.menu-link:after {
content: "\2630";
font-weight: normal;
}
.nav_wrapper a.menu-link.active:after {
content: "\2715";
}
.nav_wrapper .menu {
clear: both;
min-width: inherit;
float: none;
}
.nav_wrapper .menu,
.nav_wrapper .menu>ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.nav_wrapper .menu>li>ul.sub-menu {
padding: 0px;
border: none;
}
.nav_wrapper .menu.active,
.nav_wrapper .menu>ul ul.active {
max-height: 55em;
}
.nav_wrapper .menu ul {
display: inline;
}
.nav_wrapper .menu li,
.nav_wrapper .menu>ul>li {
display: block;
}
.nav_wrapper .menu>ul>li:last-of-type a {
border: none;
}
.nav_wrapper .menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.nav_wrapper .menu li.has-submenu>a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.nav_wrapper .menu li.has-submenu>a.active:after {
content: "-";
}
.nav_wrapper .menu ul ul>li a {
background-color: #39484d;
padding: 10px 18px 10px 30px;
}
.nav_wrapper .menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.nav_wrapper .menu ul li.hover>a {
background: #4b5f65;
color: #fff;
}
.nav_wrapper .menu ul ul,
.nav_wrapper .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
}
</style>
</head>
<body>
<div class="nav_wrapper">
<!--<a class="menu-link" href="#menu"></a>-->
<div class="spinner-master">
<input type="checkbox" id="spinner-form" />
<label for="spinner-form" class="spinner-spin">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>
<nav id="menu" class="menu">
<ul class="dropdown">
<li><a href="#Link" title="Link">Home</a>
<ul>
<li><a href="#Link" title="Link">Link » </a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">About</a></li>
<li><a href="#Link" title="Link">Link » </a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Link" title="Link">Category</a>
<ul>
<li><a href="#Link" title="Link ">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Portfolio</a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Work</a>
<ul>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title=" Link"> Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Services</a>
<ul>
<li><a href="#Link" title="Link">Link </a></li>
<li><a href="#Link" title="Link">Link</a></li>
<li><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li><a href="#Link" title="Link">Contact</a></li>
</ul>
</nav>
</div>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<p>hellooo</p>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$('.nav_wrapper ul li:has(ul)').addClass('.nav_wrapper has-submenu');
$('.nav_wrapper ul li ul').addClass('.nav_wrapper sub-menu');
$('.nav_wrapper ul.dropdown li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
var $menu = $('#menu'),
$menulink = $('#spinner-form'),
$search = $('#search'),
$search_box = $('.search_box'),
$menuTrigger = $('.has-submenu > a');
$menulink.click(function(e) {
$menulink.toggleClass('active');
$menu.toggleClass('active');
if ($search.hasClass('active')) {
$('.nav_wrapper .menu.active').css('padding-top', '50px');
}
});
$menuTrigger.click(function(e) {
e.preventDefault();
var t = $(this);
t.toggleClass('active').next('ul').toggleClass('active');
});
$('ul li:has(ul)');
</script>
</body>
</html>