Giriş Yap

**GrafikDizayn** · 05-02-2012, 09:56

Tüm Dikey Menü Paylaşımlarını Bu Konu İçerisinde Yapınız..!

**aktifim** · 19-02-2012, 09:58

sitemde paylaşmaya yapmıştım burdada paylaşıyorum iki tane menü

1. dikey menü

tabiki hover olarak yaptım

resim

kod(kod tek kod'tur css falan içinde arkadaşlar)

Kod:

<style type="text/css">  <!-- 

#menu ul { 
   list-style-type: none; 
   padding: 0px; 
   margin: 0px; 
} 
#menu a { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 14px; 
   color: #000000; 
   text-decoration: none; 
   display: block; 
   background-image: url(http://i.imm.io/fuxV.png); 
   padding-top: 5px; 
   padding-left: 30px; 
   height: 30px; 
   width: 230px; 
} 
#menu a:hover { 
   background-image: url(http://i.imm.io/fuyn.png); 
} 
-->  </style></div> <div id="menu"> <ul>     <li>     <h4 style="text-align: left; "><a href="#" _fcksavedurl="#">Anasayfa</a></h4>     </li>     <li>     <h4 style="text-align: left; "><a href="#" _fcksavedurl="#">İletişim</a></h4>     </li>     <li>     <h4 style="text-align: left; "><a href="#" _fcksavedurl="#">Hakkımda</a></h4>     </li> </ul> </div>

2. menü

tabiki buda hover lı

resim

kod(bununda kodu tek kod'dur css falan içindedir arkadaşlar)

Kod:

<style type="text/css">  <!-- 

#menu ul { 
   list-style-type: none; 
   padding: 0px; 
   margin: 0px; 
} 
#menu a { 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 14px; 
   color: #000000; 
   text-decoration: none; 
   display: block; 
   background-image: url(http://i.imm.io/fz4D.png); 
   padding-top: 5px; 
   padding-left: 30px; 
   height: 30px; 
   width: 230px; 
} 
#menu a:hover { 
   background-image: url(http://i.imm.io/fz4L.png); 
} 
-->  </style> <div id="menu"> <ul>     <li>     <h3>     <a href="#" _fcksavedurl="#">Anasayfa</a></h3>     </li>     <li>     <h3>     <a href="#" _fcksavedurl="#">İletişim</a></h3>     </li>     <li>     <h3>     <a href="#" _fcksavedurl="#">Hakkımda</a></h3>     </li> </ul> </div>

bir teşekkür yeter

**WordTasarim** · 20-02-2012, 05:32

Güzel siteme yüklemedim ama resimlerde yazı kaymış gibi

**aktifim** · 21-02-2012, 12:08

2.'de kaymış onuda ben yaptım zaten Smile

**GrafikDizayn** · 21-02-2012, 05:56

Kaynak Gösterilmeden Yayınlanamaz..! | www.grafikdestek.net.tc

Kod:

<style type="text/css"> 
#linkhover ul { 
margin: 0px; 
padding: 0px; 
list-style-type: none; 
} 
#linkhover ul li a { 
display: block; 
height: 19px; 
width: 170px; 
color: #fff; 
text-decoration: none;
background-image: url(http://img.webme.com/pic/s/siir-evimiz/grafikdestek_34.png); 
background-repeat: no-repeat;
padding-top:1px;
padding:1px;
text-align:center;
font-family:Century Gothic, Arial, Verdana;
font-size: 13px;
background-position: 0px 0px; 
} 
#linkhover ul li a:hover { 
background-image: url(http://img.webme.com/pic/s/siir-evimiz/grafikdestek_35.png); 
background-repeat: no-repeat; 
} 
</style> 

<table width="170" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <th height="30" align="center" valign="middle" background="http://img.webme.com/pic/s/siir-evimiz/grafikdestek_36.png" scope="col"><strong><span style="color: #fff; "><span style="font-family: 'Century Gothic'; "><span style="font-size: 14px; ">Başlık 1</span></span></span></strong></th>
  </tr>
</table><br/><br/><br/>


<div id="linkhover"> 
<ul> 
    <li><a href="#">Sayfa Adı 1</a></li>
    <li><a href="#">Sayfa Adı 2</a></li>
    <li><a href="#">Sayfa Adı 3</a></li>
    <li><a href="#">Sayfa Adı 4</a></li>
    <li><a href="#">Sayfa Adı 5</a></li>
    <li><a href="#">Sayfa Adı 6</a></li><br/>
</ul> 
</div> 
</ul> 
</div>


<table width="170" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <th height="30" align="center" valign="middle" background="http://img.webme.com/pic/s/siir-evimiz/grafikdestek_36.png" scope="col"><strong><span style="color: #fff; "><span style="font-family: 'Century Gothic'; "><span style="font-size: 14px; ">Başlık 2</span></span></span></strong></th>
  </tr>
</table><br/><br/><br/>


<div id="linkhover"> 
<ul> 
    <li><a href="#">Sayfa Adı 1</a></li>
    <li><a href="#">Sayfa Adı 2</a></li>
    <li><a href="#">Sayfa Adı 3</a></li>
    <li><a href="#">Sayfa Adı 4</a></li>
    <li><a href="#">Sayfa Adı 5</a></li>
    <li><a href="#">Sayfa Adı 6</a></li><br/>
</ul> 
</div> 
</ul> 
</div>

**WordTasarim** · 21-02-2012, 08:19

Teşekürler

**aktifim** · 23-02-2012, 11:45

sanki çalışmıyor mert kapanmıyo Smile

**GrafikDizayn** · 24-02-2012, 06:50

Zaten kapanır menü değil Smile

**aktifim** · 24-02-2012, 07:50

kapanırmış gibi duruyo

**GrafikDizayn** · 24-02-2012, 08:35

Giriş Yap
Kullanıcı Adı:
Şifreniz:	Şifremi Unuttum?
	Beni Hatırla