Geniş Ekran Modu Otomatik Ekran Boyutu Font Boyutunu Azalt Font Boyutunu Azalt Font Boyutunu Normal Yap Yazdır

CSS ile Content Menü Yapımı

İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı

Menün Örnek görünümleri:

CSS ile Content Menü Yapımı

CSS ile Content Menü Yapımı

CSS Kodları:

 

.menu_div * { list-style: none; margin:0 0 0 0; padding:0; cursor:default; }
.menu_div a { margin:10px; padding: 5px; text-decoration: none; color: #555555; }
.menu_div>ul { float: left; }
.menu_div ul li { }
.menu_div ul li > div { display:none; }
.menu_div ul li:hover > div { display:block; }
/*.menu_div ul li a:hover > div { display:block; }
.menu_div ul li div:hover { display:block; }*/

.menu_div ul li ul { padding:10px 5px; }

 

HTML Kodları:

 

<div class="menu_div"  style="position: absolute; z-index: 500; margin-top:15px;">
<ul>
   <li>
      <a href="{anamenu_link}" class="ana_menu">{anamenu_ad}</a>
      <div style="clear:both; overflow:hidden; margin:24px auto;">

         <div><!--menu ust-->
            <div class="menu" style="background-attachment: scroll; background-position: 0 -5px"><!--sol kose-->
               <div class="menu" style="background-attachment: scroll; background-position: 100% -275px; padding: 0 8px;"><!--sag kose-->
                  <div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -545px; height: 8px"><!--ust orta-->
                  </div>
               </div>
            </div>
         </div>
         <div><!--menu orta-->
            <div class="menu" style="background-attachment: scroll; background-position: 0 -10px"><!--sol kose-->
               <div class="menu" style="background-attachment: scroll; background-position: 100% -280px; padding: 0 8px;"><!--sag kose-->
                  <div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -549px;"><!--orta orta-->

                     <ul>
                        <!--AB: AltMenuler-->
                        <li><a href="{altmenu_link}">{altmenu_baslik}</a></li>
                        <!--AS: AltMenuler-->
                     </ul>

                  </div>
               </div>
            </div>
         </div>
         <div><!--menu alt-->
            <div class="menu" style="background-attachment: scroll; background-position: 0 -260px"><!--sol kose-->
               <div class="menu" style="background-attachment: scroll; background-position: 100% -530px; padding: 0 8px;"><!--sag kose-->
                  <div class="menu" style="background-attachment: scroll; background-repeat:repeat-x; background-position: 0 -800px; height: 10px"><!--ust orta-->
                  </div>
               </div>
            </div>
         </div>

      </div>
   </li>
</ul>
</div>

 

 

 

 

Bu üç parçadan oluşan resim tek bir dosyaya alt alta yerleştirilmeli...

CSS ile Content Menü Yapımı

CSS ile Content Menü Yapımı

CSS ile Content Menü Yapımı

CSS ile Content Menü Yapımı

 


 

Bu içerikle ilgili henüz herhangi bir yorum yapılmamıştır. Bu içerikle ilgili Yorumunuzu eklemek için burayı tıklayınız.

Css

Internet Explorer Koşullu İşlemleri
Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidi...
Background, Border, Classification, Dimension, Fon...
Background, border, classification, dimension, font, generated content, list and marker, margin
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası...
Css stillerinin nesneyi etkileme yolları ve sırası, diez,nokta, yıldız, class css de nasıl kullanılı...
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası
Class, (diyez), (nokta), (yıldız) işaretleri cssde ne ifade eder.
Cssin Html İçerisinde Kullanım Şekilleri, Pseudo C...
Cssin html içerisinde kullanım şekilleri, pseudo class örnekleri
Cssin Html İçerisinde Kullanım Şekilleri, Puseduo ...
Cssin html içerisinde kullanım şekilleri, puseduo class örnekleri
Outlines, Padding, Positioning, Table, Text, Pseud...
Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements gibi css nesnelerinin a...
Outlines, padding, positioning, table, text, pseud...
Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements
Şerit Halindeki Resimden Bölümler Almak
Sitelerin yüklenme hızını arttıran ve template yapısına uygun olmasını sağlayan CSS özelliği hakkınd...
CSS Shorthand(kısacası) Tenikleri
Uzun parametlereler alan CSS taglarının kısaca yazılış metotları
CSS Seçicileri
CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML d...
CSS Classları Hakkında
Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale
Pseudo-sınıfları ve Pseudo-elementleri
Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanı...
CSS’i Web Sayfalarına Eklemek
CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration...
CSS ile Web Sayfası Oluşturma
CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymak...
CSS te kullanılan kısaltmalar
CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığ...
CSS ile yazıcı çıktı işlemleri
Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel ...
CSS ile kullanımdan kalkan özellikler
CSS kullanımı ile tedavülden kalkan veya kullanımı azalan özellikleri sıralayalım:
  • 1
  • 2

Ödev Gönder | İncelenmeyi Bekleyen Ödevler | Uygulama Resimleri | Uygulama Resmi Gönder | İnternet Üzerinden Sınav | Test Sorusu Gönder | Sınıf Karneleri | Anketler | Linkler
www.dijitalders.com

bilgidijitalders.com
Bu sayfalar en iyi 1024 x 768 ekran çözünürlüğünde görüntülenir.
Site içerikleri, site kullanıcıları tarafından yollanan içeriklerdir. Her hangi bir içeriğin lisanslı yahut şahsınıza ait olduğunu tarafımıza iletirseniz gerekli düzenlemeyi yapacağız. Kullanılan içerikler, siteyi kullanan öğrenciler ve araştırmacılar için kolaylık sağlamak amacıyla oluşturulmuştur.
Sayfada HATA! Olduğunu Düşünüyorsanız | Sık Kullanılanlara Ekle | www.dijitalders.com'u Ana Sayfam Yap | Web Tasarımcıya e-Posta
Bu site 879,324 kişi tarafından ziyaret edilmiştir.