본문 바로가기
HTML/CSS문법

CSS 수평 네비게이션 바

by flycoding 2023. 9. 2.
반응형

CSS horizontal navigation bar

CSS 수평 네비게이션 바 예제

 

수평 탐색 표시줄을 만드는 방법에는 inline 또는 floating 목록 항목을 사용하는 두 가지가 있다.

 

inline list items

수평 탐색 모음을 작성하는 한 가지 방법은 이전 페이지의 "표준" 코드 외에 <li> 요소를 인라인으로 지정하는 것이다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

li 요소에 display값을 inline을 설정함으로 세로에서 가로로, 수평으로 아이템이 표시되며 위의 코드를 실행한 결과는 아래 그림과 같다.

CSS 수평네비게이션바 display: inline 설정 예제

 

예를 들어 설명:
display: inline; - 기본적으로 <li> 요소는 블록 요소이다. 여기서는 각 목록 항목의 앞뒤 줄 바꿈을 제거하여 한 줄에 표시한다.

 

floating iist items

수평 탐색 막대를 만드는 또 다른 방법은 <li> 요소를 띄우고 탐색 링크의 레이아웃을 지정하는 것이다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p><b>Note:</b> !DOCYPE을 지정하지 않으면 부동 항목에서 예기치 않은 결과가 발생할 수 있습니다.</p>
<p>링크에 배경색을 추가하여 링크 영역을 표시합니다. 텍스트뿐만 아니라 전체 링크 영역을 클릭할 수 있습니다.</p>
<p><b>Note:</b> overflow:li 요소가 목록 외부로 나가는 것을 방지하기 위해 ul 요소에 숨김 추가.</p>

</body>
</html>

li 요소에 float값을 left로 설정하여 왼쪽으로 수평하게 리스트 아이템이 표시되며 위의 코드를 실행하면 아래 그림과 같다.

CSS float list item 수평 네비게이션바 예제

 

예를 들어 설명:

플로트: 왼쪽; - 플로트를 사용하여 블록 요소가 서로 옆에서 floating 되도록 한다
display: block; - 패딩을 지정할 수 있다(그리고 필요한 경우 높이, 너비, 여백 등)
패딩: 8px; - 각 <a> 요소 사이에 패딩을 지정하여 보기 좋게 만든다
background-color: #ddddddd; - 각 <a> 요소에 회색 배경색 추가
팁: 전체 너비의 배경색을 원하는 경우 각 <a> 요소 대신 <ul>에 배경색을 추가한다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dddddd;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 8px;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p><b>Note:</b> !DOCYPE을 지정하지 않으면 부동 항목에서 예기치 않은 결과가 발생할 수 있습니다.</p>
<p>링크에 배경색을 추가하여 링크 영역을 표시합니다. 텍스트뿐만 아니라 전체 링크 영역을 클릭할 수 있습니다.</p>
<p><b>Note:</b> overflow:li 요소가 목록 외부로 나가는 것을 방지하기 위해 ul 요소에 숨김 추가.</p>

</body>
</html>

float:left로 설정하였고, background-color:#dddddd를 ul요소로 옮겨서 라인 전체에 색을 설정하였다. 위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS float list item 수평 네비게이션바 예제

 

CSS 수평 네비게이션 바 예제

어두운 배경색의 기본 수평 탐색 막대를 만들고 사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경한다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다. a 클래스에 hover하면 배경색을 #111로 설정한다.

CSS 수평 네비게이션 바 예제

 

active/current navigation link

현재 링크에 "active" 클래스를 추가하여 사용자가 어떤 페이지에 있는지 알 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다.

CSS 수평 네비게이션바 예제(active 추가)

 

오른쪽 링크 정렬

리스트 항목을 오른쪽으로 이동하여 링크를 오른쪽으로 정렬한다(float:right;):

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

</body>
</html>

'about' li 요소에 스타일을 float:right로 설정하여 오른쪽으로 정렬하였다.

CSS 수평네비게이션바(float:right, 오른쪽 정렬) 예제

 

<ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li style="float:right"><a href="#contact">연락처</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

위의 코드에서 '연락처'에도 float:right를 설정하면 아래 그림과 같은 결과가 표시된다.

CSS 수평네비게이션바(float:right, 오른쪽 정렬) 예제

연락처, about이 오른쪽으로 정렬되는데, 순서를 잘 기억하고 사용하기를 바란다.

 

윤곽선 나누기

border-right 속성을 <li>에 추가하여 링크 분할자를 만든다:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  border-right:1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>

</body>
</html>

li 요소에 border-right 에 1px solid #bbb 값을 설정하여 각 li요소 간에 윤곽선을 설정한 그림이 아래와 같다.

CSS 수평 네비게이션바 border-right 속성 활용예제

 

고정된 네비게이션 바(fixed navigation bar)

사용자가 페이지를 스크롤할 때도 탐색 표시줄을 페이지의 맨 위 또는 맨 아래에 유지한다:

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
  <h1>고정 탑 네비게이션 바</h1>
  <h2>효과를 보려면 이 페이지를 스크롤하십시오t</h2>
  <h2>스크롤하는 동안 탐색 모음이 페이지 상단에 유지됩니다</h2>

  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>
  <p>어떤 문자 어떤 문자 어떤 문자 어떤 문자 어떤 문자..</p>  
</div>

</body>
</html>

ul요소에 position에는 fixed, top에 0, width속성에는 100%를 설정하면, 본문 스크롤을 하여도 네비게이션바는 고정되며 스크롤이 되며, 위의 코드를 실행하면 아래 그림과 같다.

