<title>Responsive Navigation Bar</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet"> </head> <body> <header> <div class="container"> <div class="logo-wrap"> <a href="/">LOGO</a> </div> <nav> <ul> <li class="items"><a href="#">Home</a></li> <li class="items"><a href="#">About</a></li> <li class="items"><a href="#">Blogs</a></li> <li class="items"><a href="#">Contact</a></li> <li class="items"><a href="#">Feedback</a></li> </ul> </nav> <div class="mobie-icon"> <span class="material-icons-outlined open">menu</span> <span class="material-icons-outlined close">close</span> </div> </div> </header> <script> $(document).ready(function(){ $('.mobie-icon').click(function(){ $('body').toggleClass("is-mobie"); }); }); </script> </body> </html> CSS Copy và dán đoạn code này vào file styles.css @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Montserrat',sans-serif; font-size: 16px; line-height: 32px; } a { text-decoration: none; color: inherit; } header { padding-top: 25px; padding-bottom: 25px; background: #2962FF; } header .container{ display: flex; align-items: center; max-width: 1000px; margin: auto; padding-right: 15px; padding-left: 15px; } .logo-wrap { flex-basis: 20%; } .logo-wrap a { color: #fff; } nav { flex-basis: 80%; } ul { list-style: none; display: flex; text-transform: uppercase; } ul li{ padding-left: 20px; padding-right: 20px; } ul li a { position: relative; } ul li a:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #fff; opacity: 0; transition: all 0.2s linear; } ul li:hover a::after { opacity: 1; bottom: 0px; } ul li a { color: #fff; letter-spacing: 1px; } ul li.btn { display: none; } .mobie-icon { display: none; } .mobie-icon:hover { cursor: pointer; } .mobie-icon span { color: #fff; vertical-align: middle; } @media all and (max-width: 768px){ .is-mobie { height: 100vh; overflow: hidden; } .is-mobie nav { display: block; left: 0; } .is-mobie .mobie-icon .open { display: none; } .is-mobie .mobie-icon .close { display: block; } .logo-wrap { flex: 1; } .mobie-icon { display: block; } .mobie-icon .close { display: none; } nav { position: fixed; left: 100%; top: 82px; background-color: #EEEEEE; width: 100%; height: 100vh; padding-top: 35px; transition: left .3s linear; } nav ul{ display: block; } nav ul li { padding-top: 15px; padding-bottom: 15px; } nav ul li a{ color: #000; } } Vậy là xong, một menu đơn giản! Bạn có thể tùy chỉnh thêm theo ý mình như là khung search, icon mạng xã hội, tôi chỉ tập trung vào repsonsive.">
