Bu konudaki kullanıcılar: 3 misafir, 1 mobil kullanıcı
1
Cevap
336
Tıklama
0
Öne Çıkarma
Farklı boyutlu ekranda NAVBAR

L lucius-132 Konu Sahibi
6 yıl (166 mesaj)
Merhaba. Hazır bir şablonu düzenleyerek oluşturduğumuz sitenin (bootstrap 3.3.5) navbar'ı (<ul class="nav nav-justified">) kodu ile oluşturulmuş. Ekran boyutunu küçültünce menüdekiler alt alta sıralanıyor çirkin bir görüntü oluşuyor. Ekran boyutu 768 pikselden küçük olduğunda collapse (Türkçe'de başka bir adı var mı bilmiyorum:)))) olmasını istiyorum. Nasıl yapabilirim?




L lucius-132 Konu Sahibi
6 yıl (166 mesaj)
kendi çözümüm şöyle oldu ama tam çözülmedi. HTML'ye iki tane navbar ekledim. Biri justified diğeri collapse olacak şekilde.
        <ul class="nav nav-justified buyuk-goster kucuk-gizle"> 
<li class="active"><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=index.html" data-href="index.html">Anasayfa</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=hakkimizda.html" data-href="hakkimizda.html">Hakkımızda</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=komisyonlar.html" data-href="komisyonlar.html">Komisyonlar</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=galeri.html" data-href="galeri.html">FotoGaleri</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=videolar.html" data-href="videolar.html">Videolar</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=iletisim.html" data-href="iletisim.html">İletişim</a></li>
</ul>

<nav role="navigation" class="navbar navbar-custom buyuk-gizle kucuk-goster">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=#" class="navbar-brand" data-href="#" class="navbar-brand">Başlık</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=index.html" data-href="index.html">Anasayfa</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=hakkimizda.html" data-href="hakkimizda.html">Hakkımızda</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=komisyonlar.html" data-href="komisyonlar.html">Komisyonlar</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=galeri.html" data-href="galeri.html">FotoGaleri</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=videolar.html" data-href="videolar.html">Videolar</a></li>
<li><a data-test="test" rel="nofollow" style="word-wrap: break-word;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&url=iletisim.html" data-href="iletisim.html">İletişim</a></li>
</ul>
</div>
</div>
</nav>



custom.css dosyasına da 4 tane class tanımladım.

 
.kucuk-goster{
display:block;
}

.kucuk-gizle{
display:none;
}

@media (min-width: 768px) {
.buyuk-goster{
display:block;
}
.buyuk-gizle{
display:none;
}
}



şimdi tam istediğim gibi oldu ama collapse olunca sağda çıkan düğme çalışmıyor. Nasıl düzeltilir? Aynı navbar kodu başka sayfada tek başına olunca çalışıyor.



DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.