Dikey Resimli CSS Menü Örneği

Dikey ve menü başlarında resmi bulunan kullanışlı bir örnek.

Dikey formatta her menü öğesinin başına istenilen ölçlerde resimlerin yer aldığı güzel kullanışlı ve sadece CSS kodları olan (javascript olmayan) menü örneğidir.


Örnek Görünüm:
Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.
HTML Kodu
		
<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
		
<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>
Toplam İndirme: 1448 | Toplam İzleme: 5522