CSS: Resimli ve Açıklamalı Menü

7 Haziran 2008 ErhanK

CSS Açıklamalı Menü Tipi

Şeklinde bir açıklamalı menünüz olsun ister misiniz?

Menü yapımında kullanacağımız CSS kodlarımız;

DÜZ YAZI
CSS:
  1. dl {
  2.     float:left;  
  3.     color:#525252;
  4.     width:300px
  5. }
  6.    
  7. dt {
  8.     padding-left:40px;
  9.     padding-top:9px;
  10.     padding-bottom:4px;
  11.     color:#666666;
  12.     font-weight:bold;
  13.     background-image:url('30j78d2.gif');
  14.     background-repeat:no-repeat
  15. }   
  16.  
  17. dt span {
  18.     border-bottom:1px solid #cccccc
  19. }
  20.  
  21. dt.home {
  22.     background-position:0 0
  23. }
  24.  
  25. dt.preferences {
  26.     background-position:0 -33px
  27. }
  28.  
  29. dt.web {
  30.     background-position:0 -66px
  31. }   
  32.  
  33. dt.users {
  34.     background-position:0 -98px
  35. }
  36.  
  37. dt.chart {
  38.     background-position:0 -131px
  39. }
  40.  
  41. dt.trash {
  42.     background-position:0 -164px
  43. }

Resim dosyamız (Sağ tıklayıp kaydedin);
CSS Menü

HTML kodlarımız ise şöyle;

DÜZ YAZI
HTML:
  2.         <dt class="home">
  3.             <span>Lorem ipsum dolor</span>
  4.         </dt>
  5.         <dd>
  6.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
  7.             <a href="http://www.cssimbenim.com" title="Detail about Lorem ipsum dolor">more &raquo;</a>
  8.         </dd>
  9.         <dt class="preferences">
  10.             <span>Donec consectetuer</span>
  11.         </dt>
  12.         <dd>
  13.             Morbi bibendum lectus vitae lectus bibendum tellus.<br />
  14.             <a href="http://www.cssimbenim.com" title="Detail about Donec consectetuer">more &raquo;</a>
  15.         </dd>
  16.         <dt class="web">
  17.             <span>Phasellus semper</span>
  18.         </dt>
  19.         <dd>
  20.             Nunc non ligula vitae ligula facilisis elementum ligula.<br />
  21.             <a href="http://www.cssimbenim.com" title="Detail about Phasellus semper">more &raquo;</a>
  22.         </dd>
  23.     </dl>
  24.     <dl>   
  25.         <dt class="users">
  26.             <span>Cras sit amet</span>
  27.         </dt>
  28.         <dd>
  29.             Web lapu izstrāde, optimizācija, kā arÄ« korporatÄ«vā stila izstrāde.<br />
  30.             <a href="http://www.cssimbenim.com" title="Detail about Cras sit amet">more &raquo;</a>
  31.         </dd>
  32.         <dt class="chart">
  33.             <span>Suspendisse</span>
  34.         </dt>
  35.         <dd>
  36.             Sed euismod, sapien in imperdiet feugiat, erat purus fringilla mauris.<br />
  37.             <a href="http://www.cssimbenim.com" title="Detail about Suspendisse">more &raquo;</a>
  38.         </dd>
  39.         <dt class="trash">
  40.             <span>Nunc dictum</span>
  41.         </dt>
  42.         <dd>
  43.             Maecenas sed pede eget nunc pellentesque convallis nunc feugiat ligu.<br />
  44.             <a href="http://www.cssimbenim.com" title="Detail about Nunc dictum">more &raquo;</a>
  45.         </dd>
  46.     </dl>

Kategori: CSS Etiketler: , , , ,
«
»
You can leave a response, or trackback from your own site. Yorum yapabilirsiniz, veya kendi sitenizden geri izleme yapabilirsiniz.

Bir yorum yazın

Yorum yaparken sadece bu XHTML kodlarını kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>