Nasıl oluşturulur: Yukarı doğru menü

CSS ile yukarı doğru menü nasıl oluşturulur öğrenin.

Kullanıcıya tıklanabilir yukarı doğru menü oluşturun

Kullanıcının elemente fareniğini hareket ettirdiğinde menüyü gösteren bir yukarı doğru menü oluşturun.

İlk adım - HTML ekleyin:

<div class="dropup">
  <button class="dropbtn">Yukarı Açılır</button>
  <div class="dropup-content">
    <a href="#">Bağlantı 1</a>
    <a href="#">Bağlantı 2</a>
    <a href="#">Bağlantı 3</a>
  </div>
</div>

Örnek açıklaması:

Yukarı doğru menüyü açmak için herhangi bir element kullanılabilir, örneğin <button>, <a> veya <p> elementleri.

Yukarı doğru menüyü oluşturmak için konteyner elementleri (örneğin <div>) kullanın ve içine yukarı doğru bağlantılar ekleyin.

Butonu ve <div> elementlerini <div> ile sararak, yukarı doğru menüyü doğru bir şekilde konumlandırmak için CSS kullanın.

İkinci adım - CSS ekleyin:

/* Açılır menü düğmesi */
.dropbtn {
  background-color: #3498DB;
  color: beyaz;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Konteyner <div> - Yukarı çekme menüsü içeriğini konumlandırmak için gerekli elementler */
.dropup {
  position: relative;
  display: inline-block;
}
/* Yukarı çekme menüsü içeriği (öntanımlı olarak gizli) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Yukarı çekme menüsündeki bağlantılar */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Fare imleciyle üzerine gelindiğinde yukarı çekme bağlantısının rengini değiştir */
.dropup-content a:hover {background-color: #ddd}
/* Fare imleciyle üzerine gelindiğinde yukarı çekme menüsünü göster */
.dropup:hover .dropup-content {
  display: block;
}
/* Yukarı çekme menüsü içeriği gösterildiğinde, yukarı çekme düğmesinin arka plan rengini değiştir */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Kişisel olarak deneyin

Örnek açıklaması:

Yukarı çekme düğmemize arka plan rengi, iç boşluk gibi stiller ayarladık.

.dropup sınıfı kullanarak position:relativekullanarak, yukarı çekme menüsü içeriğini yukarı çekme düğmesinin üstüne yerleştirmek istediğimizde ( position:absoluteolmak zorundadır.

.dropup-content sınıfı gerçek yukarı çekme menüsünü içerir. Öntanımlı olarak gizlidir ve fare imleciyle üzerine gelindiğinde gösterilir (aşağıda görülecektir). Lütfen dikkat edin, en küçük genişlik 160px olarak ayarlanmıştır. Bu değeri ihtiyacınıza göre değiştirebilirsiniz. İpucu: Yukarı çekme menüsü içeriğinin genişliğini yukarı çekme düğmesinin genişliği ile aynı yapmak istiyorsanız, genişliği 100% olarak ayarlayabilirsiniz (ve küçük ekranlarda) overflow:auto katmanlı geçiş etmeyi etkinleştirmek için

kenar çizgisi kullanmadık, aksine box-shadow özniteliği, yukarı çekme menüsünün bir 'kart' gibi görünmesini sağlar. Ayrıca z-index Yukarı çekme menüsünü diğer öğelerin önüne yerleştirin.

:hover 选择器用于在用户将鼠标悬停在上拉按钮上时显示上拉菜单。