menu-using-html-css-and-javascript﻿

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="styles.css">     <title>Responsive Navbar with Hamburger Menu</title> <style> * {     margin: 0;     padding: 0;     font-family: Segoe UI; } .nav-bar{     height: 70px;     background: #262626; } .brand{     float: left;     position: absolute;     padding-left: 20px;     line-height: 70px;     font-size: 1.5em; } .brand a{     text-decoration: none;     color: white; } .nav-container{     max-width: 1000px;     margin: 0 auto; } nav{     float: right; } nav ul{     list-style: none; } nav ul li{     float: left;     position: relative; } nav ul li a{     display: block;     padding: 0 20px;     line-height: 70px;     background: #262626;     text-decoration: none;     color: #fff; } nav ul li a:hover{     background: #2ab1ce;     color: #fff; } nav ul li a:not(:only-child):after{     content: '▼';     padding-left: 5px; } nav ul li ul li {     min-width: 190px; } nav ul li ul li a{     padding: 15px;     line-height: 20px; } .nav-dropdown{     position: absolute;     display: none;     z-index: 1; } .nav-mobile{     display: none;     position: absolute;     top: 0;     right: 0;     height: 70px;     width: 70px; } #nav-toggle{     position: absolute;     left: 18px;     top: 22px;     cursor: pointer;     padding: 10px 35px 15px 0px; } #nav-toggle span, #nav-toggle span::before, #nav-toggle span::after{     position: absolute;     display: block;     content: '';     background: #fff;     height: 5px;     width: 35px;     transition: all 300ms ease-in-out; } #nav-toggle span::before{     top: -10px; } #nav-toggle span::after{     bottom: -10px; } #nav-toggle.active span{     background-color: transparent; } #nav-toggle.active span::before, #nav-toggle.active span::after{     top: 0; } #nav-toggle.active span::before{     transform: rotate(45deg); } #nav-toggle.active span::after{     transform: rotate(-45deg); } @media only screen and (max-width: 768px) {     .nav-mobile{         display: block;     }     nav{         width: 100%;         padding: 70px 0 15px;     }     nav ul{         display: none;     }     nav ul li {         float: none;     }     nav ul li a{         padding: 15px;         line-height: 20px;         padding-left: 25%;     }     nav ul li ul li a{         padding-left: 30%;     }     .nav-dropdown{         position: static;     } } @media screen and (min-width: 799px){     .nav-list{         display: block !important;     } } </style> </head> <body>     <div class="nav-bar">         <div class="nav-container">             <div class="brand">                 <a href="#">CodewithFaraz</a>             </div>             <nav>                 <div class="nav-mobile">                     <a href="#" id="nav-toggle">                                              </a>                 </div>                 <ul class="nav-list">                     <li><a href="#">Home</a></li>                     <li><a href="#">About</a></li>                     <li><a href="#">Services</a>                     <ul class="nav-dropdown">                         <li><a href="#">Link 1</a></li>                         <li><a href="#">Link 1</a></li>                         <li><a href="#">Link 1</a></li>                     </ul>                     </li>                     <li><a href="#">Careers</a></li>                     <li><a href="#">Contact</a></li>                 </ul>             </nav>         </div>     </div>     <script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js</a>"></script>     <script src="script.js"></script> </body> </html>

카페정보

SEONGGYUN.EDUBLOGS.ORG

브론즈 (공개)
카페지기 부재중
회원수 3
방문수0
카페앱수0

카페 전체 메뉴

▲

카페 게시글

◈─---… HTML 자바방 menu-using-html-css-and-javascript

gyun님 추천 0 조회 5 23.11.23 12:04 댓글 2

게시글 본문내용

다음검색

저작자 표시 컨텐츠변경 비영리

gyun님
작성자 23.11.23 12:05

첫댓글 https://www.codewithfaraz.com/content/65/how-to-create-a-responsive-navbar-with-hamburger-menu-using-html-css-and-javascript
gyun님
작성자 23.11.23 12:05

https://www.w3schools.com/css/tryit.asp?filename=trycss_default

검색 옵션 선택상자

댓글내용선택됨 옵션 더 보기

댓글내용

댓글 작성자

연관검색어

환율

환자

환기

최신목록

SEONGGYUN.EDUBLOGS.ORG

https://cafe.daum.net/SEONGGYUN

카페 전체 메뉴