Skip to main content
Sitenizle ilgili anlık, acil, geçici ve önemli bilgileri kullanıcılara duyurabilmenizi sağlar.
Millileştirilmiş. Uluslararası Pardus Linux nedir ?

Deep-Kod Genç Nesil Bilgi Paylaşım Platformu'a Hoş geldiniz!

Merhaba, Kardeşim! Seni aramızda görmek güzel ama sitemizden daha iyi yararlanabilmen için "GİRİŞ" yapmalı ya da "KAYIT" olmalısın.Bilgi güvenliği,emek hırsızlığının önüne geçmek adına sende bir teşekkür edebilirsin.İlgi ve alakandan dolayı Deep-Kod Genç Nesil Bilgi Paylaşım Platformu yönetimi olarak teşekkür ederiz.[GENÇ NESİL BİLGİ PAYLAŞIM PLATFORMU]

Giriş ya da Kayıt

(Sadece kayıtsız kullanıcılar tarafından görüntülenebilir.)

11okY.png

Bütün büyük işler, küçük başlangıçlarla olur.
Her şeyin mühim noktası, başlangıçtır.

AZERBAYCAN
TÜRKİSTAN
KIRGIZİSTAN
TÜM TÜRK MİLLLETLERİ C*

“Türk Telekom Siber Güvenlik”

Türk Telekom’dan Türkiye’nin En Büyük Siber Güvenlik Merkezi

Haberi Görüntüle 09.01.2019

"STM" Siber Güvenlik

STM, Yeni siber tehdit durum raporunu açıkladı.

Haberi Görüntüle 09.01.2019

dropdown list

263
415
8
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

dropdown list
#1
arkadaşlar dropdown list ile menü yapabilir miyim?
İmza @ertugrulahmett
Mantık her zaman kazanır  Big Grin
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

RE: dropdown list
#2
Ne için , biraz konuyu aç.
İmza @Mücahit
Mühendis Yolunda
                 /
       DevelopeR
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

Cvp: RE: dropdown list
#3
(27-04-2019, Saat: 13:06)Mücahit Adlı Kullanıcıdan Alıntı: Ne için , biraz konuyu aç.

responsive bir şablon yapmaya çalışıyorum ama sayfa daraldığı zaman menü fazla yer kaplıyor
bende açılır liste elemanı ile menü yapmaya çalıştım ama yapamadım
İmza @ertugrulahmett
Mantık her zaman kazanır  Big Grin
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

RE: dropdown list
#4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.ustKisim {
position: fixed;
background: gray;
color: yellow;
height: 50px;
width: 150px;
top: 50px;
margin-left: -170px;
}

.icerik {
margin: 50px auto 0 auto;
width: 400px;
}
</style>
</head>
<body>
<div class="icerik">
<div class="ustKisim"> Bunun içine kodlarını yerleştirebilirsin responsiveye gerek yok.</div>

</div>
</body>
</html>
İmza @Mücahit
Mühendis Yolunda
                 /
       DevelopeR
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

Cvp: RE: dropdown list
#5
(29-04-2019, Saat: 23:10)Mücahit Adlı Kullanıcıdan Alıntı: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.ustKisim {
 position: fixed;
 background: gray;
 color: yellow;
 height: 50px;
 width: 150px;
 top: 50px;
 margin-left: -170px;
}

.icerik {
 margin: 50px auto 0 auto;
 width: 400px;
}
</style>
</head>
<body>
<div class="icerik">
 <div class="ustKisim"> Bunun içine kodlarını yerleştirebilirsin responsiveye gerek yok.</div>

</div>
</body>
</html>

hocam şablonu hazırladım zaten ama menüyü küçültmeye çalışıyorum
İmza @ertugrulahmett
Mantık her zaman kazanır  Big Grin
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

RE: dropdown list
#6
Yardımcı olabilirim mucahitozcantr16@gmail.com neresi düzeltilecekse.
İmza @Mücahit
Mühendis Yolunda
                 /
       DevelopeR
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

RE: dropdown list
#7
Nelere ihtiyacınız olacak?
Bu rehbere başlamadan önce aşağıdakilere ihtiyacınız var:

Hosting kontrol panelinize erişim
Adım 1 — HTML dosyasının oluşturulması
Öncelikle boş bir HTML dosyası oluşturmalısınız. Bu rehberde menu.html adından yeni bir dosya oluşturacağız. Bu işlem için Dosya Yöneticisi’ni kullanıyoruz. Ancak aynı işlem FTP istemcisi (menu.html dosyasını bilgisayarınızda oluşturun ve hosting hesabınıza yükleyin) ile de yapılabilir.

