Merhaba arkadaşlar,
FlarumTR uygulamasından esinlenerek yaptığım bottom navigation barı paylaşmak istiyorum.
Geliştirilebilir tabi ki :) Şuan için “soru sor” bölümü api kaynaklı olmadığı için document.selector ile butonu çekip tıklatıyoruz :) Dolayısıyla soru sor butonu sadece ana sayfa ve en yeni bölümlerinde çalışıyor. Bir de active butonu sayfa değiştiği için çok verimli çalışmıyor olabilir :)
Harici Footer kısmına yazılacaklar (sorhadi.net kısmını kendi sitenize göre değiştirirsiniz)
<div class="mobile-app-icon-bar" id="myDIV">
<button onclick="location.href='https://sorhadi.net'" class="buttonstyle"><i class="fa fa-home"></i>
<span class="spanstyle">Ana Sayfa</span></button>
<button onclick="location.href='https://sorhadi.net/?sort=newest'" class="buttonstyle"><i class="fas fa-hourglass"></i>
<span class="spanstyle">En yeni</span></button>
<button onclick="deneme()" class="buttonstyle"><i class="fas fa-plus-square"></i>
<span class="spanstyle">Soru Sor</span></button>
<button onclick="location.href='https://sorhadi.net/tags'" class="buttonstyle"><i class="fas fa-tags"></i>
<span class="spanstyle">Etiketler</span></button>
<button onclick="location.href='https://sorhadi.net/notifications'" class="buttonstyle"><i class="fas fa-bell"></i>
<span class="spanstyle">Bildirim</span></button>
</div>
<script>
var btnContainer = document.getElementById("myDIV");
var btns = btnContainer .getElementsByClassName("buttonstyle");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
<script>
function deneme() {
document.querySelector('.IndexPage-newDiscussion').click();
}
</script>
Harici CSS kodları :
@media(max-width: 500px) { .mobile-app-icon-bar{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
background: #fefefe;
position: fixed;
bottom: 0;
width: 100%;
height: 48px;
z-index: 2;
background: #0018ba;
border: 4px solid #0077b3;
} }
.buttonstyle.active{
color: #002998 !important;
}
.buttonstyle{
width:20%;
display: flex;
flex-direction: column;
align-items: center;
background: white !important;
border: none;
margin-top: 4px;
}
.spanstyle{
font-size: 10px;
margin-top: 5px;
}
.mobile-app-icon-bar button {
padding: 0.75rem !important;
cursor: pointer;
}
.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {
}
@media(min-width: 800px) { .mobile-app-icon-bar{
display:none !important;
} }
