Responsive Show And Hide Navigation
5 Sep 2018
Responsive Show and Hide Navigation - In this post I will try to give examples of responsive navigation menus that are slightly different from other navigation menus.
What's different here I give the show and hide effects on this menu, the sajian will appear when you scroll the blog page back up and the sajian will hide again when it scrolls down. Maybe a sajian with effects that I will share with you that you have encountered on the web that applies it.
Immediately with the sample sajian that I made as simple as possible, check it ...
<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>
<a href="#search_box" class="btn" id="search">☌</a>
<nav id="menu" class="menu">
<ul class="dropdown">
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Home</a>
<ul >
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link » </a>
<ul >
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">About</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link » </a>
<ul >
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link </a></li>
</ul>
</li>
</ul>
</li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Category</a>
<ul >
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Portfolio</a>
<ul >
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Work</a>
<ul >
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation"> Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Playground</a>
<ul >
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link </a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Responsive Show and Hide Navigation">Sitemap</a></li>
</ul>
</nav>
<form class="search_box" id="search_box" action="/search/">
<input name="search_criteria" placeholder="Search here" value="" type="text">
<input class="search_icon" value="Search" type="submit">
</form>
</div>
nav {
width: 100%;
}
.nav_wrapper {
position: fixed;
left: 0;
top: 0;
width: 100%;
transition: top .5s ease-out;
background: #2f3b3f;
}
.scroll {
top: -90px;
}
.no-scroll {
top: 0;
z-index: 9999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: sans-serif;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search {
float: right;
font-size: 30px;
padding: 2px 15px;
line-height: 40px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(181deg);
-moz-transform: rotate(181deg);
-ms-transform: rotate(181deg);
-o-transform: rotate(181deg);
transform: rotate(181deg);
}
#search:hover {
color: #efa666;
}
.search_box {
clear: both;
width: 100%;
background: #e8ebf0;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
}
.search_box.active {
height: auto;
padding: 15px 0;
}
.search_box input {
width: 80%;
font-size: 13px;
margin: 0 0 0 15px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 10%;
height: auto;
padding: 10px;
margin: 0;
margin-left: -5px;
border: none;
color: #fff;
cursor: pointer;
background: #8c949d;
opacity: 1;
transition: all 0.1s ease;
}
.search_box input.search_icon:hover {
background: #efa666;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #2f3b3f;
transition: all 0.3s ease;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #f4f4f4;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 14px;
}
.menu ul li a:hover {
background: #efa666;
color: #fff;
}
.menu ul li.hover > a {
background: #efa666;
color: #fff;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #39484d;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #39484d;
}
.menu ul ul > li a:hover {
background: #efa666;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
@media all and (max-width: 768px) {
.example-header .container {
width: 100%;
}
#search {
padding: 10px;
}
.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;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: "\2630";
font-weight: normal;
}
a.menu-link.active:after {
content: "\2715";
}
.menu {
clear: both;
min-width: inherit;
float: none;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none;
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: "-";
}
.menu ul ul > li a {
background-color: #39484d;
padding: 10px 18px 10px 30px;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #4b5f65;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
.search_box {
position: absolute;
top: 60px;
left: 0;
z-index: 10;
}
.search_box input {
width: 70%;
}
.search_box input.search_icon {
width: 17%;
};
}
<script type='text/javascript'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("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")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>