Home CSS3 / HTML5 css3 ışıklı menü yapımı
css3 ışıklı menü yapımı

css3 ışıklı menü yapımı

321
21

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)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(21)

  1. menüye bu şekilleri,efektleri tasarımı yapabilmek için photoshoptan mı yararlanıyorsunuz?

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

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

    1. 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;
      }

  4. Hocam benim 8 menüm var.üstündeki ışığı 8 menü üzerine kadar hangi kısımla oynayarak getirebilirim.

    1. Ege indirme linkinde sorun yoktur. çünkü çalışmaları kendi hostumda barındırıyorum. bilgisayarınızdan kaynaklanan bir sorun var herhalde

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

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.