Navbar Menüler Ekrana Sığmadıkça Diğer Menüler Dropdown Altında Toplanması

05/Kas/18 20:38

Kısayol

Şikayet

Özel Mesaj

coder2

Kayıt Tarihi: 15/Mart/2007

Merhaba arkadaşlar,

Dil:PHP Framework: LARAVEL CSS-Bootstrap 4.1.3 kullanıyorum. Jquery 3.3.1

Aşağıdaki kodlar navbarımda bulunan menülerin kodları. Navbar responsive olarak çalışıyor hiçbir sıkıntım yok. Yapmak istediğim şey menüler yanyana sıralanırken çok menü olacağı için ekrana sığmayacaktır. Ekran genişliğine sığmayacak olan menüler Diğer menüler dropdown içinde gorünsün.

Bunu css/js ile yapabilirsem front end kısımda yapmak istiyorum. Yok olmayacak işse back end kısında bir çozüm bulacağım veya diğer menüler adında bir category ekleyip o menüleri subMenü yapacağım. Fakat dediğim gibi front end kısımda halletmek istiyorum.

Ornek kod veren veya şunları ekle olur diyen olursa tadından yenmez. Anahtar kelime xxx derseniz basit birşeyse yaparım fakat css konusunda çok iyi değil, temel ile orta arasında biryerdeyim :)

    <div class="header-bottom-menu">
        <ul>
            <li><a href="#">Anasayfa</a></li>
            <li><a href="#">Menü</a></li>
            <li><a href="#">Mnü-2</a></li>
            <li class="zindex999"><a href="#">Dropdown link <i class="fas fa-caret-down"></i></a>
                <ul class="header-bottom-menu-dropdown">
                    <li><a href="#">Dropdown link 1</a></li>
                    <li><a href="#">Dropdown link 2</a></li>
                    <li><a href="#">Dropdown link 3</a></li>
                    <li><a href="#">Dropdown link 4</a></li>
                </ul>
            </li>
            <li><a href="#">Bir diğer menü</a></li>
            <li><a href="#">Sonraki Menü</a></li>
            <li><a href="#">Sonraki Menü</a></li>
            <li class="zindex999"><a href="#">Diğer Menüler <i class="fas fa-caret-down"></i></a>
                <ul class="header-bottom-menu-dropdown">
                    <li><a href="#">Diğer Menüler 1</a></li>
                    <li><a href="#">Diğer Menüler 2</a></li>
                    <li><a href="#">Diğer Menüler 3</a></li>
                    <li><a href="#">Diğer Menüler 4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Önceleri Kızlar Utanınca Kızarırdı Şimdilerde Kızarınca Utanıyorlar..

Alıntı yap

06/Kas/18 02:38

Kısayol

Şikayet

Özel Mesaj

wert

Kayıt Tarihi: 19/Eylül/2005

https://getbootstrap.com/docs/4.1/utilities/display/

işine yararmı bilmem

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item d-none d-md-block">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item d-none d-lg-block">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item d-none d-xl-block">
      <a class="nav-link" href="#">Link 3</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown d-block d-xl-none">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item d-block d-md-none" href="#">Link 1</a>
        <a class="dropdown-item d-block d-lg-none" href="#">Link 2</a>
        <a class="dropdown-item d-block d-xl-none" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>
</body>
</html>

|sadece aptalların başarısı ders notu ile ölçülür|

Alıntı yap

06/Kas/18 07:44

Kısayol

Şikayet

Özel Mesaj

coder2

Kayıt Tarihi: 15/Mart/2007

@wert çok teşekkür ederim, istediğim şey tam olarak buydu.

Önceleri Kızlar Utanınca Kızarırdı Şimdilerde Kızarınca Utanıyorlar..

Alıntı yap