Advertisement
John-E

Basic Menu

Apr 14th, 2021
605
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.74 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  7.         <link rel="stylesheet" href="style.css">
  8.  
  9.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.         <meta name="viewport" content="width=device-width, initial-scale=1" >
  11.         <style>
  12.         body{background: #aaaaaa;}
  13.  
  14. .header{background: #333333;}
  15. .header__logo{color: #ffffff; float: left;  display: block; padding: 20px;}
  16. .header__menu{float: right; margin: 0;padding: 0;}
  17. .header__menu-item{display: inline-block;}
  18. .header__menu-item a {color: #ffffff;  display: block; padding: 20px;}
  19. .header__menu-item a:hover{background: #000;}
  20.  
  21.  
  22. .header__icon-bar{display: block;float: right; padding: 20px; display: none;}
  23. .header__icon-bar span{display: block;height: 3px; width: 30px;background: #ffffff; margin-bottom: 5px;}
  24.  
  25.  
  26. /*----------------------------------
  27. Tablet
  28. ----------------------------------*/
  29. @media (max-width: 998px){
  30.  
  31.  
  32. }
  33.  
  34. /*----------------------------------
  35. Smarthphone
  36. ----------------------------------*/
  37. @media (max-width: 767px){
  38.     .header__icon-bar{display: block;}
  39.     .header__menu{width: 100%;height:0;overflow:hidden;background-color:#333;}
  40.     .header__menu-item{display: block; color: #fff;}
  41.     .is-open{/*eight: 300px;*/ overflow: auto; color: #000;}
  42.     .is-open + ul{overflow:visible;height:auto;}
  43. }
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54. .clearfix:after {
  55.     visibility: hidden;
  56.     display: block;
  57.     font-size: 0;
  58.     content: " ";
  59.     clear: both;
  60.     height: 0;
  61.   }
  62.   * html .clearfix             { zoom: 1; } /* IE6 */
  63.   *:first-child+html .clearfix { zoom: 1; } /* IE7 */
  64.         </style>
  65.     </head>
  66.     <body>
  67.    
  68.    <header class="header clearfix">
  69.        <a href="" class="header__logo">Logo</a>
  70.        <a href="" class="header__icon-bar">
  71.            <span></span>
  72.            <span></span>
  73.            <span></span>
  74.         </a>
  75.        <ul class="header__menu">
  76.            <li class="header__menu-item"> <a href="">Item</a></li>
  77.            <li class="header__menu-item"> <a href="">Item</a></li>
  78.            <li class="header__menu-item"> <a href="">Item</a></li>
  79.            <li class="header__menu-item"> <a href="">Item</a></li>
  80.            <li class="header__menu-item"> <a href="">Item</a></li>
  81.        </ul>
  82.    </header>
  83.    
  84.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  85.    
  86.    
  87.  <script>
  88.        $(document).ready(function(){
  89.  
  90.        $(".header__icon-bar") .click(function (e) {
  91.         $(".header__icon-bar").toggleClass('is-open')
  92.        e.preventDefault();
  93.        })
  94.     })
  95.    </script>
  96.  
  97.     </body>
  98. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement