[Spring Boot] 페이지에 상단 바 코딩하기

728x90

프로그래밍 세계를 탐구합시다.

Spring Boot를 활용하여 페이지에 상단 바와 카테고리를 구현할 수 있습니다.

5개의 카테고리로 구성되어 있고, 하위 항목이 있는 카테고리일 경우 마우스를 올리면 하위 항목이 내려옵니다.

구현 화면

작성 코드

header.html

<!DOCTYPE html>
<html>

<head>

</head>

<style>
  .my-bg-color {
    background-color: none;
  }

  .my-text-size {
    font-size: 50px;
    font-weight: bold;
    color: rgb(255, 179, 0);
  }

  .title {
    width: 20rem;
  }

  .title:hover {
    text-decoration: none;
    color: rgb(255, 179, 0);
  }

  .nav-color {
    background-color: none;
  }

  .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgb(255, 179, 0);
    font-size: 20px;
    transition-duration: .3s;
  }

  .nav-link:hover {
    color: 255, 179, 0 !important;
  }

  .link-dark {
    text-decoration: none;
  }

  .dropdown-submenu {
    position: relative;
  }

  .dropdown-menu {
    border-color: none;
    border: none !important;
    text-align: center;
    width: 13rem;
    margin: 1rem;
    margin-top: -1rem;
    background-color: rgb(255, 179, 0, 0.45);
  }


  .navbar-nav .dropdown-menu {
    border-top: 3px solid rgb(255, 179, 0) !important;
    position: fixed;
  }

  .dropdown-toggle::after {
    display: none;
  }

  .navbar-nav.ml-auto li a {
    font-size: 15px;
  }

  .navbar-nav .nav-link {
    margin: 0rem 0rem -3rem 1rem;
    width: 13rem;
    height: 10rem;
  }

  .navbar-nav {
    flex-direction: row;
  }

  .dropdown-item {
    font-weight: 50;
    width: 13rem;
    color: white;
  }
</style>

<body>
  <div class="p-5 my-bg-color text-white d-flex justify-content-between">
    <h1 class="my-text-size">
      <a href="/"><img class="title" th:src="@{/logo.png}" alt=""></a>
    </h1>
    <ul class="navbar-nav mx-auto">
      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="/map" id="infoDropdown" role=" button" aria-haspopup="true"
          aria-expanded="false" style="color: rgb(255, 179, 0);">충전소 찾기</a>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="postsDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">게시판</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' href='/board/list'>공지사항</a>
          <div class="dropdown">
            <a class='dropdown-item' href='/qna/list'>Q&A</a>
          </div>
        </div>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="postsDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">정보마당</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' href='/statistic/chargerStatus'>통계정보</a>
          <div class="dropdown">
            <a class='dropdown-item' href='/statistic/ChargerExpense'>서비스안내</a>
          </div>
        </div>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="infoDropdown" role=" button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">미디어</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' href='/media/news?searchText=전기차'>전기차 뉴스</a>
          <div class="dropdown">
            <a class='dropdown-item' href='/media/reels'>전기차 영상</a>
            <div class="dropdown">
              <a class='dropdown-item' href='http://localhost:3000/'>전기차 주행거리</a>
              <div class="dropdown">
                <a class='dropdown-item' th:href='@{/media/gamepage}'>전기차 게임</a>
              </div>
            </div>
          </div>
        </div>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="postsDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">멤버십</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' th:href='@{/exchange}'>코인교환</a>
          <div class="dropdown">
            <a class='dropdown-item' th:href='@{/coupon}'>쿠폰함</a>
            <div class="dropdown">
              <a class='dropdown-item' th:href='@{/membership}'>가입하기</a>
              <div class="dropdown">
                <a th:if="${session != null and session.user_info != null and session.has_membership}"
                  class='dropdown-item' th:href='@{/mymembership}'>나의 멤버십</a>
              </div>
            </div>
          </div>
        </div>
      </li>


    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script type='text/javascript'>

    $(document).ready(function () {
      $('.dropdown').on('mouseenter', function () {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
      });

      $('.dropdown').on('mouseleave', function () {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
      });
    });
  </script>
</body>

</html>

header2.html

<!DOCTYPE html>
<html>

<head>

</head>

