CSS 수평 탐색 모음
수평 탐색 모음
수평 탐색 모음을 만드는 방법에는 두 가지가 있습니다. 인라인 또는 부동 목록 항목 사용 .
인라인 목록 항목
수평 탐색 모음을 만드는 한 가지 방법은 이전 페이지의 "표준" 코드 외에 <li> 요소를 인라인으로 지정하는 것입니다.
예시
li
{
display: inline;
}
설명된 예:
display: inline;- 기본적으로 <li> 요소는 블록 요소입니다. 여기에서 각 목록 항목 앞뒤의 줄 바꿈을 제거하여 한 줄에 표시합니다.
플로팅 목록 항목
수평 탐색 모음을 만드는 또 다른 방법은 <li> 요소를 띄우고 탐색 링크의 레이아웃을 지정하는 것입니다.
예시
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
설명된 예:
float: left;- float를 사용하여 블록 요소가 서로 옆에 떠 있게 합니다.display: block;- 패딩(원하는 경우 높이, 너비, 여백 등)을 지정할 수 있습니다.padding: 8px;- 각 <a> 요소 사이에 패딩을 지정하여 보기 좋게 만듭니다.background-color: #dddddd;- 각 <a> 요소에 회색 배경색 추가
팁: 전체 너비의 배경색을 원하면 각 <a> 요소 대신 <ul>에 background-color를 추가하십시오.
예시
ul
{
background-color: #dddddd;
}
수평 탐색 모음의 예
어두운 배경색으로 기본 수평 탐색 모음을 만들고 사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.
예시
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;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
활성/현재 탐색 링크
현재 링크에 "활성" 클래스를 추가하여 사용자에게 현재 있는 페이지를 알립니다.
예시
.active {
background-color: #04AA6D;
}
오른쪽 정렬 링크
목록 항목을 오른쪽으로 이동하여 링크를 오른쪽 정렬( float:right;):
예시
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
국경 구분선
<li>에 속성을 추가하여 border-right링크 구분선을 만듭니다.
예시
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
고정 탐색 모음
사용자가 페이지를 스크롤하는 경우에도 탐색 모음이 페이지의 상단 또는 하단에 유지되도록 합니다.
고정 상단
ul {
position: fixed;
top: 0;
width: 100%;
}
고정 바닥
ul {
position: fixed;
bottom: 0;
width: 100%;
}
참고: 고정 위치는 모바일 장치에서 제대로 작동하지 않을 수 있습니다.
회색 수평 탐색 모음
얇은 회색 테두리가 있는 회색 가로 탐색 모음의 예:
예시
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
끈끈한 Navbar
position: sticky;고정 탐색 모음을 만들려면 <ul>에 추가 하세요.
고정 요소는 스크롤 위치에 따라 상대 요소와 고정 요소 사이를 전환합니다. 주어진 오프셋 위치가 뷰포트에서 만날 때까지 상대적으로 배치된 다음 제자리에 "고정"됩니다(예: position:fixed).
예시
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
참고: Internet Explorer는 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다(위의 예 참조). 또한 고정 위치 지정이 작동하려면 top, 또는 right중 하나 이상을 지정해야 합니다 .bottomleft
더 많은 예
반응형 Topnav
CSS 미디어 쿼리를 사용하여 반응형 상단 탐색을 만드는 방법.
반응형 Sidenav
CSS 미디어 쿼리를 사용하여 반응형 측면 탐색을 만드는 방법입니다.
드롭다운 탐색 모음
탐색 모음 안에 드롭다운 메뉴를 추가하는 방법입니다.
W3Schools Spaces 에 대해 들어본 적이 있습니까? 여기에서 웹사이트를 처음부터 만들거나 템플릿을 사용하여 무료로 호스팅할 수 있습니다.
무료로 시작하세요 ❯* 신용카드 불필요