웹디자인 기능사 실기 연습 - 가로 메뉴 만들어보기

2022.12.16.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 66

---

Review

 

 

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 66

 

<가로 메뉴 연습하기>

 

 

- HTML

 

    <nav>
      <ul>
        <li class="menu">
          <a href="#">menu1</a>
          <ul class="sub">
            <li><a href="#">submenu1</a></li>
            <li><a href="#">submenu2</a></li>
            <li><a href="#">submenu3</a></li>
            <li><a href="#">submenu4</a></li>
            <li><a href="#">submenu5</a></li>
          </ul>
        </li>
        <li class="menu">
          <a href="#">menu2</a>
          <ul class="sub">
            <li><a href="#">submenu1</a></li>
            <li><a href="#">submenu2</a></li>
            <li><a href="#">submenu3</a></li>
            <li><a href="#">submenu4</a></li>
            <li><a href="#">submenu5</a></li>
          </ul>
        </li>
        <li class="menu">
          <a href="#">menu3</a>
          <ul class="sub">
            <li><a href="#">submenu1</a></li>
            <li><a href="#">submenu2</a></li>
            <li><a href="#">submenu3</a></li>
            <li><a href="#">submenu4</a></li>
            <li><a href="#">submenu5</a></li>
          </ul>
        </li>
        <li class="menu">
          <a href="#">menu4</a>
          <ul class="sub">
            <li><a href="#">submenu1</a></li>
            <li><a href="#">submenu2</a></li>
            <li><a href="#">submenu3</a></li>
            <li><a href="#">submenu4</a></li>
            <li><a href="#">submenu5</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <div class="visual"><img src="img/photo3.jpg" /></div>

 

 

 

- CSS

 

      @font-face {
        font-family: pretendard;
        src: url(../fontawesome-free-6.2.0-web/webfonts/Pretendard-Regular.woff)
          format("woff");
      }

      * {
        padding: 0;
        margin: 0;

        font-family: pretendard, sans-serif;
        font-size: 18px;
      }

      ul,
      li {
        list-style: none;
      }

      a {
        text-decoration: none;

        color: #333;
      }

      body {
        max-width: 100%;

        margin: 0 auto;

        color: #333;
      }

      nav {
        width: 1280px;
        margin: 0 auto;
      }

      nav > ul {
        width: 800px;
        float: right;
      }

      nav > ul > li {
        position: relative;
        float: left;
        width: 25%;
      }

      ul li a {
        display: block;
        width: 100%;
        text-align: center;
        background: #ddd;
        line-height: 40px;
      }

      nav > ul > li > a:hover,
      /* nav > ul > li:hover > a, */
      nav > ul > li > a.on {
        background: #bbd876;
      }

      .sub {
        position: absolute;
        display: none;
        width: 100%;
      }

      .sub li a {
        background: #fff;
        line-height: 30px;
      }

      .sub li a:hover {
        background: #000;
        color: #fff;
      }

      .visual {
        width: 1280px;
        margin: 0 auto;
      }

      .visual img {
        width: 100%;
        height: 700px;

        object-fit: cover;
      }

 

 

 

- jQuery

 

      $(function () {
        // 첫 번째 방법
        /*  $(".menu").hover(
          function () {
            $(this).find(".sub").css("display", "block");
            $(this).children("a").addClass("on");
          },
          function () {
            $(this).find(".sub").css("display", "none");
            $(this).children("a").removeClass("on");
          }
        );  */

        // 두 번째 방법
        $(".menu").hover(
          function () {
            $(this).find(".sub").stop().slideDown(300);
            $(this).children("a").addClass("on");
          },
          function () {
            $(this).find(".sub").stop().slideUp(300);
            $(this).children("a").removeClass("on");
          }
        );
      });

 

 

0

 

 

* 이미지 출처

instagram : @postershop.kr