[Bootstrap] 메뉴 바 ( Navbar )

안녕하세요. 명월입니다.

이 글은 부트스트랩에서 메뉴 바 ( Navbar )에 대한 글입니다.

웹 페이지를 만들면 메뉴 바를 기본적으로 메뉴바를 만듭니다. 단일 페이지의 웹사이트라면(광고 사이트) 메뉴가 필요없을 지도 모르겠지만, 포털이나 블로그, 커뮤니티등의 사이트를 만든다고 하면 이 메뉴바는 기본적으로 만들어야 할 것입니다.

그래서 이 메뉴바는 기본적으로 부트스트랩에서 제공합니다만 디자인으로는 한가지 형태의 메뉴입니다.

PC화면에서는 왼쪽에서 오른쪽으로 길게 늘여진 메뉴바로 모바일에서는 collapse 타입의 메뉴입니다.

PC 화면에서의 메뉴

모바일 화면에서의 메뉴

부트스트랩에서 제공하는 메뉴는 위의 형태 뿐이기 때문에 다른 형태의 메뉴를 만든다면 새로 만들어야합니다.

개인적으로는 메뉴를 만들어 사용합니다만, 기본 형태의 메뉴도 꽤 심플하고 사용하기 편하기 때문에 기본 메뉴라고 해서 나쁘지는 않습니다.

부트스트랩 3.x https://getbootstrap.com/docs/3.3/components/#navbar

부트스트랩 4.x - https://getbootstrap.com/docs/4.3/components/navbar/

※제 블로그는 부트스트랩 3.x으로 작성되어 있기 때문에 부트스트랩 3.x의 예제만 구현했습니다.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 메뉴에서 가장 왼쪽, 모바일에서 표시되는 제목 -->
    <div class="navbar-header">
      <!-- 모바일때 표시되는 메뉴 버튼(PC 버젼에서는 보이지 않는다.)  -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- 메뉴의 홈페이지 이름 -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- 메뉴의 리스트 -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- Link 메뉴 (class가 active가 포함되어 있기 때문에 선택된 메뉴 뜻) -->
        <li class="active">
          <a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <!-- Link 메뉴 -->
        <li><a href="#">Link</a></li>
        <!-- DropDown 형식의 메뉴 -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <!-- 검색 메뉴 -->
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <!-- 오른쪽 정렬의 메뉴 -->
      <ul class="nav navbar-nav navbar-right">
        <!-- Link 메뉴 -->
        <li><a href="#">Link</a></li>
        <!-- DropDown 형식의 메뉴 -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

실행 화면

Brand

• Link (current)
• Link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
  • One more separated link

• Link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

위 소스에서 각 메뉴는 ul > li의 형태로 나타내며, li 태그 밑의 a태그에 href에 이동 주소를 작성하면 선택시에 해당 페이지로 이동이 가능합니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 메뉴의 홈페이지 이름 -->
  <a class="navbar-brand" href="#">Navbar</a>
  <!-- 모바일때 표시되는 메뉴 버튼(PC 버젼에서는 보이지 않는다.)  -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 메인 메뉴 아이템 -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <!-- Home 메뉴 -->
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <!-- Link 메뉴 -->
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <!-- Dropdown 메뉴 -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <!-- 검색 메뉴 -->
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

부트스트랩 4.x은 3.x과 구조적 형태는 비슷한데 class 명이 조금 다릅니다.

그리고 a 태그 대신 button 태그를 넣어서 메뉴에 버튼을 넣을 수도 있고 nav에 색상 클래스를 넣으면 메뉴의 생각도 수정할 수 있습니다.

여기까지 부트스트랩에서 메뉴 바 ( Navbar )에 대한 설명이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.