Amatör Bir Sidebar Menü Yapımı

Bu dersimizde Jquery ile amatörce bir slide-bar menü yapımını görelim.

Merhaba; İlk dersimde daha önceleri hep hazır bulup projeme dahil ettiğim side-bar menu yapımını göstereceğim.Bu menü responsive olarakta kullanılabilir.Çok amaçlı ancak onu şimdilik yapmayacağım

HTML :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="responsive">
<div class="ac">
  <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
  </div>
  <div class="kapa">
    <i class="fa fa-times fa-2x" aria-hidden="true"></i>
  </div>
  <ul class="res-menu">
  <li><a href="">Anasayfa</a></li>
  <li><a href="">Calismalar</a></li>
  <li><a href="">Deneme</a></li>
  <li><a href="">Hakkımda</a></li>
  <li><a href="">İletişim</a></li>
  </ul>
</div>

CSS :

.res-menu {
  background-color: #35a0ce;
  list-style:none ;
  width : 100px;
  text-align : center ;
  position:fixed ;
  top : 0 ;
  left : -160px;
  z-index : 10;
  padding :0 30px;
  margin-top:0;
  height:100%;
  li {
    margin : 15px 0 ;
    padding : 10px 0;
    border-bottom: 1px solid #ffffff;
    a {
    text-decoration : none ;
    color : #ffffff ;
  }
  }
}
.ac {
  width : 50px;
  height:50px;
  background-color : #35a0ce;
  position : fixed;
  left : 0 ;
  top : 0 ;
  cursor : pointer ;
  z-index : 10;
  i {
    color:#ffffff;
    text-align : center ;
    line-height : 50px;
    vertical-align: middle;
    margin-left:10px;
  }
}
.kapa {
  width : 50px;
  height:50px;
  background-color : #35a0ce;
  position : fixed;
  left : 0 ;
  top : 0 ;
  cursor : pointer;
  z-index : 10;
   i {
    color:#ffffff;
    text-align : center ;
    line-height : 50px;
    vertical-align: middle;
    margin-left:12px;
  }
}
.acil {
  left : 0!important;
  position:fixed;
}

JQUERY : 

$(document).ready(function(){
  $(".kapa").hide();
  $(".ac").show();
    $(".ac").click(function(){
        $("ul").animate({left: '0'},250);
        $(".ac").animate({left: '160'},250);
        $(".kapa").animate({left: '160'},250)
        $(".ac").hide();
        $(".kapa").show();
    });
    $(".kapa").click(function(){
        $("ul").animate({left: '-160'},250);
        $(".ac").animate({left:'0'},250);
        $(".kapa").animate({left:'0'},250);
        $(".kapa").hide();
        $(".ac").show();
    });
});

 

Selim Hamzaoğulları
Sakarya üniversitesi Bilgisayar Mühendisliği Bölümü mezunuyum.Lise yıllarımdan bu yana yazılımla özellikle Web tarafında Front-end ile uğraşıyorum.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git