Post
Ask Question

Hide Or Show Menu In Html

To make a Static Menu in HTML, here's the HTML code:
Html code :
  1. <header id="header" role="banner">  
  2.     <div class="test"></div>  
  3.     <nav class="navigation" role="navigation">  
  4.         <ul class="menu unfixed" role="menu">  
  5.             <li class="button" role="menuitem"><a href="#">Menu 1</a>  
  6.             </li>  
  7.             <li class="button" role="menuitem"><a href="#">Menu 2</a>  
  8.             </li>  
  9.             <li class="button" role="menuitem"><a href="#">Menu 3</a>  
  10.             </li>  
  11.         </ul>  
  12.     </nav>  
  13. </header>  
Now the javascript is to hide or show menu. As per our requirement here's the code:
 
JavaScript code: 
  1. var _ie6 = $.browser == 'msie' && $.browser.version < 7;  
  2.   
  3. if (!_ie6) {  
  4.     $(window).scroll(function () {  
  5.         var _y = $(this).scrollTop(),  
  6.             _nav = $('.navigation'),  
  7.             _top = $('.navigation').height();  
  8.         if (_y >= _top) {  
  9.   
  10.             if (!_nav.hasClass('fixed')) {  
  11.                 _nav.addClass('fixed').hide(), _nav.find('ul').removeClass('unfixed').addClass('fixed'),  
  12.                 _nav.fadeIn(600);  
  13.             }  
  14.         } else {  
  15.             _nav.removeClass('fixed'), _nav.find('ul').removeClass('fixed').addClass('unfixed');  
  16.         }  
  17.   
  18.     });  
  19. }  
And finsl the css code is below for giving the styling
 
Css Code :
  1. #header {  
  2.     position:relative;  
  3.     width:100%;  
  4.     height:3000px;  
  5. }  
  6. .test {  
  7.     height:100px;  
  8. }  
  9. .navigation {  
  10.     position:relative;  
  11.     width:370px;  
  12.     height:50px;  
  13.     margin:0 auto;  
  14.     background:#ccc;  
  15.     z-index:100;  
  16.     border-radius:10px;  
  17. }  
  18. .navigation .menu {  
  19.     height:50px;  
  20. }  
  21. .navigation .menu .button {  
  22.     float:left;  
  23. }  
  24. .navigation .menu .button a {  
  25.     display:block;  
  26.     width:100px;  
  27.     height:20px;  
  28.     line-height:20px;  
  29.     color:#fff;  
  30.     background:#0072BA;  
  31.     font-family:Helvetica, sans-serif;  
  32.     text-align:center;  
  33.     padding:5px;  
  34.     margin:10px 0 0 10px;  
  35.     border-radius:5px;  
  36. }  
  37. nav.fixed {  
  38.     position: fixed;  
  39.     width:100%;  
  40.     top: 0;  
  41.     left:0;  
  42.     margin:0;  
  43.     border-radius:0;  
  44. }  
  45. ul.fixed {  
  46.     width:370px;  
  47.     position:relative;  
  48.     margin:0 auto;  
  49. }  
  50. ul.unfixed {  
  51.     position:absolute;  
  52.     margin:0 auto;  
  53. }  
Finally the following is the generated output: