Mintik
4 yıl önce

Colorful vertical fixedMenu

yan

Bir kaç  gün önce mouseyi sayfanın sol tarafına  taşıdığımzda sağa  doğru kayıp tıklandığında sayfanın ortasında açılan bir resim galeri örneği  paylaşmıştım sizlerle. QQ messengerde (çinlilerin facebook sitesi ve messengeri)  aynı  bu özelliği  görmüştüm. Mouseyi  ekranın kenarına  getirdiğinizde messenger sola doğru kayıyor mouseyi çektiğinizde ise tekrar sağa kayıp kayboluyordu. Aslında websitelerinde  pek kullanılmayan bir  özellik. İşin aslına bakınca da baya işe yarayan bir özellik. Mouseyi sayfanın soluna, sağına, altına yada üstüne getirdiğimizde neden açılan bir menü  yada resim galeri olmasın ?  Aklıma sadece bu iki özellik geldiği için böyle bir şey

hazırladım tabi. Daha başka  değişik  çalışmalar da hazırlayabilirsiniz bu şekilde.Yada  QQ messenger  gibi web sitenizin chat bölümünü saklarsınız sayfada.

Sayfanın en solunda 5px  genişliğinde bir  panel  bulunuyor ve hafif menü  butonlarının uçları da görünüyor  zaten. Mouseniz 5pxlik panelin içine  girer girmez menü  butonları  soldan sağa doğru kayıyor.  Bütün menü butonları ayrı ayrı zamanlarda gelse farklı bir  görünüm ortaya  çıkacaktı.  Her li  elementi için farklı  zamanlama eklendiğinde gerçekten güzel bir görünüm çıktı ortaya. Ayrıca  her li elementine farklı farklı  renkler  ekledim. Arka plan gibi gök kuşağına benzesin diye İşin aslı menü  renklerine baktığımda  baya bi cıvık görünüyor. Siz  kendini zevkinize  göre farklı farklı renkler  eklerseniz  daha iyi olur. Yada  bütün butonların rengini sitenizin arka plan rengine göre tek bir  renk olarak ayarlayın. O zaman daha bir güzel görünür.

Css yan menü örneğinde menülerin kayma şekline dikkat ederseniz jQuery easing  gibi  açıldıklarını görebilirsiniz. Modern bütün tarayıcılar  üzerinde  Css easing  sorunsuz  bir şekilde çalışıyor. Böylelikle ilerde jQuery easing kütüphanesinin pabucu dama atılacak gibi görünüyor. Son olarak söylemeyi unuttuğum menü örneğinin bir diğer özelliği sayfada  sabit  bir şekilde  durması. Sayfa aşağı yada yukarı kaydırıldığında menü paneli de sayfa ile beraber hareket ediyor.

Css easing ile hazırlanmış rengarenk yan menü örneğinin kullanımı

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

<style type='text/css'>
.panel {
   width:10px;
   height:auto;
   border-radius:5px;
   position:fixed;
   padding:50px 0px 50px 0px;
   left:0;
   margin-left:-5px;
}
.panel li{
   list-style:none;
   float:left;
   display:block;
   margin-left:-200px;
   padding-left:40px;
   padding-top:5px;
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;   
}
.panel:hover li{
   margin-left:0px;    
}
.panel li.buton{
   background-color:#666666;
   width:170px;
   height:45px;    
}
.panel li.buton:hover{
   margin-left:0px;
   width:180px;
   background-color:#666666; 
-webkit-transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035);     
}
.panel li a{
   text-decoration:none;
   font-family: Garamond, serif;
   line-height: 1em;
   color: #fff9d6;
   font-weight:bold;
   font-size: 28px;
   text-shadow:0px 0px 0 rgb(202,202,202),1px 1px 0 rgb(158,158,158), 2px 2px 0 rgb(115,115,115),3px 3px 2px rgba(0,0,0,0.6),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}

/*  easing   */
.panel li:nth-of-type(1) {
 background-color:#0000FF;
-webkit-transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 100ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.panel li:nth-of-type(2) {
 background-color:#00FF33;
-webkit-transition: all 200ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 200ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 200ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 200ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.panel li:nth-of-type(3) {
 background-color:#FF00FF;
-webkit-transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.panel li:nth-of-type(4) {
 background-color:#66CCFF;
-webkit-transition: all 400ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 400ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 400ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 400ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.panel li:nth-of-type(5) {
 background-color:#FF0000;
-webkit-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
}
.panel li:nth-of-type(6) {
 background-color:#FFFF33;
-webkit-transition: all 600ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 600ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 600ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 600ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.panel li:nth-of-type(7) {
 background-color:#99CC33;
-webkit-transition: all 700ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 700ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 700ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 700ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.panel li:nth-of-type(8) {
 background-color:#00CC99;
-webkit-transition: all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 800ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
.panel li:nth-of-type(9) {
 background-color:#CC99FF;
-webkit-transition: all 900ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
   -moz-transition: all 900ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
     -o-transition: all 900ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
        transition: all 900ms cubic-bezier(0.950, 0.050, 0.795, 0.035); 
}
</style>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="panel">
   <li class="buton"><a href="https://www.mintik.com">Anasayfa</a></li>
   <li class="buton"><a href="https://www.mintik.com/category/wordpress/">Wordpress</a></li>
   <li class="buton"><a href="https://www.mintik.com/category/jquery/">jQuery</a></li>
   <li class="buton"><a href="https://www.mintik.com/category/css/">Css3</a></li>
   <li class="buton"><a href="https://www.mintik.com/category/mootools-ornekleri/">Mootools</a></li>
   <li class="buton"><a href="https://www.mintik.com/category/theme/">Tema</a></li>
   <li class="buton"><a href="https://www.mintik.com/category/wordpress-eklentiler/">Eklenti</a></li>
   <li class="buton"><a href="https://www.mintik.com/category/photoshop-tutorials/">Photoshop</a></li>
   <li class="buton"><a href="https://www.mintik.com/?p=14912">Tutorial</a></li>
</div>
Etiketler:
Dikey menü örnekleri
Mintik senin düşüncelerini merak ediyor. Bir yorum yaz

  1. Baris dedi ki:
    31 Mart 2016, 15:51

    Cok tesekkurler baya isime yaradi.

  2. yigit dedi ki:
    21 Aralık 2014, 23:30

    hocam sabit yapabilirmiyiz? aşağı yukarıda oynamasın sabit kalsın menü güzel ama üzerine gelince açılmasın sabit dursun kıpraşmasın. bunun için neyi silecez?