Css ile Menü Yapmak

0 yorum

Merhaba arkadaşlar, bugün sizlere Css ile nasıl menü yapılır onu kısaca anlatmak istiyorum.
*İlk olarak Html kısmımızı Body tagları arasına ekliyoruz.
1<ul id="menu">
2<li><a href="#">Ana Sayfa</a></li>
3<li><a href="#">Haberler</a></li>
4<li><a href="#">Referanslar</a></li>
5<li><a href="#">Hakkımızda</a></li>
6<li><a href="#">İletişim</a></li>
7</ul>


*İkinci olarak css kodlarımızı style tagları arasına ekliyoruz yada genel bir css dosyası oluşturduysak onun içerisine de ekleyebiliriz.
Yatay menü yapmak istersek css kodlarımız;
01#menu {
02    margin: 0px;
03    padding: 0px;
04    list-style-type: none;
05}
06#menu li {
07    float: left;
08    width: 150px;
09    position: relative;
10}
11#menu a {
12    font-family: Arial;
13    font-size: 15px;
14    color: #FFFFFF;
15    text-decoration: none;
16    background-color: #314c5f;
17    display: block;
18    padding-top: 5px;
19    padding-right: 5px;
20    border: 1px solid #9fb2bc;
21    text-align: center;
22    line-height: 30px;
23    margin-right: 2px;
24    <!--border-radius:5px;  İstenilirse menünün kenarları yuvarlak yapılabilir-->
25}
26#menu a:hover {
27    background-color: #fff;
28    color:#000;
29}


Dikey menü yapmak istersek css kodlarımız;
01#menu {
02    margin: 0px;
03    padding: 0px;
04    list-style-type: none;
05}
06#menu li {
07    width: 150px;
08}
09#menu a {
10    font-family: Arial;
11    font-size: 15px;
12    color: #FFFFFF;
13    text-decoration: none;
14    background-color: #314c5f;
15    display: block;
16    padding-top: 5px;
17    padding-right: 5px;
18    border: 1px solid #9fb2bc;
19    text-align: center;
20    line-height: 30px;
21    margin-right: 2px;
22    width:100%;
23    <!--border-radius:5px;  İstenilirse menünün kenarları yuvarlak yapılacak-->
24        float: left;
25}
26#menu a:hover {
27    background-color: #fff;
28    color:#000;
29}
demo



Bir başka makalede görüşmek dileğiyle…
Bu Bilgiyi Paylaş :

Yorum Gönder

Sitemizde sizlere ilginç gelebileceğine inandığımız her konuda yazılar ve bilgiler paylaşıyoruz. Sitemizde bulabilecekleriniz şöyle:Otomobil,sağlık,blog,haber,backlink,site ekle,banner ekle,html kodlar,dizi,film,ilginç bloglar,blogger için temalar,internet için bilgiler,siyasi görüşler,anketler,yazılımlar,ilginç siteler,ilginç insanlar,mesleklerle ilgili ayrıntılar,forumlar,fikir paylaşımları,yorumlar
 
Siteler: Oyun58 | Kadın Ve Yaşam | Dizi İzle
Copyright © 2011. Bilgi Blog - Tüm Hakları Saklıdır
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger