Nasıl oluşturulur: Kenar navigasyon

Animasyonlu yan menü oluşturma

İlk adım - HTML ekleyin:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Hakkımızda</a>
  <a href="#">Hizmetler</a>
  <a href="#">Müşteriler</a>
  <a href="#">İletişim</a>
</div>
<!-- Yan menüyü açan herhangi bir element kullanılır -->
<span onclick="openNav()">aç</span>
<!-- Eğer yan menü'nün sayfa içeriğini sağa itmesini istiyorsanız, tüm sayfa içeriğini bu div içine yerleştirin (yan menü'nün sayfa üstünde kalmasını istiyorsanız bu ayarı kullanmayın) -->
<div id="main">
  ...
</div>

İkinci adım - CSS ekleyin:

/* Yan menü navigasyonu */
.sidenav {
  height: 100%; /* 100% tam yükseklik */
  width: 0; /* 0 genişlik - Bu ayarı JavaScript ile değiştirilir */
  position: fixed; /* Yerinde kalır */
  z-index: 1; /* Üstte kalır */
  top: 0; /* Üstte kalır */
  left: 0;
  background-color: #111; /* Siyah */
  overflow-x: hidden; /* Yatay kaydırma devre dışı bırakılır */
  padding-top: 60px; /* İçeriği üstte 60px'lik bir konumda yerleştir */
  transition: 0.5s; /* 0.5 saniyelik geçiş etkisi, yan menü'nün kayan gösterimi için kullanılır */
}
/* Geçiş menü bağlantılarıThe navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Tarama bağlantıları üzerinde fareyi tutarken, onların rengini değiştirir */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Kapatma düğmesinin konumu ve tarzı (sağ üst köşe) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Sayfa içeriği tarzını ayarlar - Yan navigasyonu açarken sayfa içeriğini sağa itmek istiyorsanız, bu ayarı kullanın. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Yüksekliği 450px'den düşük olan küçük ekranlarda, yan navigasyonun tarzını değiştirir (dış boşlukları ve font boyutunu azaltır) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Üçüncü Adım - JavaScript Ekleme:

Aşağıdaki örnekte, yan navigasyon kayarak girecek ve genişliği 250px olarak ayarlanacaktır:

Yan navigasyon kapsama örneği

/* Yan navigasyonun genişliğini 250px olarak ayarlar */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Yan navigasyonun genişliğini 0 olarak ayarlar */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Kişisel olarak deneyin

Aşağıdaki örnekte, yan navigasyon kayarak içerikleri sağa itecek ve "yan navigasyon genişliği" değerleri, "sayfa içeriği" sol dış kenarının ayarlanmasında da kullanılacaktır:

Yan navigasyon içerikleri iten

/* Yan navigasyonun genişliğini 250px olarak ayarlar */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Yan navigasyonun genişliğini 0 olarak ayarlar */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Kişisel olarak deneyin

Aşağıdaki örnek, yan navigasyonun kayarak sayfa içeriğini sağa itmesini sağlar. Ancak bu sefer, body elementine 40% şeffaflıkla siyah arka plan rengi ekleyerek yan navigasyonu "vurgular".

Şeffaflıkla yan navigasyon içerikleri iten

/* Ayarların genişliği 250px olan yan navigasyonu, sayfa içeriğinin sol dış kenarı 250px ve body'ye siyah arka plan rengi ekler */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set sidebar width to 0, page content left margin to 0, and body background color to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Kişisel olarak deneyin

In the following example, the sidebar will slide in from the left and cover the entire page (width 100%):

Full-width sidebar:

/* Open sidebar navigation */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* Close/Hide sidebar navigation */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Kişisel olarak deneyin

The following example shows how to open and close the sidebar menu without animation effects.

Sidenav without animation

/* Open sidebar navigation */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* Close/Hide sidebar navigation */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

Kişisel olarak deneyin

The following example shows how to create a right sidebar menu:

Right sidebar:

.sidenav {
  right: 0;
}

Kişisel olarak deneyin

The following example shows how to create a sidebar menu that is always displayed (fixed position):

Always displayed sidebar:

/* 侧边导航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 页面内容 */
.main {
  margin-left: 200px; /* 与侧边导航的宽度相同 */
}

Kişisel olarak deneyin

İlgili sayfalar

Rehber:CSS gezinti çubuğu