<style>
  .my-bg-color {
    background-color: none;
  }

  .my-text-size {
    font-size: 50px;
    font-weight: bold;
    color: rgb(255, 179, 0);
  }

  .title {
    width: 20rem;
  }

  .title:hover {
    text-decoration: none;
    color: rgb(255, 179, 0);
  }

  .nav-color {
    background-color: none;
  }

  .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgb(255, 179, 0);
    font-size: 20px;
    transition-duration: .3s;
  }

  .nav-link:hover {
    color: 255, 179, 0 !important;

  }

  .link-dark {
    text-decoration: none;
  }

  .dropdown-submenu {
    position: relative;
  }

  .dropdown-menu {
    border-color: none;
    border: none !important;
    text-align: center;
    width: 13rem;
    margin: 1rem;
    margin-top: -1rem;
    background-color: rgb(255, 179, 0, 0.45);
  }


  .navbar-nav .dropdown-menu {
    border-top: 3px solid rgb(255, 179, 0) !important;
    position: fixed;
  }

  .dropdown-toggle::after {
    display: none;
  }

  .navbar-nav.ml-auto li a {
    font-size: 15px;
  }

  .navbar-nav .nav-link {
    margin: 0rem 0rem -3rem 1rem;
    width: 13rem;
    height: 10rem;
  }
  
  .navbar-nav {
    flex-direction: row;
  }

  .dropdown-item {
    font-weight: 50;
    width: 13rem;
    color: white;
  }
</style>

<body>
  <div class="p-5 my-bg-color text-white d-flex justify-content-between">
    <h1 class="my-text-size">
      <a href="/"><img class="title" th:src="@{/logo.png}" alt=""></a>
    </h1>
    <ul class="navbar-nav mx-auto">
      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="/map" id="infoDropdown" role=" button"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">충전소 찾기</a>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="postsDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">게시판</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' href='/board/list'>공지사항</a>
          <div class="dropdown">
            <a class='dropdown-item' href='/qna/list'>Q&A</a>
          </div>
        </div>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="postsDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">정보마당</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' href='/statistic/chargerStatus'>통계정보</a>
          <div class="dropdown">
            <a class='dropdown-item' href='/statistic/ChargerExpense'>서비스안내</a>
        </div>
        </div>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="infoDropdown" role=" button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">미디어</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' href='/media/news?searchText=전기차'>전기차 뉴스</a>
          <div class="dropdown">
            <a class='dropdown-item' href='/media/reels'>전기차 영상</a>
            <div class="dropdown">
              <a class='dropdown-item' th:href='@{/media/gamepage}'>전기차 게임</a>
            </div>
          </div>
        </div>
      </li>

      <li class="nav-item dropdown mr-3">
        <a class="nav-link dropdown-toggle active" href="#" id="postsDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: rgb(255, 179, 0);">멤버십</a>
        <div class="dropdown-menu" aria-labelledby="infoDropdown">
          <a class='dropdown-item' th:href='@{/exchange}'>코인교환</a>
          <div class="dropdown">
            <a class='dropdown-item' th:href='@{/coupon}'>쿠폰함</a>
            <div class="dropdown">
              <a class='dropdown-item' th:href='@{/membership}'>구독하기</a>
                <div class="dropdown">
                  <a class='dropdown-item' th:href='@{/mymembership}'>나의 멤버십</a>
                </div>
            </div>
          </div>
        </div>
      </li>


    </ul>
  </div>

  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script type='text/javascript'>
   
    $(document).ready(function () {
      $('.dropdown').on('mouseenter', function () {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
      });

      $('.dropdown').on('mouseleave', function () {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
      });
    });
  </script>
</body>

</html>

위와 같은 코드를 작성하여 페이지에 상단 바를 구현할 수 있습니다.

728x90

저작자표시 비영리 변경금지

'IT > Java - Spring Boot' 카테고리의 다른 글

[Spring Boot] 게시판 만들기 (1)	2023.11.01
[Spring Boot] 카카오 지도 api 활용하여 지도 출력하기 (1)	2023.11.01
[Spring Boot] 페이지에 사이드 바 코딩하기 (0)	2023.11.01
[Spring Boot] 페이지에 팝업 창 띄우기 (0)	2023.11.01
[HTML/CSS/JS] codepen 페이지에 번개 효과 구현하기 (2)	2023.10.30