- Ana SayfaCSS hakkında ihtiyaç duyulan Css Menu, tablo, efekt gibi konularda kaynak.
- ÖrneklerBütün CSS Kategorileri ve özel örneklerini liste halinde görabilirsiniz.
- DökümanlarBu CSS örneklerini hazırlarken kullandığımız kaynakları listeledik.
- İletişimBizimle iletişime geçebilirsiniz. İstediğiniz örnekler varsa yazabilirsiniz. Ve Örnek Gönderebilirsiniz!
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.
CSS 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 -->
Toplam İndirme: 1448 | Toplam İzleme: 5522<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>
