• Q&A
  • 회원가입
  • 로그인

[basic] BS4 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS4분기점

276  
목차
  1. Navbar 가로형
  2. Navbar 세로형
  3. Navbar 가운데정렬
  4. Navbar 검색창 / 검색버튼
  5. Navbar 텍스트 수직정렬
  6. Navbar 메뉴바 (상단고정 / 하단고정 / 스티키상단고정)

 

Navbar 가로형

※ 로고・배경색・글자색・토글=메뉴숨기기/보이기・드롭다운메뉴

 

<nav class="navbar navbar-expand-sm bg-light navbar-light">


  <!-- 브랜드/로고-->

  <a class="navbar-brand" href="#">Text 로고 또는 Image 로고</a>

  

  <!-- 토글 Button -->

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#hzNavbar">

    <span class="navbar-toggler-icon"></span>

  </button>

 

  <!-- 메뉴링크 -->

  <div class="collapse navbar-collapse" id="hzNavbar">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" href="#">메뉴1</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">메뉴2</a>

      </li>

      <li class="nav-item disabled">

        <a class="nav-link" href="#">메뉴3</a>

      </li>

 

      <!-- 드롭다운 -->

      <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

               메뉴4

          </a>

          <div class="dropdown-menu">

              <a class="dropdown-item" href="#">메뉴4-1</a>

              <a class="dropdown-item" href="#">메뉴4-2</a>

              <a class="dropdown-item" href="#">메뉴4-3</a>

          </div>

    </li>

 

    </ul>

  </div>

</nav>

 

결과보기


1. BS4 메뉴 가로형 구간 설정 (= BS4 분기점) - 외곽 div 태그에 적용.

 

.navbar-expand-xl

@media (min-width:750px ){...}

최소 1200px까지 가로형. 그 이하는 세로형.

 

.navbar-expand-lg

@media (min-width:750px ){...}

최소 992px까지 가로형. 그 이하는 세로형.


.navbar-expand-md

@media (min-width:750px ){...}

최소 768px까지 가로형. 그 이하는 세로형.

 

.navbar-expand-sm

@media (min-width:576px){...}

최소 576px까지 가로형, 그 이하는 세로형.

 


2. 활성 vs 비활성 - <a> 태그에 적용.

 

.active

현재 활성화된 메뉴 (= 현재 선택된 메뉴)

.disabled

링크 비활성화 메뉴 (= 클릭 금지 메뉴)

 

 

3. 배경색 - 외곽 div 태그에 적용.

 

.bg-primary: 파란색

.bg-success : 녹색

.bg-info : 청녹색

.bg-warning : 귤색

.bg-danger : 선홍색

.bg-secondary : 진회색

.bg-dark : 연검정

.bg-light : 연회색

 


4. 글자색 - 외곽 div 태그에 적용.

 

.navbar-dark

흰색 글씨

 

.navbar-light

검은색 글씨

 


5. 브랜드/로고

 

텍스트로고

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <a class="navbar-brand" href="#">Logo</a>

  ...

</nav>

 

이미지로고 - 수직높이 자동조절됨.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

   <a class="navbar-brand" href="#"><img src="hz.jpg" alt="Logo" style="width:40px;"></a>

  ...

</nav>

 


6. 메뉴바 토글 버튼

 

6-1. 

<ul> 메뉴링크를 <div> 태그로 묶고, 아래 클래스와 아이디 부여.

<div class="collapse navbar-collapse" id="hznavbar">

 

6-2.

button 태그에 아래 클래스와 속성 추가

<button class="navbar-toggler" data-toggle="collapse" data-target="#hzNavbar"...>...</button>

 

PS.

.navbar-expand-sm 클래스 제거해 메뉴바를 무조건 숨기고 토글 버튼 표시 가능.

 


7. 드롭다운 메뉴

 

위 예제 참고.

 

 

Navbar 세로형

 

위 예제에서 .navbar-expand-xl|lg|md|sm 클래스 제거

 

결과보기

 

Navbar 가운데정렬

 

<nav class="navbar navbar-expand-sm bg-light justify-content-center">

  ...

</nav>

 



위 예제 경우,

xl,lg,md : 가로형. 가운데정렬
sm : 세로형, 왼쪽정렬.

 

 

Navbar 검색창 / 검색버튼

1. 검색창/검색버튼 나란히 배치.

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <form class="form-inline" action="/action_page.php">

    <input class="form-control mr-sm-2" type="text" placeholder="검색어입력">

    <button class="btn btn-success" type="submit">확인</button>

  </form>

</nav>

 


2. <input> 입력필드 앞에 아이콘 추가

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

  <form class="form-inline" action="/action_page.php">

    <div class="input-group">

      <div class="input-group-prepend">

        <span class="input-group-text">@</span>

      </div>

      <input type="text" class="form-control" placeholder="Username">

    </div>

  </form>

</nav>

 

 

Navbar 텍스트 수직정렬

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">


<!-- 메뉴링크 -->

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">메뉴 1</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">메뉴 2</a>

    </li>

  </ul>


  <!-- 일반텍스트 -->

  <span class="navbar-text">

    메뉴바 안 글자

  </span>


</nav>

 

 

Navbar 메뉴바 (상단고정 / 하단고정 / 스티키상단고정)

[상단 고정]

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

  ...

</nav>

 


[하단 고정]

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

  ...

</nav>

 


[스티키 상단 고정]

 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">

  ...

</nav>


※ sticky-top 속성은 IE11 및 그 이전 버전에서는 작동 안 함. position:relative 속성으로 간주됨. 

 


찾아주셔서 감사합니다. Since 2012