Menu

ANA SAYFA » Blogger Menü Kodları » Sayfa Sağında Gizli Açılır Sabit Menü Eklentisi

Sayfa Sağında Gizli Açılır Sabit Menü Eklentisi

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 ekledik.Arka plan gibi gök kuşağına benzesin diye İşin aslı menü renklerine baktığımda bayağı bir 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.Menü isimlerini kendinize göre düzenleyebilirsiniz.Aşağıda size hem CSS kodlarını hem de HTML kodlarını verecem.

CSS KODLARI:
Css kodlarını şablon kodları arasında bulunan head etiketleri arasında bir yere eklemeniz yeterli olacaktır.

<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>

HTML KODLARI:

Html kodlarını body etiketleri arasında ki bir kısıma eklemeniz yeterli olacaktır.

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...

Yorum Gönder Blogger Facebook

Kaydol: Kayıt Yorumları (Atom)

Top