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.

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>

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>

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>

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>

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>

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>

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?

yönetici 02/08/2020

Yahya, şu konulara bak. "Responsive Web Tasarım viewport Nedir?" "Responsive Web Tasarım CSS Medya Sorguları"

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.

ismail kodaman 14/12/2020

Eline sağlık teşekkürler.

Ersan Akyürekli 12/11/2021

Faydalı bilgiler için çok teşekkür ederim. Cömertçe paylaşımda bulunan amatör ruhlu profesyoneller başımın tacıdır. Emeğinize sağlık. Selam ve saygılar...

Arda 08/12/2021

Menü butonunu hareket ettirmek istiyorum nasıl yapabilirim? Tüm satırlarda denedim fakat başaramadım.

yönetici 09/12/2021

Top,left değelerini değiştir.


.sidenav{
top:20px;
left:50px
}

Binali Yıldız 04/02/2023

hamburger menünün rengini nasıl değiştirebilirim?

yönetici 09/02/2023

sidenav bölümünden bakground-color değeri değiştir.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET