THT DUYURU

chat
ugursuz reklam
takipci
Seçenekler

Dikey Resimli CSS Menü Örneği

Komega - ait Kullanıcı Resmi (Avatar)
Yardımsever
Üyelik tarihi:
07/2013
Nereden:
Dünydn .s
Mesajlar:
9.713
Konular:
1347
Teşekkür (Etti):
832
Teşekkür (Aldı):
2438
Ticaret:
(0) %
0
2504
21-10-2014 19:23
#1


HTML Kodu

Kod:
<ul class="menu"> <!-- Menu Begin  -->

<li>  
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="user.png" alt="user.png">
    <span class="name">Ana Sayfa</span>
    <span class="description">açıklama alanı gelecek</span>
    </a> 
</li>

<li> 
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="comment.png" alt="comment.png"> 
    <span class="name">Hakkımızda</span>
    <span class="description">açıklama alanı gelecek</span>
    </a>
</li>

<li> 
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="print.png" alt="print.png"> 
    <span class="name">Referanslar</span>
    <span class="description">açıklama alanı gelecek</span> 
    </a>
</li>

<li> 
    <a href="http://www.cssornekleri.com/menu/liste"> <img src="edit.png" alt="edit.png"> 
    <span class="name">Hizmetlerimiz</span>
    <span class="description">açıklama alanı gelecek</span> 
    </a>
</li>


</ul> <!-- Menu End -->


CSS Kodu


[/CODE]

Kod:
<style type="text/css">
.menu , .menu ul {
    width:202px;
    margin:auto;
    padding:5px;
    list-style-type: none;
    overflow:hidden;
    border:1px solid #eee;
}
.menu li {
    float:left;
    position:relative;
}
.menu li img {
    float:left;
    margin: 5px 0 0 5px;
    border:none;
}
.menu li a .name {
    float:left;
    width:166px;
    margin:0 0 0 5px;
    font-weight:bold;
    font-size:0.7em;
    cursor:pointer;
}
.menu li a:active, .menu li a:focus { 
    outline:0;
}
.menu li a .description{
    float:left;
    width:161px;
    margin:-5px 0 0 5px;
    font-weight:normal;
    font-size:0.7em;
    cursor:pointer;
}
.menu li a:link, .menu li a:visited {
    height:35px;
    font-size:1em;
    color:#000;
    text-decoration:none;
    line-height:20px;
    border:1px solid #fff;
    display:block;
    font-weight:bold;
}
.menu li a:hover  {
    background:#eee;
}
</style>
---------------------

- The End.

- Emekli Uzman Moderatör.



Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler