CSS Açılır Yan Menü (Hamburger Menu)

Hem uygulamalarda hem de web sitelerinde, kullanıcılar gerekli içeriği aramak ve işlevleri kullanmak için menüye güvenirler. Menüler, herhangi bir sitenin veya uygulamanın ayrılmaz bir parçasıdır, ancak tüm menüler aynı değildir.

Web sitenize yan gezinme eklemek, gelişmiş bir kullanıcı deneyimi (User Experience) sunmanıza ve kullanıcıların web sitenizi masaüstü ve mobil cihazlarda gezinmesini kolaylaştırır.

Web sitenize yan gezinme eklemek, gelişmiş bir kullanıcı deneyimi (UX) sunmanıza olanak tanır ve kullanıcıların web sitenizi dolaşmasını kolaylaştırır. Yan gezinme ayrıca, temiz ve modern bir tasarım korurken, sosyal paylaşım ve web sitesi navigasyonunuza arama gibi daha fazla içerik ve işlevsellik eklemenizi sağlar.

Hamburger Menu

Gizli gezinme, küçük ekranlar için oldukça mantıklı bir çözümdür - sınırlı ekran alanı için endişelenmenize gerek yoktur, tüm gezinti bilgilerinizi varsayılan olarak gizlenen kaydırılabilir bir kenar çubuğuna koymanız yeterlidir.

hamburger menu

Aşağıda web sitenize yan gezinme eklemek için gereken HTML, CSS ve JavaScript bulunmaktadır.

