Colorful vertical fixedMenu

2
562
views

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 :

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

Html :

Aranan kelimeler:

  • men rnekleri
  • dikey ornekler
  • html dikey menü kodları
  • sayfada sabit duran açılır menü
1 oy (No Ratings Yet)
Loading...
Önceki İçerikMeeta
Sonraki İçerikHi5/Tagged üzerinden otomatik pet satın alma
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

2 YORUMLAR

  1. 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?

CEVAP VER

Please enter your comment!
Please enter your name here