<html>
<head>
<style type="text/css">
#dikeymenu{
width: 250px;
background: #85DBFC;
border-radius: 5px;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
}
#dikeymenu ul{
margin: 0;
background: #F0F0F0;
border-radius: 5px;
padding: 0 5px 0 5px;
margin-top: 5px;
}
#dikeymenu ul li{
list-style-type: none;
}
#dikeymenu ul li a{
font-size: 13px;
font-family: Tahoma;
color: #339;
text-decoration: none;
}
#dikeymenu ul li a:hover{
font-weight: bold;
text-decoration: underline;
}
.menu{
background: #F0F0F0;
border-radius: 5px;
padding: 5px;
}
.menu h3{
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 20px;
color: #306;
}
</style>
</head>
<body>
Kategoriler
Kategori1
Kategori2
Kategori3
Kategori4
</body>
</html>
Ekran Görüntüsü:
Menümüzün kodları bundan ibaret.
Css ve html kodları tek bir sayfada bulunuyor.
Div menülerinde kullanılan ul li mantığı kullanıldı.
Menü örneği paylaştığımız için kodsal açıklama yapmıyorum.
<head>
<style type="text/css">
#dikeymenu{
width: 250px;
background: #85DBFC;
border-radius: 5px;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
}
#dikeymenu ul{
margin: 0;
background: #F0F0F0;
border-radius: 5px;
padding: 0 5px 0 5px;
margin-top: 5px;
}
#dikeymenu ul li{
list-style-type: none;
}
#dikeymenu ul li a{
font-size: 13px;
font-family: Tahoma;
color: #339;
text-decoration: none;
}
#dikeymenu ul li a:hover{
font-weight: bold;
text-decoration: underline;
}
.menu{
background: #F0F0F0;
border-radius: 5px;
padding: 5px;
}
.menu h3{
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 20px;
color: #306;
}
</style>
</head>
<body>
Kategoriler
Kategori1
Kategori2
Kategori3
Kategori4
</body>
</html>
Ekran Görüntüsü:
Menümüzün kodları bundan ibaret.
Css ve html kodları tek bir sayfada bulunuyor.
Div menülerinde kullanılan ul li mantığı kullanıldı.
Menü örneği paylaştığımız için kodsal açıklama yapmıyorum.