CSS 고정 수평네비게이션바 position:fixed 활용 예제

 

회색 네비게이션바

얇은 회색 테두리가 있는 회색 수평 탐색 막대의 예:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

ul요소에 border에 1px solid #e7e7e7 로 background-color 속성에는 #f3f3f3 회색 계열을 설정하였고 위의 코드를 실행하면 아래 그림과 같다.

CSS 회색 수평네비게이션바 활용예제

 

Sticky NavBar

position: sticky; <ul>에 추가하여 sticky navbar를 만든다.

sticky 요소는 스크롤 위치에 따라 상대와 고정 사이를 전환한다. 뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적으로 위치한 다음 제자리에서 "스틱"(예를 들어 위치: 고정)합니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>스크롤 위치에 도달하면 내비게이션 바가 상단에 <강력>으로 고정됩니다.</p>
<p><strong>Note:</strong> IInternet Explorer는 고정 위치 지정을 지원하지 않으며 Safari에는 -webkit- 접두사가 필요합니다.</p>
<p>Homer hangin' on my neck
The bracelet matches the set
My brother named his ting Nadal
Let's stop all that back and forth over the net
My mama wish I woulda went corporate
She wish I woulda went exec'
I still turn to a CEO
So the lifestyle she respect
Ayy, two Sprinters to Quebec
Chérie, où est mon bec?
They only givin' niggas plus ones
So I never pull up to the Met
You know I gotta bring the set
You know I gotta bring the G-Block
You know I gotta bring the D-Block
'Cause you know how sticky it get, ayy
You know how sticky it get, ayy
You know how sticky it get, ayy
You know how sticky it get, ayy
She want me to play with that cat, ayy
She lovin' how I'm makin' her wet, ayy
You know how sticky it get, ayy.</p>


</body>
</html>

위의 예제에서 ul 요소에 position속서에 sticky값을 설정함으로 화면을 스크로 다운하면 네비게이션바가 top에 도착하면 고정되며 글 내용은 스크롤이 되며 위의 코드를 실행하면 아래 그림과 같다.

CSS 수평네비게이션바 position:sticky 활용 예제

 

Responsive TopNav

CSS 미디어 쿼리를 사용하여 응답 상단 탐색을 만드는 방법.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #04AA6D;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}
</style>
</head>
<body>

<ul class="topnav">
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li class="right"><a href="#about">About</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>Responsive Topnav 예제</h2>
  <p>이 예에서는 미디어 쿼리를 사용하여 화면 크기가 600px 이하인 경우 Topnav를 수직으로 쌓습니다.</p>
  <p>CSS 튜토리얼에서 나중에 미디어 쿼리 및 응답형 웹 디자인에 대해 자세히 알게 될 것입니다.</p>
  <h4>브라우저 창 크기를 조정하여 효과 확인.</h4>
</div>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다. 윈도의 크기에 따라서 responsive하게 네비게이션바가 설정이 되며 아래 그림과 같다.

CSS responsive TopNav 예제

위도우 크기를 600px로 줄어들게 되면 아래 그림과 같이 표시된다.

CSS responsive TopNav 활용 예제

 

Responsive SideNav

CSS 미디어 쿼리를 사용하여 응답 사이드 내비게이션을 만드는 방법.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
 
ul.sidenav li a.active {
  background-color: #4CAF50;
  color: white;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li><a href="#contact">연락처</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div class="content">
  <h2>Responsive Sidenav 예제</h2>
  <p>이 예에서는 화면 크기가 900px 이하인 경우 미디어 쿼리를 사용하여 사이드나브를 위쪽 탐색 막대로 변환합니다.</p>
  <p>또한 탐색 링크를 수직으로 적층하고 중앙에 배치하는 400px 이하 화면에 대한 미디어 쿼리를 추가했습니다.</p>
  <p>CSS 튜토리얼에서 미디어 쿼리 및 응답 웹 디자인을 자세히 알아보십시오.</p>
  <h3>브라우저 창 크기를 조정하여 효과를 확인합니다.</h3>
</div>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다.

CSS responsive sidebar 예제

윈도의 크기를 줄이면 아래 그림과 같다.

CSS responsive sidebar 예제

 

Dropdwon Navbar

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">드롭다운</a>
    <div class="dropdown-content">
      <a href="#">링크 1</a>
      <a href="#">링크 2</a>
      <a href="#">링크 3</a>
    </div>
  </li>
</ul>

<h3>탐색 모음 내부의 드롭다운 메뉴</h3>
<p>드롭다운 메뉴를 보려면 "드롭다운" 링크 위에 마우스를 놓습니다.</p>

</body>
</html>

드롭다운메뉴에 마우스를 갖다대면, 링크1, 링크2, 링크3의 서브 메뉴가 표시되면 위의 코드를 실행하면 아래 그림과 같다.

CSS dropdown Navbar 활용예제

 

이상으로 CSS 수평 네비게이션바의 다양한 예제를 살펴보았다.

꼭 손으로, 눈으로, 머리로 익히며 실습하기를 바란다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

 

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

'HTML > CSS문법' 카테고리의 다른 글

CSS image gallery  (3) 2023.09.04
CSS dropdown  (2) 2023.09.03
CSS navigation bar  (0) 2023.09.01
CSS opacity/transparency  (0) 2023.08.31
CSS pseudo-elements  (1) 2023.08.30

관련글

댓글

티스토리툴바