<![CDATA[
<p>애니메이션 드롭다운 메뉴 CSS</p><p> </p><p> </p><p> </p><div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/dU7ttrxkBhU?si=yqBdoILhFUSUM0PB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/dU7ttrxkBhU?si=yqBdoILhFUSUM0PB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p>애니메이션 드롭다운 메뉴 CSS</p><p><br><html lang="en"> <br><head> <br>  <meta charset="UTF-8"> <br>  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>  <meta http-equiv="X-UA-Compatible" content="ie=edge"> <br>  <title>Document</title> <br>  <link rel="stylesheet" href="style.css"> <br>  <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css</a>" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <br>  <script src="<a href="https://code.jquery.com/jquery-3.6.0.min.js" target="_blank" class="ke-link">https://code.jquery.com/jquery-3.6.0.min.js</a>" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <br><style> <br><br>/* reset padding and margin, set document font */ <br>* { <br>    padding: 0; <br>    margin: 0; <br>    box-sizing: border-box; <br>    font-family: "Roboto", sans-serif; <br>} <br>body{ <br>    width: 100%; <br>    height: 100%; <br>    background-color: #333; <br>} <br>/* Sets color of link texts to white */ <br>a{ <br>    text-decoration: none; <br>    color: #fff; <br>    font-weight: 700; <br>} <br>li { <br>    list-style-type: none; <br>} <br>/* Header 100 percent of body, position relative to body */ <br>header { <br>  width: 100%; <br>  padding: 0 2%; <br>  background-color: black; <br>  position: relative; <br>} <br>/* Display logo and nav side by side to each other (flex) */ <br>.header-container { <br>  width: 100%; <br>  max-width: 1100px; <br>  margin: 0 auto; <br>  padding: 10px 0; <br>  display: flex; <br>  align-items: center; <br>  justify-content: space-between; <br>} <br>/* Set color for Font Awesome icons */ <br>.fas { <br>  color: #fff; <br>} <br>.logo a { <br>  font-size: 40px; <br>} <br>.menu { <br>  display: flex; <br>} <br>.menu li { <br>  margin-left: 60px; <br>} <br>.menu li a { <br>  padding: 20px 0; <br>} <br>/* Change color of link texts when hovered upon */ <br>.menu li a:hover { <br>  color: #fb743e; <br>} <br>/* Also change color of icon when hover on link */ <br>.menu li a:hover - .fas{ <br>  color: #fb743e; <br>} <br>/* Hide all sub nav links by default, display children in column when displayed */ <br>.nav-items-1,.nav-items-2, .nav-items-3, .nav-items-4 { <br>  text-align: center; <br>  display: none; <br>  flex-direction: column; <br>  background-color: black; <br>} <br>.nav-items-1 a, .nav-items-2 a, .nav-items-3 a, .nav-items-4 a { <br>  font-size: 14px; <br>} <br>.nav-items-1, .nav-items-2, .nav-items-3 { <br>  width: 100%; <br>  max-width: 150px; <br>  position: absolute; <br>  top: 64px; <br>  padding: 10px; <br>} <br>.nav-items-4 { <br>  width: 100%; <br>  max-width: 130px; <br>  position: absolute; <br>  top: 64px; <br>} <br>/* This will be used to display sub links for a nav when active */ <br>.navActive { <br>  display: flex; <br>} <br><br><br></style> <br><br></head> <br><body> <br>  <header> <br>    <div class="header-container"> <br>      <div class="logo"> <br>        <a href="">LOGO</a> <br>      </div> <br>      <nav> <br>        <ul class="menu"> <br>          <!-- Nav --> <br>          <li class="nav-1"> <br>            <a href="">Nav Link 1</a> <br>            <i class="fas fa-arrow-down"></i> <br>            <div class="nav-items-1"> <br>              <a href="">Sub Nav Link 1</a> <br>              <a href="">Sub Nav Link 2</a> <br>              <a href="">Sub Nav Link 3</a> <br>              <a href="">Sub Nav Link 4</a> <br>            </div> <br>          </li> <br>          <!-- Nav --> <br>          <li class="nav-2"> <br>            <a href="">Nav Link 2</a> <br>            <i class="fas fa-arrow-down"></i> <br>            <div class="nav-items-2"> <br>              <a href="">Sub Nav Link 1</a> <br>              <a href="">Sub Nav Link 2</a> <br>              <a href="">Sub Nav Link 3</a> <br>              <a href="">Sub Nav Link 4</a> <br>            </div> <br>          </li> <br>          <!-- Nav --> <br>          <li class="nav-3"> <br>            <a href="">Nav Link 3</a> <br>            <i class="fas fa-arrow-down"></i> <br>            <div class="nav-items-3"> <br>              <a href="">Sub Nav Link 1</a> <br>              <a href="">Sub Nav Link 2</a> <br>              <a href="">Sub Nav Link 3</a> <br>              <a href="">Sub Nav Link 4</a> <br>            </div> <br>          </li> <br>          <!-- Nav --> <br>          <li class="nav-4"> <br>            <a href="">Nav Link 4</a> <br>            <i class="fas fa-arrow-down jsicon-2"></i> <br>            <div class="nav-items-4"> <br>              <a href="">Sub Nav Link 1</a> <br>              <a href="">Sub Nav Link 2</a> <br>              <a href="">Sub Nav Link 3</a> <br>              <a href="">Sub Nav Link 4</a> <br>            </div> <br>          </li> <br>        </ul> <br>      </nav> <br>    </div> <br>  </header> <br>  <script src="script.js"></script> <br>  <script> <br>  // toggle first nav on hover  <br>$('.nav-1').hover(function() { <br>  $('.nav-items-1').toggleClass('navActive') <br>}) <br>// toggle second nav on hover  <br>$('.nav-2').hover(function() { <br>  $('.nav-items-2').toggleClass('navActive') <br>}) <br>// toggle third nav on hover  <br>$('.nav-3').hover(function() { <br>  $('.nav-items-3').toggleClass('navActive') <br>}) <br>// toggle fourth nav on hover  <br>$('.nav-4').hover(function() { <br>  $('.nav-items-4').toggleClass('navActive') <br>}) <br>  </script> <br></body> <br></html> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><p> </p><p> </p><p> </p><p>HTML tag 드롭다운 메뉴</p>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
♥☞코딩의 예습방◈▶
애니메이션 드롭다운 메뉴 CSS
gyun님
추천 0
조회 4
24.01.31 09:23
댓글 2
다음검색
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default https://code.tutsplus.com/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery--net-12176t
https://code.tutsplus.com/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery--net-12176t