Yayınlanmış Yazılar

Mavi Resimli Menü Yapımı

Etiketler:, , ,

Menü Önizlemesi

mavi resim css menü

Kullanacağımız Resimler:

  1. mavi resim css menü
  2. mavi resim css menü
  3. mavi resim css menü
  4. mavi resim css menü
  5. mavi resim css menü


CSS kodlarımız:

DÜZ YAZI
CSS:
  1. div#menu {width:184px; background:url(menu_1.gif) top no-repeat; padding-top:44px;}
  2.  
  3. div#menubody {background:url(menu_2.gif) repeat-y; padding-left:21px;}
  4.  
  5. div#menubottom {height:26px; background:url(menu_4.gif) bottom no-repeat;}
  6.  
  7. ul#menulist {width:144px; list-style-type:none;}
  8.  
  9. ul#menulist li {height:27px; background:url(menu_3.gif) bottom repeat-x;}
  10.  
  11. ul#menulist a {width:122px; height:20px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 10px; display:block !important; display:inline-block;}
  12.  
  13. ul#menulist a:hover {background:url(menu_5.jpg) left repeat-y;}

Menü için HTML kodlarımız:

DÜZ YAZI
HTML:
  1. <div id="menu">
  2.  <div id="menubody">
  3.  <ul id="menulist">
  4.  <li><a href="#">Başlık 1</a></li>
  5.  <li><a href="#">Başlık 2</a></li>
  6.  <li><a href="#">Başlık 3</a></li>
  7.  <li><a href="#">Başlık 4</a></li>
  8.  <li><a href="#">Başlık 5</a></li>
  9.   </ul>
  10.  </div>
  11. <div id="menubottom"></div>
  12. </div>

Canlı Önizleme

Orjinal kaynak: CSS graphic menu with rollovers

Bu Yazıyı Paylaşın

Yorumlar (2)

 

  1. eren diyor ki:
    23 Temmuz 2009, 00:47

    arkadaşlar buradaki kodların aynısını yazdığımda tablolar birbirinden ayrı duruyor

    * {margin:0; padding:0;}

    bunu yazmayı unutmuşsunuz css kısmında

    teşekkürler güzel paylaşım.

  2. OneByOne diyor ki:
    30 Ekim 2009, 01:23

    Selamlar site ve paylaşımlar çok güzel devamını temenni eder başarılar dilerim.

    Not: @eren arkadaşımızın dediği gibi;
    ” {margin:0; padding:0;} ” ibaresi buradaki paylaşımda eksik yazılmış öğrenmeye hevesli arkadaşların bayağı uğraşmalarına neden olacaktır.Düzeltirseniz iyi olur sanırım,İyi çalışmalar.

Yorum Yazın

revizyon ile organize matbaacılık brnckvvtmllttrhaberi - Maltepe Nakliyat