|
|
||
Css Balon Büyüyen Menü |
||
 Evet münümüzü yapmaya başlayalım ilk olarak HTML kısmını yazalım <div class="menu"> <ul> <li><a class="ara" href="#"><span>Arama</span></a></li> <li><a class="indir" href="#"><span>İndir</span></a></li> <li><a class="bilgi" href="#"><span>Bilgi</span></a></li> <li><a class="kalp" href="#"><span>Kalp</span></a></li> <li><a class="cark" href="#"><span>İşlem</span></a></li> </ul> </div> Üstteki görüldüğü gibi bir "DİV" elementi oluşturduk ve bir class atadık içine bir liste oluşturalım ve bu liste içerisine "A" elementini yazdık ve birer class atadık son olarak "SPAN" elementi içerisine linklerimizin isimlerini yazdık Bakalım nasıl görünüyorlar  evet HTML kısmı bukadar geçelim css kısmına ilk kodlarımızı yazmaya başlayalım .menu ul { list-style: none; margin: 0; padding: 0; } üstteki yazdığımız kodda ilk olarak "UL" elementimizin yani listemizin simge göstermesini istemedik ve boşlukları sıfırladık görelim bakalım ne durumda menümüz  kodlarımızı yazmaya devam edelim .menu ul li { float: left; margin-right: 2px; } üsteeki yazdığımız kodda menümüzün "Lİ" elementini sola yasladık bunun listemizin yatay olarak sıralanması için yaptık ve listelerimizin sağ kısmına 2 şer pixellik boşluk verdik duruma bakalım  evet devam edelim .menu ul li a { display: block; width: 48px; height: 58px; } üstteki kodumuzda ise "A" elementine blok görünümü özelliği verdik bu görünümü istediğimiz genişlik ve yükseklik değeri verebilmemizi sağladı ve hazırladığımız resimlere göre genişliği ve yüksekliği belirledik görünüm alttaki gibi istediğimiz kıvama gelmeye başladı  .menu ul li a span { visibility: hidden; } bu kodda ise "SPAN" elenementini görünmez yaptık hazırladığım imajlar zaten menü isimleri yazıyordu yani yazmasakta olurdu fakat başta google olmak üzere diğer arama motorlarının robotları bu yazıyı okumasını istiyoruz onun için yazık ekranda görünmüyecek ama örümcekler okuyabilecek devam edelim .ara {background: transparent url(ara.png) 0 0 no-repeat;} .indir {background: transparent url(indir.png) 0 0 no-repeat;} .bilgi {background: transparent url(info.png) 0 0 no-repeat;} .kalp {background: transparent url(kalp.png) 0 0 no-repeat;} .cark {background: transparent url(cark.png) 0 0 no-repeat;} üstteki kodumuzda ise "A" elementine atadığımız class lara arka plan resimi veriyoruz hepsine tek tek ayrı verdik menü resimleri farklı olduğu için örnek resim altta  devam ediyoruz a:hover.ara, a:hover.indir, a:hover.bilgi, a:hover.kalp, a:hover.cark { background-position:0 -58px; } üstteki kodumuzda ise son olarak fare mizi menü ikonun üstüne getirince hazırladığımız resimin alttaki kısmını ekranda gösteriyoruz ben boyutları aynı olduğu için hepsini birleştirdim imajları örnek olarak yaptım bilgisayarımda bulduğum en uygun resimler bunlardı aslında ben yinede PSD sini ekliyorum belki size yardımcı olur hoşcakalın... Örnek - Ön İzleme Bu menüyü bilgisayarıma kaydet |
||
 |
||||
7 Şubat 2010 01:28 26tuncer demiş ki: blackinci teşekür ederim bu css menülerden birini php nukede kullandım elinize sağlık güzel işler çıkarmışsınız menüler göz alıyor php nuke ccs menü örneği |
||||
 |
||||
30 Ocak 2010 18:57 25blackinci demiş ki: .menu ul li { float: left; margin-right: 2px; } Yukarıdaki float:left kodunu silerseniz alt alta sıralanırlar |
||||
|
||||
24 Temmuz 2009 23:00 23nskmr demiş ki: blackinci, sana güvenim tam, inşallah bu tür aksilikler tekrar başına gelmez. |
||||
|
||||
24 Temmuz 2009 21:12 22blackinci demiş ki: nskmr, Aslında hepsini temizledim sanıyordum ama birtek orda kalmış onuda temizledim gönül rahatlığı ile girebilirsiniz bir kaç gün içinde uyarı kalkar |
||||
|
||||
24 Temmuz 2009 15:58 21nskmr demiş ki: Önizlemede virüs var sanırım, dün (yani ayın 23'ünde) google sayfada virüs saptamış. Firefox'la girdim, lütfen bu link virüslü ise temizleyelim |
||||
|
||||
16 Ocak 2009 02:24 20oğuzhan demiş ki: bana bu csslerin html ve css kodlarını verirmisiniz direkt atıcam şekilde birşey anlamadım ondan |
||||
 |
||||
21 Ekim 2008 08:52 19Evan demiş ki: İcon Arşivi İstiyorsan www.crystalxp.net Adresine Bakmanı Öneririm  |
||||
|
||||
21 Ekim 2008 04:40 18Most_Speed demiş ki: çok güzel anlatım yapmışsınız tebrikler şimdi burda kullandığınız iconların farklı olanlarını bize hangi programla yapmamızı önerirsiniz en basit yönüyle hangisiyle nasıl yapabiliriz |
||||
| Son Yapılan 10 Yorum | ||
|
||
|
Yukarı
İletişim
RSS Takip
İstatistikler
Site İçeriği
Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2 |