Tag Archive: menu


Şeker gibi menüler

Web Sitesi Tasarımlarımızın yapıtaşları olan menülerin her gün göze daha güzel gelen versyonları yayınlanıyor. Bugün Fatih Hayrioğlu‘nun güncesi sayesinde yeni bir menü tasarımından haberim oldu. Kaliteli grafikleri ile şeker gibi bir görüntüsü olan bu menüyü CSS Drive’ın örnekler sayfasında bulabilirsiniz.

Ayrıntılı Bilgi ve Demo Sayfası

Reklamlar

Tasarım Kütüphaneleri

Sayfalarımızı tasarlarken aslında birçok öğe tasarladığımızın farkında değiliz. Örneğin bir arama kutusu, twitter bloğu, 404 hata sayfaları… Her bir elementi tasarlarken zaman zaman ilham alır ve internetteki popüler öğeleri tasarımlarımızda kullanırız. İşte Pattern Tap ve Elements of Design siteleri, internetteki güzel ve ilham alınacak sitelerin menülerini, 404 hata sayfalarını, yorum sayfalarını kısacası her bir öğesini parçalayarak sitelerinde kategorilere ayırarak sunmuşlar. Elements of Design ve Pattern Tap sitelerinde tüm bu elementleri görerek tasarımlarınız için esinlenebilirsiniz.

Daha önce ben de CSS Sprite’ların kullanılışı hakkında “Sprite’lar nedir? Nasıl kullanılır?“adında bir makale yazmıştım. Bugün çeşitli RSS yayınlarını okurken CSSgirl sitesinde yazılmış olan CSS Sprite makalesi gözüme çarptı ve ne kadar ayrıntılı işlediklerini görünce sizle paylaşmak istedim. Sprite tekniği ile rollover bir menünün nasıl yapıldığını en ince detayına kadar anlatmışlar.

Buradan okuyabilirsiniz.

Uzunca bir süredir blog’um üstünden paylaşım yapmamıştım. Bunda biraz tatil modunun da etkisi olsa gerek. Bu günkü yazımızda Yatay ve dikey CSS menüleri hazırlamamızı sağlayan bir Web Uygulamasını tanıtacağız. CSS Menu Builder ile menü arkaplanının tipini ve menü tuşlarının şeklini belirledikten sonra renkler üstünde dilediğiniz oynamaları yaparak sitenize en uygun menüyü tasarlamanız mümkün. Şu an menü arkaplanı için kısıtlı seçim olsa da işinizi rahatlıkla görecektir.

1kb’lık kayan menu

Geçtiğimiz günlerde 1kb’lık akordiyon menu haberiyle karşılaşmış ve hiçbir javascript kütüphanesi kullanmadığımızdan dolayı çok küçük bir kod bloğuyla bunu halledebildiğimizi belirtmiştik. Bu kodun kaynağı olan Leigeber blog‘unda bu sefer de 1 KB’lık kayan menu yapımı yayınlanmış. Kodu download etmeden önce ilgili yazıya bakarsanız daha bilgi verici olabilir.

Özellikleri:

  • kendi tasarımınızı uygulayabilirsiniz.
  • 2 farklı hover seçeneği
  • javascript kütüphanesi kullanmaması

1KB’lik akordiyon Menu

Çoğu zaman framework kullandığımızdan dolayı sayfalarımızın içeriği artar ve bandwith’imizi daha çok kullanıp daha çok para veririz. Bunları yaşamak istemeyen site sahipleri devamlı daha kısa ve daha komplike kodlar üretmek için çalışır. İşte bu seferki örnek de bunun eseri.

Hiçbir framework gerektirmeyen buradaki akordiyon menu hem kullanım kolaylığı hem de çok küçük boyutlu olması sebebiyle oldukça kullanışlı.

<body onload="slideMenu.build('sm',200,10,10,1)">

Bu şekilde kullanımla başlayan kodun ayrıca ufak bir javascript dosyası var.
Buradan ayrıntılı bilgiyi alabilirsiniz.

Kaynak: webresourcesdepot