221116 page_hash.html

2022. 11. 16. 15:25·Skills/JavaScript
<!DOCTYPE html>
<html lang="ko">
  <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" />
    <title>page_hash</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="./js/jquery.scrollTo.min.js"></script>
    <script>
      $(function () {
        $(".lnb a").click(function (e) {
          e.preventDefault();

          $(window).scrollTo(this.hash || 0, 1000);
        });
      });
    </script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      .lnb {
        width: 100%;
        height: 30px;
        background-color: black;
        position: fixed;
        top: 0;
        left: 0;
      }

      .lnb ul {
        width: 1000px;
        overflow: hidden;
        margin: 0 auto;
      }

      .lnb li {
        width: 25%;
        height: 30px;
        float: left;
      }

      .lnb li a {
        display: block;
        color: white;
        text-decoration: none;
        text-align: center;
        line-height: 30px;
      }

      .lnb li a:active {
        color: red;
      }

      .contents section {
        width: 100%;
        height: 100vh;
        border: 1px solid black;
        box-sizing: border-box;
        font-size: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <nav class="lnb">
      <ul>
        <li><a href="#page01">menu01</a></li>
        <li><a href="#page02">menu02</a></li>
        <li><a href="#page03">menu03</a></li>
        <li><a href="#page04">menu04</a></li>
      </ul>
    </nav>

    <div class="contents">
      <section id="page01">page01</section>
      <section id="page02">page02</section>
      <section id="page03">page03</section>
      <section id="page04">page04</section>
    </div>
  </body>
</html>

'Skills > JavaScript' 카테고리의 다른 글

221117 quick_menu.html  (0) 2022.11.17
221117 tab_sheet.html  (0) 2022.11.17
221116 nav_fixed.html  (0) 2022.11.16
221116 full_down_lnb.html  (0) 2022.11.16
221115 ham_menu03.html (open, close 버튼 만들기)  (0) 2022.11.15
'Skills/JavaScript' 카테고리의 다른 글
  • 221117 quick_menu.html
  • 221117 tab_sheet.html
  • 221116 nav_fixed.html
  • 221116 full_down_lnb.html
개발자 윤구나
개발자 윤구나
개발 공부를 하고 있습니다. Let's go!
  • 개발자 윤구나
    이것은 무엇?????
    개발자 윤구나
    • 분류 전체보기
      • Skills
        • Java
        • Database
        • Flutter, Dart
        • JavaScript
        • React
        • HTML5
        • CSS3, SCSS
        • PHP
        • C#
        • Unity
        • Algorithm
        • GIT·GitHub
        • 그 외
      • Book Review
      • IT NEWS
      • 설계
      • 자기 계발
  • 블로그 메뉴

    • 홈
    • 방명록
  • 인기 글

  • 최근 글

  • 최근 댓글

  • 전체
    오늘
    어제
  • hELLO· Designed By정상우.v4.10.3
개발자 윤구나
221116 page_hash.html
상단으로

티스토리툴바