HTMLKODEFE ~ By Radyasyon

Dikey Resimli CSS Menü Örneği

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 Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.

                
<ul class="menu"> 

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

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

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

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


ul> 
        

<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>