Yan Menü



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sidenav {
  height: 100%;
  width: 0; /*Genişliği javascriptle değiştir*/
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden; /*Yatay kaydırmayı devre dışı bırak */
  transition: 0.5s;/* Sidenav'da kaymaya 0,5 saniye geçiş efekti */
  padding-top: 60px; /*İçeriği üstten 60 piksel yerleştirin */
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/*Menüler üzerine gelince  renklerini değiştirin */

.sidenav a:hover {
  color: #f1f1f1; 
}
/*Kapat düğmesini konumlandırın ve stillendirin (sağ üst köşe) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Yüksekliğin 450 pikselden az olduğu daha küçük ekranlarda, 
sidenav stilini değiştirin 
(daha az dolgu ve daha küçük bir yazı tipi boyutu) */

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="YanMenu" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">

  &times;</a>

  <a href="#">Anasayfa</a>
  <a href="#">PHP</a>
  <a href="#">HTML</a>
  <a href="#">CSS</a>
</div>


<span style="font-size:30px;cursor:pointer" onclick="openNav()">
&#9776; open 
</span>

<!-- javascript ile menuyu açma kapatma -->

<script>
function openNav() {
  document.getElementById("YanMenu").style.width = "250px";
}

function closeNav() {
  document.getElementById("YanMenu").style.width = "0";
}
</script>
   
</body>
</html> 
	

önizleme buton

Aşağıdaki örnek, yan gezinme bölümünde kayar ve sayfa içeriğini sağa doğru iter (sidenav 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)

Ana İçeriği İten Menü



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

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

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="YanMenu" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">

  &times;</a>

  <a href="#">Anasayfa</a>
  <a href="#">PHP</a>
  <a href="#">CSS</a>
  <a href="#">HTML</a>
</div>

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Yan gezinme menüsünü açmak için aşağıdaki öğeye tıklayın
   ve bu içeriği sağa doğru itin.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">

  &#9776; open</span>

</div>

<script>
function openNav() {
  document.getElementById("YanMenu").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("YanMenu").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>
   
</body>
</html> 
	

önizleme buton

Aşağıdaki örnek, yan gezinme alanında kayar ve sayfa içeriğini sağa doğru iter, yalnızca bu sefer, yan gezinmeyi "vurgulamak" için, gövde öğesine %40 opaklıkta siyah bir arka plan rengi ekleriz:

Ana İçeriği Opaklı İten Menü



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

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

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="YanMenu" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">

  &times;</a>

  <a href="#">Anasayfa</a>
  <a href="#">PHP</a>
  <a href="#">CSS</a>
  <a href="#">HTML</a>
</div>

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Yan gezinme menüsünü açmak için aşağıdaki öğeye tıklayın 

  ve bu içeriği sağa doğru itin. Sidenav açıldığında body etiketine 

  siyah bir şeffaf arka plan rengi eklediğimize dikkat edin.</p>

  <span style="font-size:30px;cursor:pointer" onclick="openNav()">

  &#9776; open</span>

</div>

<script>
function openNav() {
  document.getElementById("YanMenu").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("YanMenu").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}
</script>
   
</body>
</html> 

	
önizleme buton

Aşağıdaki örnek, yandaki gezinme alanında soldan kayar ve tüm sayfayı kapsar (% 100 genişlik)

Tam Yan Menu



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align:center;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;

}

.sidenav a:hover{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="YanMenu" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">

  &times;</a>

  <a href="#">Anasayfa</a>
  <a href="#">PHP</a>
  <a href="#">CSS</a>
  <a href="#">HTML</a>
</div>

<h2>Animasyonlu Tam Menü</h2>
<p>Gezinme menüsünü açmak için aşağıdaki öğeye tıklayın.
</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">

&#9776; open</span>

<script>
function openNav() {
  document.getElementById("YanMenu").style.width = "100%";
}

function closeNav() {
  document.getElementById("YanMenu").style.width = "0";
}
</script>
   
</body>
</html> 


önizleme buton

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

Animasyonsuz Yan Menu



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sidenav {
  display: none;
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="YanMenu" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">

  &times;</a>

  <a href="#">Anasayfa</a>
  <a href="#">PHP</a>
  <a href="#">CSS</a>
  <a href="#">HTML</a>
</div>


<h2>Sidenav Örnek</h2>
<p>Yan gezinme menüsünü açmak için aşağıdaki öğeye tıklayın.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">

&#9776; open</span>

<script>
function openNav() {
  document.getElementById("YanMenu").style.display = "block";
}

function closeNav() {
  document.getElementById("YanMenu").style.display = "none";
}
</script>
   
</body>
</html> 


önizleme buton

Aşağıdaki örnek, sağ tarafta Yan gezinti menüsünün nasıl oluşturulduğunu gösterir.


.sidenav {
  right: 0;
}

CSS İle Yapılan Menu

css dosyasını çalışma belgenize eklemeyi unutmayın.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<link rel="stylesheet" href="yanmenu.css">
<body>
<nav role="navigation">
  <div id="menuToggle">
 <!--
 Sahte / gizli bir onay kutusu, tıklama alıcısı olarak kullanılır,
 
 böylece : işaretli seçiciyi kullanabilirsiniz. 
    -->

    <input type="checkbox" />
    
    <span></span>
    <span></span>
    <span></span>
    
    <ul id="menu">
      <a href="#"><li>Anasayfa</li></a>
      <a href="#"><li>PHP</li></a>
      <a href="#"><li>CSS</li></a>
      <a href="#"><li>HTML</li></a>
    </ul>
  </div>
</nav> 
	

önizleme buton


download buton

Samet akpınar 09/10/2019

Güzel paylaşım.

Ozan 27/10/2019

Çok faydalı bir paylaşım olmuş öncelikle teşekkür ederim. Peki bu açılır menüleri sağdan açmak istersek ne yapmamız gerekiyor?

yönetici 28/10/2019

Ozan yukarda belirtilmişti:

.sidenav {
  right: 0;
}


sefa 01/11/2019

Kardeşim çok güzel açıklamışsın. bende site açtım bunlarla uğraşıyorum. sitendeki reklamlara tek tek tıkladım. inş. iyi kazanırsın. 🙂

Mahmut 19/01/2020

Bende çalışmadı nedendir?

yönetici 21/01/2020

Mahmut, kesin çalışır yeni .html uzantılı dosya aç yukardaki kodlardan birini kopyala sonra tarayıcıda çalıştır.

Fıro 25/02/2020

right:0; yapıyom menü kayıyor'da open kaymıyor ne yapmamız lazım?

yönetici 25/02/2020

Aşağıdaki HTML kodu bul.

<span style="font-size:30px;cursor:pointer" onclick="openNav()">

☰ open</span>

Şu kodlarla değiştir.

<span style="font-size:30px;cursor:pointer;
  position: fixed;
  top: 20px;
  right: 10px;" onclick="openNav()">
  ☰ open</span>

Hüseyin Çiftçi 13/04/2020

Soldan açılan menüde, open ile aynı hizaya glyphicon içeren 2 buton koymak istiyorum. Bunu nasıl yapabilirim? Çok güzel bir paylaşım olmuş, tebrik ederim.

yönetici 14/04/2020

Hüseyin, bir class seçici oluştur.

.konum{
  position: fixed;
  z-index: 1;
  top:0;
  left: 20;
}

buton üstüne gelirse left değerini değiştir.

ibrahim onur 15/04/2020

merhabalar son örnekte acılıp kapanma ikonlarını sayfa aşağı kaydığı zamanda o konumda aşağı kaymasını nasıl ayarlayabiliriz ve tabiki menünün içeriğinide.

yönetici 15/04/2020

İbrahim, şu konuya bak.

Arda Alp 09/05/2020

Reis Eline Sağlık Çok Başarılı Olmuş Ancak Yapımı İle İlgili Bir Makale Veya Video Paylaşırsan Tadından Yenmez ☺

Ekrem birol 25/05/2020

Çok istifade ettim. Çok teşekkür ederim. elinize sağlık...

Yahya Yıldız 30/07/2020

Sadece mobilde bunu nasıl aktif edebiliriz?

Sebuhi 01/09/2020

Ana içeriği opaklı gosteren menude hereşeyin sağda olmasi için ne yapmalıyım? Yani ikonun ve açılan pencerenin

yönetici 03/09/2020

Sebuhi, Yukarıda ki mesajlarda cevap verilmişti.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

9755

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.