Web Tasarım - Navbar

Merhabalar bir önceki konumuz butonlardı
konu linklerine aşağıdan ulaşabilirsiniz.

https://forum.ayyildiz.org/konu/web-tasarım-button-group.163598/#post-1151744
https://forum.ayyildiz.org/konu/1-giriş-seviyesi-web-tasarım.163521/sayfa-2#post-1151531

Navbar - Menüler

Menü oluşturacağız oluşturmadan önce bir kaç örnek tasarım göstermek istiyorum



Başlayalım..

Bizim projemizin en başında Ayyıldız Tim ve Web tasarım yazıyor bu yazıların üzerine bir menü oluşturacağız




Navbar kodlarımız en üstte ve body tagının hemen altına olacaktır.

Kod:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Navbar kodumuz bu eğer rengini değiştirmek isterseniz DARK değilde primary veya warning yazabilirsiniz



Şimdi düzenleyelim..




Şimdi sağ tarafataki "Navbar text with an inline element" yazısını silip bir tane buton ekleyeceğiz.

Kod:

 <button class="btn btn-light">Giriş yap</button>

Bir tane de arama kutusu ekleyebiliriz

Kod:

     <form class="form-inline my-2 my-sm-0">
        <input type="text" class="form-control" placeholder="Aramak için yaz..." aria-label="Username" aria-describedby="addon-wrapping">
&nbsp;
<button class="btn btn-warning btn-sm">Ara</button>
    </form>

Listelenebilir bir menü nasıl yapabiliriz?

Kod:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Kodumuzu menümüze ekliyoruz..




Konumuz bu kadar aklınıza takılanları sorabilirsiniz
Bir sonraki konumuz formlar olacaktır​

 

Ellerine sağlık devrem.

 

Ellerine sağlık devrem.

 

elinize, emeğinize sağlık. kolay gelsin diyor, iyi forumlar diliyorum. saygılar.

 

teşekkür ediyorum sağolun