Moslashuvchan pastki navigatsiya
CSS va JavaScript yordamida moslashuvchan pastki navigatsiya menyusini yaratishni o‘rganing.
Moslashuvchan pastki navigatsiya
Moslashuvchan navigatsiya menyusi qanday ishlashini ko‘rish uchun brauzer oynasi o‘lchamini o‘zgartiring:
Moslashuvchan pastki navigatsiya panelini yaratish
1-qadam) HTML qo‘shing:
Misol
<div class="navbar" id="myNavbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
class="icon" bo‘lgan havola kichik ekranlarda navigatsiya panelini ochish va yopish uchun ishlatiladi.
2-qadam) CSS qo‘shing:
Misol
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a green background color to the active link */
.navbar a.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
display: none;
}
Media so‘rovlarini qo‘shing:
Misol
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.navbar.responsive a.icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
3-qadam) JavaScript qo‘shing:
Misol
/* Toggle between adding and removing the "responsive" class to the navbar when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
O‘zingiz sinab ko‘ring »
Maslahat: Navigatsiya panellari haqida ko‘proq bilish uchun CSS navigatsiya paneli darsligimizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!