Css ile Menü Yapmak

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

}

Bir başka makalede görüşmek dileğiyle…