CSS와 자바 스크립트와 반응 상단 탐색 메뉴를 만드는 방법에 대해 알아 봅니다.
최고 탐색
반응 형 탐색 메뉴의 작동 방식을 볼 수있는 브라우저 창 크기를 조정합니다 :
대답하는 Topnav 만들기
1 단계) HTML을 추가합니다 :
예
<ul class="topnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>클래스 = "아이콘"과 함께 목록 항목을 열고 작은 화면에 topnav을 종료하는 데 사용되는 링크가 있습니다.
2 단계) CSS를 추가 :
내비게이션 막대처럼 보이도록 목록을 스타일 :
예
/*
Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
/* Float
the list items side by side */
ul.topnav li {float: left;}
/*
Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li
a:hover {background-color: #111;}
/* Hide the list item that contains
the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}미디어 쿼리를 추가 :
예
/* When the screen is less than 680 pixels wide, hide all list items, except
for the first one ("Home"). Show the list item that
contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child)
{display: none;}
ul.topnav li.icon {
float:
right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the
user clicks on the icon. This class makes the topnav look good on small
screens */
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive
li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}3 단계) 자바 스크립트를 추가합니다
예
/* Toggle between adding and removing the "responsive" class to topnav when
the user clicks on the icon */
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
} »그것을 자신을 시도 팁 : 우리의 이동 CSS Navbar의 튜토리얼 탐색 모음에 대한 자세한 내용을 보려면.