14-01-2019 Saat: 16:09
Linkleri yatay olarak dizmek için display:inline özelliğini kullanıyoruz:
Kod:
Kod:
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li {
display: inline;
}
Linklerin altındaki çizgileri kaldırıyoruz:
Kod:
Kod:
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li {
display: inline;
}
ul.menu li a {
text-decoration: none;
}
Linkler arasına biraz boşluk veriyoruz:
Kod:
Kod:
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li {
display: inline;
}
ul.menu li a {
text-decoration: none;
padding: .2em 1em;
}
Menüyü biraz renklendiriyoruz:
Kod:
Kod:
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li {
display: inline;
}
ul.menu li a {
text-decoration: none;
padding: .2em 1em;
color: #1B1B1B;
background-color: #E2E2E2;
}
Son olarakta rollover efekti vermek için a:hover özelliğine renk atıyoruz:
Kod:
Kod:
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul.menu li {
display: inline;
}
ul.menu li a {
text-decoration: none;
padding: .2em 1em;
color: #1B1B1B;
background-color: #E2E2E2;
}
ul.menu li a:hover
{
background-color: #999;
}
Burada temel menü örnekleri verdik. Mesele işin yapılışını öğrenmek. Daha ayrıntılı ve güzel örnekler internette bir çok yerde mevcut.