1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Web Tasarım - Navbar

'Html - CSS - XML - JavaScript - Ajax' forumunda Lesyoner tarafından 30 Ekim 2020 tarihinde açılan konu

  1. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,871
    Meslek:
    Öğrenci.

    Özel Mesaj
    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

    [​IMG]

    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

    [​IMG]


    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

    [​IMG]

    Şimdi düzenleyelim..

    [​IMG]
    [​IMG]

    Ş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>
    [​IMG]

    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>
    [​IMG]

    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..
    [​IMG]

    [​IMG]

    Konumuz bu kadar aklınıza takılanları sorabilirsiniz
    Bir sonraki konumuz formlar olacaktır​
     
    Selvi5885, iEsat, Y-A ve 4 kişi daha bunu beğendi.
  2. 8ur4kk05e Guest

    • Guest
    Katılım:
    1 Mayıs 2020
    Mesaj:
    716
    Alınan Beğeniler:
    1,147

    Özel Mesaj
    Ellerine sağlık devrem.
     
    Orion-Pax ve Lesyoner bunu beğendi.
  3. GhostFace58 Guest

    • Guest
    Katılım:
    13 Eylül 2020
    Mesaj:
    565
    Alınan Beğeniler:
    893

    Özel Mesaj
    Ellerine sağlık devrem.
     
    Orion-Pax ve Lesyoner bunu beğendi.
  4. Orion-Pax Guest

    • Guest
    Katılım:
    10 Mayıs 2018
    Mesaj:
    1,957
    Alınan Beğeniler:
    5,812
    Meslek:
    Sosyal Medya Uzmanı

    Özel Mesaj
    elinize, emeğinize sağlık. kolay gelsin diyor, iyi forumlar diliyorum. saygılar.
     
    Lesyoner ve xed bunu beğendi.
  5. Lesyoner Atıldı

    • Guest
    Katılım:
    29 Ocak 2016
    Mesaj:
    4,585
    Alınan Beğeniler:
    6,871
    Meslek:
    Öğrenci.

    Özel Mesaj
    teşekkür ediyorum sağolun
     
    Orion-Pax bunu beğendi.

Bu Sayfayı Paylaş