Home JQuery Bedava Css Menü Örnekleri-Anlatım
Bedava Css Menü Örnekleri-Anlatım

Bedava Css Menü Örnekleri-Anlatım

208
12

Merhaba arkadaşlar paylaşımda sınır tanımadığımı göstermek için, elimde olan ve sizler için düzenlediğim css menüleri   sunacağım. VE BEDAVA :). Anlatıma göre hareket ederseniz kendi sayfanızda bu css menülerini kullanabilirsiniz.

RAR’lı dosyayı açtığınızda karşınıza 2 klasör ve 1 index.html dosyası çıkacak. İki klasöre hiçbir şekilde dokunmayın. Sadece metin editörüyle ( dreamweaver veya fronpage) index.html sayfasını açıyorsunuz. Karşınıza her bir menü için hazırlanmış başlıkları olacaktır.  Aşağıda sadece menü 1 isimli css menüyü örnek olarak gösterdim. Bunun gibi 12 çeşit menü var , beğendiğiniz menüyü seçtikten sonra <div class=”container”> den başlayıp  </div> e kadar olan bölümü kopyalıyorsunuz ve kendi index.html sayfasına yerleştiriyorsunuz. sonrasında ise aşağıdaki gibi menü isimlerini istediğiniz gibi düzenleyip <a href=””> kısma link vererek sayfanızı oluşturuyorsunuz. Unutmayın yukarıda <head> ile </head> arasında olan css style kodlarını yeni yapacağınız sayfada yine <head> ile </head> arasına kopyalıyorsunuz.

<div class="container">
<h2>Menu 1</h2>
<div id="menu1">
<ul>
<li><a href="">
<span class="title">Hakkımda</span>
<span class="text">Ben Kimim</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">Neler Yaptım</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">Sunduklarım</span>
</a>
</li>
<li><a href="">
<span class="title">İletişim</span>
<span class="text">Bana ulaş</span>
</a>
</li>
</ul>
</div>

Anlatım : Ömer BOZALAN

Sorularınızı iletişimden değilde yorum kutucuklarından yapınız.

DemoButton

hemen-indir-butonu

 

(208)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni 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ınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(12)

  1. Merhaba bir sorum olacaktı. Menu 5’i kullanmak istiyorum fakat sayfa içindeki pozisyonunu ayarlayamadım. Sol üst köşeye sabit duruyor, bunu istediğim piksel veya pozisyona çekmek için css’de ne yapmam gerekiyor?

    1. ersin arkadaşım dreamweaver programında tablo oluşturacaksın veya yeni bir div açarak yerini , design bölümünde belirlemelisin sonrasında ise aşağıdaki kodları ve içeriğini o düzenlediğin tablo veya div ‘in içine koyarsan sorun düzelecektir.KISACA menu5 e ait div’i yeni oluşturduğun yerdeki div’in içine koplayalayacaksın o kadar.

      < div id="menu5" > içeriğinden < /div > e kadar olan kısmı kopyalayacaksın.

  2. her zamanki gibi mükemmelsiniz hocam sizi takip ediyorum ellerinize sağlık… henüz çalışmaya bakmadım uygulamadım… çok tşkler ne araştırsam siz çıkıyorsunuz karşıma yada ilk sizin siteye bakıyorum :))) Kolay gelsin…

  3. Tebrik ederim çok faydalı çalışmalar yapıyorsunuz,çok teşekkür ederim,çalışmalarınızda daha da başarılar dilerim…

  4. Css yeni başlayan biri olarak oldukça faydalı bulduğum bir konu ..Kompozer (açık kaynak kodlu web tasım programı)ile sadece divlerden oluşan bir tasarım hazırlıyorum çalışmanınız çok faydalı oldu.
    Teşekürler emeğinize..

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.