<ul id="ul" style="text-align: center;">
<li style="margin-left: 0px;" class=""><a href="/"></a></li>
<li id="li1" class=""><a href=""></a></li>
<li id="li2" class=""><a href=""></a></li>
<li id="li4" class=""><a href=""></a></li>
<li id="li5" class=""><a href=""></a></li>
<li id="li6" class=""><a href=""></a></li>
<li id="li7" class=""><a href=""></a></li>
<li id="li9" class=""><a href=""></a></li>
<li id="li8" class=""><a href=""></a></li>
</ul>
şeklinde yanya sıraladığım bir menü var .bunu telefonlar iiçin de uyumlu hale girmek istiyorum ekran küçüldükçe Görünmeyenleri en son kısımda tıklanınca alta doğru acılan şekilde Yapmak istiyorum. Nasıl yapabilirim. Umarım doğru anlata bilmişimdir.
Sadece menü kodlarını paylaşmak yetmez, tam olarak siteyi verirseniz daha iyi olur, eğer verme şansınız yoksa da şöyle yapabilirsiniz belki, ancak kodları görmediğim için garanti veremem.
@media (max-width: 1024px) {
/* Menu */
#ul {
display: none;
}
#ul li {
float: left;
display: block;
}
.menu-open {
width: 100%;
height: 30px;
text-align: center;
background-color: #111;
color: #fff;
cursor: pointer;
}
}
@media (min-width: 1025px) {
.menu-open {
display: none;
}
}Yukarıda ki CSS kodlarını CSS dosyanıza dahil edin, dahil etmeden önce dosyanızın yedeğini alın.
Ardından </head> tagından önce aşağıda ki kodları ekleyin.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
$(".menu-open").click(function(){
$(this).next('ul').toggle();
});
});
</script>eğer çalışmazsa yukarıda verdiğim ilk <script> satırını silin birde öğle deneyin, yine de olmazsa, sitenizi buradan paylaşmanız gerekecek.