css3 ışıklı menü yapımı
Merhaba arkadaşlar bu dersimizde css3 ile hazırlanmış ışık efektli menüyü düzenlemeyi göstereceğim. Menü yapılmış olarak size vereceğim için sizin yapmanız gereken sadece index.html dosyasını istediğiniz gibi düzenlemek olacaktır.
Yinede bilmeyen arkadaşlar için kısaca anlatayım. index.html dosyasını dreamweaver programıyla açtıktan sonra sayfayı aşağıdaki gibi göreceksiniz. <li><a href=”https://www.omerbozalan.com/”>Anasayfa</a></li> bu kısımda yapılan şudur ; “<a href= “ den sonra tıklandığında gitmesi gereken linki yazıyorsınuz. Ben örnek olsun diye Anasayfaya tıklandığında www.omerbozalan.com adresine gitmesi için linki yazdım. Sizde bu şekilde diğer linkleri düzenleyeceksiniz.
Kolay gelsin.
<header>
<h2>omerbozalan.com</h2>
</header>
<div>
<ul id=”nav”>
<li><a href=”https://www.omerbozalan.com/”>Anasayfa</a></li>
<li><a href=”#”>Menu 1</a>
<ul>
<li><a href=”#”>Submenu 1</a></li>
<li><a href=”#”>Submenu 2</a></li>
<li><a href=”#”>Submenu 3</a></li>
<li><a href=”#”>Submenu 4</a></li>
<li><a href=”#”>Submenu 5</a></li>
</ul>
</li>
ÇALIŞMAYI GÖRMEK İÇİN TIKLAYIN
ÇALIŞMAYI İNDİRMEK İÇİN TIKLAYIN
(321)
Yorum(21)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
menüye bu şekilleri,efektleri tasarımı yapabilmek için photoshoptan mı yararlanıyorsunuz?
evet kadir bey photoshop programı veya benzeri resim düzenleme programlarıyla bunları gerçekleştiriyoruz.
birde sizden ricam olacak css te uyguladığınız işlemlerde ne yaptığınızı yanına açıklama satırı yaparsanız çok sevinirim şimdiden teşekkürler
kadir bey tam anlamıyla sorunuzu anlayamadım biraz açarsanız size daha iyi bir açıklamada bulunabilirim
yapmış olduğun html sayfanda tablo içine size verdiğim kodları yerleştireceksiniz. o kadar.
Hocam Mrb. Bunu Yeni Siteme Eklemek İstiyorum Yalnız Bir Problem var Aşağıya Açılan Menüler Alttaki Tablonun Arkasında Kalıyor Nasıl Çözeriz Bu Sorunu?
veys arkadaşım menu.css dosyasının içinde düzenleme yapman gerekli. senin için baktım dosyay tekrar aşağıdaki satırları kendi butonlarının soldan uzunluklarına göre yapacaksın. aşağıdaki satırı vul ve soldan nerelere denk geliyor px cinsinden yaz. yani left olan yerleri değiştireceksin. kolay gelsin. yaptığında haber ver.
#nav li:nth-child(1):hover ~ #lavalamp {
left: 22px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
left: 565px;
}
Tamamdır Hocam sola yasladım Halloldu Çok Sağol Yardımlların İçin..
Hocam benim 8 menüm var.üstündeki ışığı 8 menü üzerine kadar hangi kısımla oynayarak getirebilirim.
efdal yularıda anlatım var. yorumları kontrol et
Hocam indirme linki çalışmıyor yenileyebilir misiniz ?
Ege indirme linkinde sorun yoktur. çünkü çalışmaları kendi hostumda barındırıyorum. bilgisayarınızdan kaynaklanan bir sorun var herhalde
çok saolunnn
menu uzunlugunu 961 nasıl bunu 980 yapabilirim acaba
Turan arkadaşım menünün uzunluğunu bulmuşsun da nerden değiştireceğini mi bulamışsın 🙂 Bulduğun yerden değiştireceksin 🙂
abi inan denemediğim sey kalmadi kac saattiruğraşıyorum bi uzatamadım boyunu:)
Turan menu.css dosyasındaki nav elementinin ordan menü uzunluğunu değiştireceksin.
peki menu rengini nasil değiştirebilirim
Onu da kendin bul Turan:) hadi kolay gelsin. hepsi aynı yerde biraz araştıracaksın sonra soracaksın.
tesekkurler vallaha araştırmaktan başım agrıdı bakarım biraz daha iyi geceler 😀
Görsel olarak şık bir menü örneği olmuş.
Sorum şu:
menu ve submenu var. submenü ye de bir alt menü daha eklemek istersek hangi kodu yazacağız.
Selamlar.