SORU
16 Ocak 2012, PAZARTESİ


Nasıl twitter bootstrap menü hover yerine tıklayın açılan yapmak için

Ben kullanarak bootstrap için ilk kez ve gerçekten sevme - ama bir şey yapmak istiyorum. benim menü otomatik olarak açılır üzerine getirin yerine sahip Tıklama Menüsü başlık. Ayrıca küçük okları menü başlıklarının yanında kaybetmek istiyorum.

CEVAP
16 Ocak 2012, PAZARTESİ


Otomatik olarak üzerine gelindiğinde açılır menü almak için bu kullanarak temel CSS elde edebilirsiniz. Gizli menü seçeneği seçici çalışmak gerekiyor ve daha sonra li uygun etiketi üzerinde süpürdü zaman olarak blok görüntülemek için ayarlayın. Twitter bootstrap sayfasından örnek alınarak, seçici aşağıdaki gibi olacaktır

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Eğer Bootstrap ... ... duyarlı özellikleri kullanıyorsanız, ancak bu daraltılmış bir gezinti çubuğu (küçük ekran) işlevi istemeyeceksiniz. Bunu önlemek için, bir medya sorgu yukarıda: kod sarın

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

(Şapka) bu yapılır ok gizlemek için farklı şekillerde Twitter Bootstrap sürüm 2 ve daha düşük veya sürüm 3 kullanıyor olmanıza bağlı olarak:

Bootstrap 3

Şapka çıkarmak için sürüm 3'te sadece HTML <b class="caret"></b> .dropdown-toggle çapa elementi kaldırmak gerekir:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

2 & alt Bootstrap

Sürüm 2 şapka kaldırmak için CSS içine biraz daha fazla fikir ihtiyacınız var ve :after pseudo elementi nasıl çalıştığına daha detaylı öneririm. Hedef anlamak için yolda başlamak ve twitter bootstrap örnekte okları kaldırmak için aşağıdaki CSS seçiciyi kullanın ve kodu:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Eğer daha fazla bu işe nasıl bakarsanız sizin lehinize çalışması ve sadece verdiğiniz cevaplar kullanmayın.

@Sayesinde ">" alt menüleri ana hover gösteriliyor önlemek için çocuk kombinatorik . eksik olduğumuzu işaret için CocaAkat

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • MagicofRahat

    MagicofRahat

    13 Temmuz 2007
  • Mega64

    Mega64

    24 ŞUBAT 2006
  • sWooZie

    sWooZie

    9 ŞUBAT 2006