Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
- <link rel="stylesheet" href="style.css">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1" >
- <style>
- body{background: #aaaaaa;}
- .header{background: #333333;}
- .header__logo{color: #ffffff; float: left; display: block; padding: 20px;}
- .header__menu{float: right; margin: 0;padding: 0;}
- .header__menu-item{display: inline-block;}
- .header__menu-item a {color: #ffffff; display: block; padding: 20px;}
- .header__menu-item a:hover{background: #000;}
- .header__icon-bar{display: block;float: right; padding: 20px; display: none;}
- .header__icon-bar span{display: block;height: 3px; width: 30px;background: #ffffff; margin-bottom: 5px;}
- /*----------------------------------
- Tablet
- ----------------------------------*/
- @media (max-width: 998px){
- }
- /*----------------------------------
- Smarthphone
- ----------------------------------*/
- @media (max-width: 767px){
- .header__icon-bar{display: block;}
- .header__menu{width: 100%;height:0;overflow:hidden;background-color:#333;}
- .header__menu-item{display: block; color: #fff;}
- .is-open{/*eight: 300px;*/ overflow: auto; color: #000;}
- .is-open + ul{overflow:visible;height:auto;}
- }
- .clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
- * html .clearfix { zoom: 1; } /* IE6 */
- *:first-child+html .clearfix { zoom: 1; } /* IE7 */
- </style>
- </head>
- <body>
- <header class="header clearfix">
- <a href="" class="header__logo">Logo</a>
- <a href="" class="header__icon-bar">
- <span></span>
- <span></span>
- <span></span>
- </a>
- <ul class="header__menu">
- <li class="header__menu-item"> <a href="">Item</a></li>
- <li class="header__menu-item"> <a href="">Item</a></li>
- <li class="header__menu-item"> <a href="">Item</a></li>
- <li class="header__menu-item"> <a href="">Item</a></li>
- <li class="header__menu-item"> <a href="">Item</a></li>
- </ul>
- </header>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $(".header__icon-bar") .click(function (e) {
- $(".header__icon-bar").toggleClass('is-open')
- e.preventDefault();
- })
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement