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
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9121

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