Nasıl Yapılır - Tam Ekran Yer Paylaşımlı Gezinme
Tam ekran bindirmeli gezinme menüsünün nasıl oluşturulacağını öğrenin.
Nasıl çalıştığını görmek için aşağıdaki düğmelere tıklayın:
Tam Ekran Yer Paylaşımlı Gezinme Oluşturun
Adım 1) HTML'yi ekleyin:
Örnek
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<a href="#"
class="closebtn" onclick="closeNav()">×</a>
<!-- Overlay content -->
<div
class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>
Adım 2) CSS'yi ekleyin:
Örnek
/* The Overlay (background) */
.overlay {
/* Height
& width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /*
Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down
the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /*
Centered text/links */
margin-top: 30px; /* 30px top
margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block
instead of inline */
transition: 0.3s; /* Transition
effects on hover (color) */
}
/*
When you mouse over the navigation links, change their color */
.overlay
a:hover, .overlay a:focus {
color:
#f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position:
absolute;
top: 20px;
right:
45px;
font-size: 60px;
}
/* When the height of the screen is less than 450 pixels, change the
font-size of the links and position the close button again, so they don't
overlap */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
Adım 3) JavaScript'i ekleyin:
Aşağıdaki örnek, tetiklendiğinde yer paylaşımlı gezinme menüsünde soldan sağa (%0 ila %100 genişlik) kayar:
Yandan içeri kaydırın
/* Open
when someone clicks on the span element */
function openNav() {
document.getElementById("myNav").style.width
= "100%";
}
/* Close when someone clicks on the "x"
symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
Aşağıdaki örnek, bindirme gezinme menüsünde yukarıdan aşağıya doğru kayar (%0 ila %100 yükseklik).
Not: Bu örnekte, CSS'nin yukarıdakinden biraz farklı olduğuna dikkat edin (varsayılan yükseklik artık 0, genişlik %100 ve taşma-y gizlidir (küçük ekranlar dışında dikey kaydırmayı devre dışı bırakın)):
Yukarıdan aşağı kaydırın
/* Open */
function openNav() {
document.getElementById("myNav").style.height
= "100%";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
Bu örnek, gezinme menüsünü animasyonsuz açar:
Menüyü animasyonsuz aç
/* Open */
function openNav() {
document.getElementById("myNav").style.display
= "block";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
İpucu: Gezinme çubukları hakkında daha fazla bilgi edinmek için CSS Navbar Eğitimimize gidin.
W3Schools Spaces'ı hiç duydunuz mu? Burada web sitenizi sıfırdan oluşturabilir veya bir şablon kullanabilir ve ücretsiz olarak barındırabilirsiniz.
Ücretsiz başlayın ❯* Kredi kartına gerek yok