Ana Menü

Ana Menü

  • Anasayfa
  • SeaDesign
    • Hakkımda
    • Gizlilik Politikamız
    • Kullanım Koşullarımız
    • Çerez Politikamız
  • Hizmetler
  • Scriptler
  • Blog
  • İletişim

Reklamlar

Duyurular

  • Bayram-Kampanyasi-Geldi-Kurumsal-Scriptler-Sadece-249-00- Bayram Kampa[...]
  • Web-Tasarimlar Web Tasarıml[...]
  • Evde-Kal-Saglikli-Kal Evde Kal Sağ[...]
  • Yeni-yuzumuzle-yayina-devam Yeni yüzümüz[...]
Tümünü Gör

Copyright 2020 © Erdoğan USTA

Site Logo Site Logo
Giriş Kayıt
Soldan Açılır Kapanır Sidebar Menu

Soldan Açılır Kapanır Sidebar Menu

Erdoğan Usta
Erdoğan Usta 28-04-2020
Kategori : Html

İçerik

Soldan Açılır Kapanır Sidebar Menu



Html bir yapıya sahip biraz css ile desteklenmiş ve birazda javascript ile yapılmış açılır kapanır sidebar menü için kodlarımız işte böyle

html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  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;
}

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

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

.sidebar .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) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mysidebar" class="sidebar">
  <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>

<div id="main">
  <h2>Soldan Açılır Kapanır Sidebar Menu</h2>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Aç</span>
</div>

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

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

 



Etiketler

sidebar,menu


Yorumlar

    Henüz Kimse Yorum Yazmamış

Yorum Gönderin

  • Avatar

Son Ekleneneler

21-05-2020 Ücretsiz Php Script Lisanslama[...]

Ücretsiz Php Script Lisanslama[...]

Ücretsiz Php Script Lisanslama Scripti
24-05-2020 Ücretsiz Php Blog Scripti

Ücretsiz Php Blog Scripti

Sizler için Ücretsiz Php Blog Scripti
21-05-2020 Php de veri tabanında virgülle[...]

Php de veri tabanında virgülle[...]

Php de veri tabanında virgülle ayrılmış [...]
20-05-2020 Php ile Beğen - Beğenme butonu[...]

Php ile Beğen - Beğenme butonu[...]

Php ile Beğen - Beğenme butonu yapımı[...]
16-05-2020 Google bir uygulamanın ipini ç[...]

Google bir uygulamanın ipini ç[...]

Google bir uygulamanın ipini çekti
23-05-2020 WhatsApp tan Zoom'a rakip yeni[...]

WhatsApp tan Zoom'a rakip yeni[...]

WhatsApp tan Zoom'a rakip yeni özellik
11-05-2020 Javascript ile Onay kutusunun [...]

Javascript ile Onay kutusunun [...]

Javascript ile Onay kutusunun işaretli o[...]
29-06-2020 Ücretsiz WebTasarım ve Hosting[...]

Ücretsiz WebTasarım ve Hosting[...]

Ücretsiz WebTasarım ve Hosting Scripti

Copyright 2020 © Erdoğan USTA