HTML CSS Add JavaScript İle Hareketli Yan Navigasyon Oluşturmak..

ByESiNTi · 27 Tem 2021

Animasyonlu, kapatılabilir bir yan gezinme menüsünün nasıl oluşturulacağını gösterelim..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Resimdeki Hareketli Yan Navigasyon HTML ,CSS ve JavaScript kodlarını linkten indirebilirsiniz..

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Hareketli Yan Navigasyon Oluşturun

Adım 1) HTML'yi ekleyin:

Kod:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
  ...
</div>

Adım 2) CSS'yi ekleyin:

Kod:

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Adım 3) JavaScript'i ekleyin:

Aşağıdaki örnek, yan gezinmede kayar ve onu 250 piksel genişliğinde yapar:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Aşağıdaki örnek, yan gezinmede kayar ve sayfa içeriğini sağa doğru iter (sidenav'ın genişliğini ayarlamak için kullanılan değer, "sayfa içeriğinin" sol kenar boşluğunu ayarlamak için de kullanılır):

Sidenav Push İçeriği

Kod:

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Aşağıdaki örnek ayrıca yan gezinmede kayar ve sayfa içeriğini sağa doğru iter, ancak bu sefer yan gezinmeyi "vurgulamak" için gövde öğesine %40 opaklıkla siyah bir arka plan rengi ekleriz:

Sidenav Push İçeriği, opaklıkla,

Kod:

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
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 the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Aşağıdaki örnek soldan yan gezinmede kayar ve tüm sayfayı kaplar (%100 genişlik):

Sidenav Tam genişlik:

Kod:

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Aşağıdaki örnek, yan gezinme menüsünü animasyonlar olmadan açar ve kapatır:

Animasyonsuz Sidenav

Kod:

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

Aşağıdaki örnek, sağ taraflı bir gezinme menüsünün nasıl oluşturulacağını gösterir:

Sağ taraflı gezinme:

Kod:

.sidenav {
  right: 0;
}

Aşağıdaki örnek, her zaman gösterilen (sabit) bir yan gezinme menüsünün nasıl oluşturulacağını gösterir:

Sidenav'ı her zaman göster:

Kod:

/* The sidenav */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Page content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
}