Hoe OM - Krimp navigasiekieslys op rol
Leer hoe om die grootte van 'n navigasiebalk te verander wanneer jy blaai met CSS en JavaScript.
Hoe om navigasiebalk te krimp met blaai
Stap 1) Voeg HTML by:
Skep 'n navigasiebalk:
Voorbeeld
<div id="navbar">
<a href="#default" id="logo">CompanyLogo</a>
<div id="navbar-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
Stap 2) Voeg CSS by:
Stileer die navigasiebalk:
Voorbeeld
/* Create a sticky/fixed navbar */
#navbar {
overflow: hidden;
background-color: #f1f1f1;
padding: 90px 10px; /* Large padding
which will shrink on scroll (using JS) */
transition: 0.4s; /* Adds
a transition effect when the padding is decreased */
position:
fixed; /* Sticky/fixed navbar */
width: 100%;
top: 0; /*
At the top */
z-index: 99;
}
/* Style the navbar links */
#navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Style the logo
*/
#navbar
#logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}
/* Links on mouse-over */
#navbar a:hover {
background-color: #ddd;
color: black;
}
/* Style the
active/current link */
#navbar
a.active {
background-color: dodgerblue;
color: white;
}
/* Display some links to the right */
#navbar-right {
float: right;
}
/* Add
responsiveness - on screens less than 580px wide, display the navbar
vertically instead of horizontally */
@media screen and (max-width: 580px)
{
#navbar {
padding: 20px 10px !important; /* Use
!important to make sure that JavaScript doesn't override the padding on small
screens */
}
#navbar a {
float:
none;
display: block;
text-align:
left;
}
#navbar-right {
float: none;
}
}
Stap 3) Voeg JavaScript by:
Voorbeeld
// When the user scrolls down 80px from the top of the document, resize the
navbar's padding and the logo's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 ||
document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("navbar").style.padding = "80px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}