Hostinger Dosya Yöneticisi

Adım 2 — HTML menü kodunun eklenmesi
Menümüz Ana menü adı verilen bir ana öğeden ve beş alt öğeden yapılacaktır. Href özelliği içindeki URL’yi değiştirerek, her Çocuk Menüsünü web sitenizin farklı bir sayfasına bağlayabilirsiniz. Her bir öğenin farklı bir sınıfa sahip olduğunu görebilirsiniz – dropdown, mainmenubtn ve dropdown-child. Sınıflar, farklı CSS kuralları uygulamak için gereklidir.

<div class="dropdown">
<button class="mainmenubtn">Ana Menü</button>
<div class="dropdown-child">
<a href="http://wwww.alanadiniz.com/sayfa1.html">Alt Sayfa 1</a>
<a href="http://wwww.alanadiniz.com/sayfa2.html">Alt Sayfa 2</a>
<a href="http://wwww.alanadiniz.com/sayfa3.html">Alt Sayfa 3</a>
<a href="http://wwww.alanadiniz.com/sayfa4.html">Alt Sayfa 4</a>
<a href="http://wwww.alanadiniz.com/sayfa5.html">Alt Sayfa 5</a>
</div>
</div>
CSS kuralları olmadan HTML menüsü şu şekilde görünür:

pasted image 0 65

Görebileceğiniz gibi düz HTML menüsü optimize edilmemiştir ve güzel görünmez. Ancak, bir sonraki adımda CSS kurallarını uygulayarak bunu değiştireceğiz.

Adım 3 — CSS’in uygulanması ve açılır menü efektinin oluşturulması
HTML kodumuzu aşağıdaki CSS kuralları ile stillendireceğiz.

.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Görebileceğiniz gibi .dropdown-child, display: none CSS kuralına sahip. Ancak, kullanıcı mouse’u üzerine getirirse (.dropdown:hover), CSS kuralı display: block olacak şekilde değişiyor. Bu da menümüz için açılma efektini yaratıyor.

Aşağıdaki menu.html dosyamızın son hali:

<html>
<head>
<style>
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Ana Menü</button>
<div class="dropdown-child">
<a href="http://wwww.alanadiniz.com/sayfa1.html">Alt Sayfa 1</a>
<a href="http://wwww.alanadiniz.com/sayfa2.html">Alt Sayfa 2</a>
<a href="http://wwww.alanadiniz.com/sayfa3.html">Alt Sayfa 3</a>
<a href="http://wwww.alanadiniz.com/sayfa4.html">Alt Sayfa 4</a>
<a href="http://wwww.alanadiniz.com/sayfa5.html">Alt Sayfa 5</a>
</div>
</div>
</body>
</html>
Bu örnekte dahili CSS stillerini kullandık. Bu da CSS kodlarının aynı HTML dosyasında olduğu anlamına gelir. Fakat, CSS dosyalarını HTML’e bağlamak için birkaç yöntem vardır.

Renkleri ve boyutları değiştirerek CSS kodlarında denemeler yapabilirsiniz. Bu butonu ihtiyaçlarınıza göre değiştirebilirsiniz.

Sonuç
Bu rehberi tamamlayarak yalnızca CSS ile nasıl basit bir açılır menü yapabileceğinizi öğrendiniz. Bu rehberdeki kod çok hafiftir ve sitenizin açılma süresini etkilemeyecektir.
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

RE: dropdown list
#8
Yeterli oldu mu ertugrulahmett kardeşim ?
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt

RE: dropdown list
#9
Son Düzenleme: 05-05-2019, Saat: 01:14, Düzenleyen: ertugrulahmett.
başka bir yolla halletim ama sağolun hocam

bu arada alakasız ama Atatürk resminin yanındaki roketi neden favicon yapmıyorsunuz?
İmza @ertugrulahmett
Mantık her zaman kazanır  Big Grin
Cevapla

İçeriği görüntüleme izniniz bulunmuyor!

Üzgünüz, içeriği görüntüleyebilmek için giriş yapmalı ya da kayıt olmalısınız.

Giriş ya da Kayıt


Yorum yapma izniniz bulunmuyor!

Üzgünüz, yorum yapabilmek için giriş yapmalı ya da kayıt olmalısınız.

ya da

Kayıt ol!

Topluluğumuzda yeni bir hesap oluşturun.

Kayıt


Hızlı Menü:


Konuyu Okuyanlar: 1 Ziyaretçi