Yardım & Destek

Animasyonlu Menü Yapma

Animasyonlu Menü Yapma

Aminasyonlu Menü Yapımı
Aminasyonlu Menü Yapımı

Animasyonlu menü yapma aşağıdaki menü kodunu kullanarak basit ama güzel animasyonlu bir menü yapabilirsiniz.

Önce testinizi bir html editörü yardımıyla yada kullandığınız bir web araçlarıyla yapınız.

Menü kodunu kendi isteğinize göre çoğaltabilir ve açılır menü şeklinde de yapabilirsiniz. Style kodu ieçrisindeki (bg) background resmi önemlidir bg resmi eklemeden yaparsanız menü çalışmayacaktır.

İlgili Makaleler

Menü Kodu:

<ul>
	<li><a href="#">Anasayfa</a></li>
	<li><a href="#">Hakkında</a></li>
	<li><a href="#">İletişim</a></li>
</ul>

Sitil Dosyası Kodu:

ul {
	list-style:none;
	margin:0;
	padding:0;
}
li {
	float:left;
	width:100px;
	margin:0;
	padding:0;
	text-align:center;
}
li a {
	display:block;
	padding:5px 10px;
	height:100%;
	color:#FFF;
	text-decoration:none;
	border-right:1px solid #FFF;
}
li a {
	background:url(bg.jpg) repeat 0 0;
}
li a:hover {
	background-position:50px 0;
}

Yukarıdaki sitil kodunu sitil dosyanızın içerisine ekleyin. Eğer cms sistemi kullanıyorsanız hali hazırda kullandığınız sitil ayarlarını devre dışı bırakacaktır.

O yüzden kodlamayı yaparken önce yedeğinizi alın ve yukarıda olan sitil kodlarını diğer sitil kodlarını bozmadan mevcut sıralamaya göre sadece yerlerini değiştirin veya ekleme yapın.

Animasyonlu Menü Yapma

Menü Kodu - 8
Style Dosya Kodu - 8.5

8.3

Puan

Animasyonlu menü yapma aşağıdaki menü kodunu kullanarak basit ama güzel animasyonlu bir menü yapabilirsiniz.

Kullanıcı Oyu: İlk siz olun!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu