Ana içeriğe atla

CSS İle Açılır Menü Yapımı

Merhaba arkadaşlar bu gün sizinle Css ile açılır menü yapacağız.Nedir bu açılır menü diye sorarsanız.Mesela ürünler linkine tıkladınız ürünler linkine tıkladığınızda telefon,bilgisayar,buzdolabı gibi seçeneklerinde açılmasıdır.Hemen bunu örnek ile gösterelim.

 İlk önce alanlarımızı girelim.




























Şimdi listeleme etiketlerinin işaretlerini kaldıralım.

























Şimdi linkleri sola hizalayalım ve farkı görelim.


















Şimdi tasarımı yapalım ve alanlar arasındaki mesafeyi ayarlayalım.











Şimdi üzerine gelindiğinde renk değişsin.






Şeklinde olacaktır herkese iyi günler.
KODLAR
<html>
<head>
<title>Açılır Menü Yapımı</title>
<style type="text/css">
.menu ul
{
list-style-type:none;
}
.menu li
{
float:left;
}
.menu li ul
{
display:none;
}
.menu ul li a
{
background-color:gray;
display:block;
color:white;
text-decoration:none;
font-weight:bold;
font-family:Bradley Hand ITC;
padding:3px;
}
.menu ul li a:hover
{
background-color:red;
color:yellow;
}
</style>
</head>
<body>
<ul class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Dizüstü</a></li>
<li><a href="#">Masaüstü</a></li>
<li><a href="#">Telefon</a></li>
<li><a href="#">Tablet</a></li>
</ul>
</li>
<li><a href="#">Parçalar</a></li>
<li><a href="#">Bize Ulaşın</a></li>
</ul>
</div>
</body>
</html>
Etiketler:

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Algoritma İle 4 işlem Hesabı Yapan Program

Merhaba arkadaşlar yeni bir algoritma çalışması ile birlikteyiz.Bu günkü çalışmamız dört işlem üzerine olacak.Girilen iki sayı arasında toplama,çıkarma,çarpma ve bölme işlem sonuçlarını ekranda gösterecek.Mini bir hesap makinesi yapacağız ilerde şimdi sadece 4 işlemi konu alan bir çalışma yaptım. Kolay bir uygulama  üstelik karışıkta olmadı Adımları aşağıda gösterdim.Umarım işinize yarar herkese kolay gelsin iyi dersler. ÇALIŞMADA İZLENECEK ADIMLAR Adım 1: Başla Adım 2: Birinci Sayıyı Gir:A Adım 3: İkinci Sayıyı Gir:B Adım 4: sonuç1=a+b A8 gideceğiz Adım 5 :sonuç2=a-b A9  gideceğiz Adım 6: sonuç3=a*b A10  gideceğiz Adım 7: sonuc4=a/b A11  gideceğiz Adım 8: Toplama işleminin sonucu:sonuç1 Adım 9: Çıkarma işleminin sonucu:sonuç2 Adım 10: Çarpma işleminin sonucu:sonuç3 Adım 11: Bölme işleminin sonucu:sonuç4 Adım 12: Bitir PROGRAMDA YAPIYORUZ; İşlemlerimiz bu kadar arkadaşlar.Göründüğü gibi zor bir tarafı yok.Mantık aynı mantık.Sadec...
Yorum Gönder
Devamı

Algoritma İle Ehliyet Sorgulatma

Merhaba arkadaşlar bugün sizinle algoritma ile ehliyet alıp alınamayacağını sorgulayacağız.Basit bir uygulamayı daha önce C # ile yapmıştık şimdi Flow Chart ile yapacağız.Adımları ve kodları sizinle paylaşacağım umarım işinize yarar herkese kolay gelsin. İZLENECEK ADIMLAR: Adım 1: Başla Adım 2: Yaşınızı Giriniz:yas Adım 3: Eğer yas>=18 ise Adım 5  gideceğiz Adım 4: Eğer yas<= 18 ise Adım 6 gideceğiz Adım 5: Ehliyet alabilecek yaştasınız. Adım 6: Ehliyet alamayacak yaştasınız. Adım 7: Bitir PROGRAM İLE YAPALIM Çalışmanın mantığı basit.Eğer girilen yaş 18 ve 18 den büyükse ehliyet alabilecek.Aksi taktirde yaşı 18 den küçükse ehliyet alamayacak.Eğerleri çıkışlara bağladıktan sonra evet yazıları geliyor.Çalıştırdığınızda hata alırsınız.Program size hayır ile bağlamanız gerektiğini söylüyor.Bu nedenle bağlama işlemlerinde hata alıyoruz.Bunlara dikkat etmemiz yeterli.İşinize yaraması dileği ile herkese iyi günler,iyi dersler.
Yorum Gönder
Devamı

JavaScript İle Kullanıcı Girişi

Kullanıcı Adı ve Şifreyi biz klavyeden girelim. BİRDE YANLIŞ YAPARAK DENEYELİM ÇALIŞMANIN KODLARI <html> <head> <title>Javascript Dersleri</title> <script language="javascript" type="text/javascript"> var ad=prompt("Adınızı Giriniz"); var sifre=prompt("Şifrenizi Giriniz"); if(ad=="mali" && sifre=="123") { document.write("Tebrikler Giriş Başarılı:", ad,sifre); } else { document.write("Kullanıcı adı veya şifre hatalı"); } </script> </head> </html>
Yorum Gönder
Devamı