Inilah Responsive Show And Hide Navigation - Fezarzone

Responsive Show and Hide Navigation - Pada postingan kali ini Saya akan mencoba untuk menunjukkan pola dari responsive hidangan navigasi yang sedikit berbeda dengan hidangan navigasi lainnya.

Yang berbeda disini Saya menunjukkan efek show and hide pada hidangan ini, hidangan akan muncul dikala Anda menscroll halaman blog kembali ke atas dan hidangan akan sembunyi kembali dikala menscroll ke bawah. Mungkin hidangan dengan efek yang akan Saya bagikan ini pernah Anda jumpai pada web yang menerapkannya.

Langsung saja dengan pola hidangan yang sudah Saya buat sesederhana mungkin, cekidot...

<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">&#9740;</a> <nav id="menu" class="menu">  <ul class="dropdown">   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Home</a>   <ul >   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link » </a>    <ul >     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>    </ul>   </li>   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">About</a></li>   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link » </a>    <ul >     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>     <li ><a href="#link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link </a></li>    </ul>   </li>   </ul>   </li>   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Category</a>   <ul >    <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>    <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>   </ul>   </li>   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Portfolio</a>    <ul >     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>    </ul>   </li>   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Work</a>   <ul >    <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>    <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>    <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>    <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation"> Link</a></li>   </ul>   </li>   <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Playground</a>    <ul >     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link  </a></li>     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>     <li ><a href="#Link" title="Inilah Responsive Show and Hide Navigation">Link</a></li>    </ul>   </li>   <li ><a href="#Link" title="Inilah 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>

Result

Semoga sanggup menjadi materi pandangan gres buat Anda, terima kasih.