가로 네비게이션 바를 만드는 방법에는 두 가지가 있습니다.
인라인(inline) 또는 플로팅(floating) 목록 항목 사용하는 것입니다.\

가로 네비게이션 바를 만드는 한 가지 방법은 이전 페이지의 “표준”코드 외에도, <li> 요소를 인라인(inline)으로 지정하는 것입니다.

• Home
• News
• Contact
• About

• display: inline; - 기본적으로 <li> 요소는 블록 요소입니다. 여기서는, 각 목록 항목 앞뒤의 줄 바꿈을 제거하여 한 줄에 표시합니다.
  

가로 네비게이션 바를 만드는 또 다른 방법은 <li> 요소를 플로팅하고, 네비게이션 링크의 레이아웃을 지정하는 것입니다.

• Home
• News
• Contact
• About

Note:If a !DOCTYPE is not specified, floating items can produce unexpected results.

A background color is added to the links to show the link area. The whole link area is clickable, not just the text.

Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list..

• float: left; - float를 사용하여 블럭 요소들을 서로 옆으로 배치되게 합니다.
• display: block; - 패딩(그리고 원하는 경우, 높이, 너비, 마진 등)을 지정할 수 있습니다.
• padding: 8px; - 블럭 요소는 사용 가능한 전체 너비를 차지하므로 나란히 float할 수 없습니다. 그래서 패딩을 지정하여 보기 좋게 만듭니다.
• background-color: #dddddd; - 각 요소에 회색의 배경색을 추가합니다.

Tip: 전체 너비의 배경색을 원하는 경우, 각 <a> 요소 대신 <ul>에 배경색을 추가합니다.

• Home
• News
• Contact
• About

A background color is added to the list instead of each link to create a full-width background color

Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list.

어두운 배경색으로 기본 가로 네비게이션 바를 만들고, 사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.

• Home
• News
• Contact
• About

현재 링크에 “active” 클래스를 추가하여, 사용자가 어느 페이지에 있는지 알 수 있습니다.

• Home
• News
• Contact
• About

목록 항목(list items)을 오른쪽으로 플로팅하여, 링크를 오른쪽 정렬합니다 (float : right;):

• Home
• News
• Contact
• About

링크 구분선(link dividers)을 만들려면 border-right 속성을 <li>에 추가합니다:

• Home
• News
• Contact
• About

사용자가 페이지를 스크롤 하더라도, 내비게이션 바를 페이지 상단 또는 하단에 유지합니다.

• Home
• News
• Contact
• About

• Home
• News
• Contact
• About

Note:고정 위치(fixed position)는 모바일 장치에서 제대로 작동하지 않을 수 있습니다.

얇은 회색 보더가 있는 회색 가로 네비게이션 바의 예제:

• Home
• News
• Contact
• About

sticky navbar를 만들려면 position: sticky;를 <ul>에 추가합니다.
sticky 요소는 스크롤 위치에 따라 relative 및 fixed 사이에서 전환됩니다.
주어진 오프셋 위치가 뷰포트에서 충족될 때까지, relative 배치된 다음 제자리에 “고정”됩니다 (position : fixed 처럼).

• Home
• News
• Contact

sticky Navigation Bar Example

The navbar will stick to the top when you reach its scroll position.

Note: Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.

Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Note: Internet Explorer는 sticky positioning(고정 위치 지정)을 지원하지 않습니다.
Safari에는 -webkit- 접두사가 필요합니다 (위의 예 참조).
또한 sticky positioning(고정 위치 지정)이 작동하려면 top, right, bottom 또는left 중 하나 이상을 지정해야 합니다.

• Home
• News
• Contact
• About

• Home
• News
• Contact
• About

네비게이션 바 내부에 드롭다운 메뉴를 추가하는 방법.

• Home
• News
• Dropdown
  Link 1 Link 2 Link 3

Dropdown Menu inside a navigation Bar

Hover over the "Dropdown" link to see the dropdown menu.