데모 : 탐색 바
탐색 바
사용이 편리한 네비게이션을 갖는 임의의 웹 사이트에 대해 중요하다.
CSS를 사용하면 잘 생긴 탐색 모음에 지루한 HTML 메뉴를 변환 할 수 있습니다.
네비게이션 = 링크 목록
네비게이션 바는 도심 표준 HTML을 필요로한다.
우리의 예에서 우리는 표준 HTML 목록에서 탐색 모음을 구축 할 것입니다.
네비게이션 바 있으므로 사용하여, 기본적으로 링크의 목록입니다 <ul> 과 <li> 요소는 완벽한 의미가 있습니다 :
예
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
»그것을 자신을 시도 이제 목록에서 글 머리 기호 및 마진과 패딩을 제거 할 수 :
예 설명 :
-
list-style-type: none;- 총알을 제거합니다. 네비게이션 바는 목록 마커를 필요로하지 않는다 - 설정
margin: 0;와padding: 0;브라우저 기본 설정을 제거하려면
위 예제의 코드는 수직, 수평 탐색 모음에서 사용되는 표준 코드입니다.
수직 네비게이션
수직 탐색 모음을 만들려면, 당신은 스타일 수 <a> 위의 코드에 추가 목록 내부 요소를 :
예 설명 :
-
display: block;- 블록 요소로의 링크를 표시는 전체 링크 영역 클릭 (뿐만 아니라 텍스트)을 만들고, 그것은 우리가 지정할 수 있습니다 width (그리고 padding, margin, height 등을 원하는 경우 등) -
width: 60px;- 블록 요소는 기본적으로 사용할 수있는 전체 폭을 차지합니다. 우리는 60 픽셀의 폭을 지정하려면
또한의 폭을 설정할 수 있습니다 <ul> , 그리고 폭 제거 <a> 블록 요소로 표시 할 때 사용할 전체 폭을 차지하므로,. 이것은 앞의 예와 동일한 결과를 생성합니다 :
예
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} »그것을 자신을 시도 수직 네비게이션 예
회색 배경 색상으로 기본 수직 탐색 모음을 만들고 사용자가 그 위로 마우스를 이동했을 때의 링크의 배경색을 변경 :
예
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} »그것을 자신을 시도 액티브 / 현재 탐색 링크
사용자가 그 / 그녀가에있는 페이지를 알 수 있도록 현재 링크에 "활성"클래스를 추가 :
센터 링크 및 추가 테두리
추가 text-align:center 에 <li> 또는 <a> 의 링크를 중앙에.
추가 border 하는 속성을 <ul> 네비게이션 바에 주위에 테두리를 추가합니다. 당신은 또한 네비게이션 바에 내부 테두리를 원하는 경우 추가 border-bottom 모든 <li> 마지막을 제외하고 요소 :
예
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} »그것을 자신을 시도 전체 높이가 수직 Navbar를 수정
, 전체 높이 만들기 "sticky" 측면 탐색을 :
예
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} »그것을 자신을 시도 참고 :이 예제는 모바일 장치에서 제대로 작동하지 않을 수 있습니다.
수평 네비게이션
가로 방향 탐색 메뉴를 생성하는 방법은 두 가지가 있습니다.인라인을 사용하거나 목록 항목을 떠.
인라인 목록 항목
가로 탐색 줄을 구축하는 한 가지 방법은 지정하는 것입니다 <li> 받는 사람뿐만 아니라, 인라인 등의 요소를 "standard" 위의 코드 :
예 설명 :
-
display: inline;- 기본적으로 <li> 요소는 블록 요소이다. 여기, 우리는 라인 전에 분해 제거하고 각 목록 항목 후, 한 줄에 표시 할
목록 항목 부동
가로 방향 탐색 메뉴를 만드는 또 다른 방법은 부유하는 <li> 요소 및 탐색 링크의 레이아웃을 지정합니다
예 설명 :
-
float: left;- 사용 플로트를 서로 옆에 슬라이드 블록 요소를 얻을 수 -
display: block;- 블록 요소로의 링크를 표시는 전체 링크 영역 클릭 (뿐만 아니라 텍스트)을 만들고, 그것 (우리가 패딩 지정할 수 있습니다 height, width, margins 원하는 경우 등) -
padding: 8px;- 차단 요소 가능한 전체 폭을 차지하기 때문에, 서로의 옆에 떠 없다. 따라서, 그들을 잘 보이게하기 위해 약간의 패딩을 지정 -
background-color: #dddddd;- 각각 요소에 회색 배경 색상 추가
팁 : 배경 색상을 추가하려면 <ul> 대신 각각의 <a> 당신이 전체 폭 배경색하려면 요소 :
수평 네비게이션 예
어두운 배경 색상으로 기본 가로 방향 탐색 메뉴를 만들고 사용자가 그 위로 마우스를 이동했을 때의 링크의 배경색을 변경 :
예
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" 사용자가 그 / 그녀가에있는 페이지를 알 수 있도록 현재 링크에 클래스를 :
마우스 오른쪽 정렬 링크
(오른쪽에있는 목록 항목을 부동하여 마우스 오른쪽 정렬 링크 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> »그것을 자신을 시도 테두리 분배기
추가 border-right 에 속성 <li> 링크 칸막이를 만들 :
예
/* 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;
} »그것을 자신을 시도 고정 네비게이션
상단의 탐색 바 숙박 또는 페이지 하단, 심지어 사용자가 페이지를 스크롤합니다 :
주 :이 예는 모바일 장치에서 제대로 작동하지 않을 수 있습니다.
회색 수평 Navbar의
얇은 회색 테두리가 회색 가로 방향 탐색 메뉴의 예 :
더 예
응답 Topnav
어떻게 반응 상단의 탐색을 만들 CSS3 미디어 쿼리를 사용합니다.
응답 Sidenav
어떻게 반응 측면 탐색을 만들 CSS3 미디어 쿼리를 사용합니다.
드롭 다운 Navbar의
어떻게 탐색 모음 내부의 드롭 다운 메뉴를 추가 할 수 있습니다.