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

Erdoğan Usta 28-04-2020

Kategori : Html

İçerik

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>