Responsevi Hale getirmek

03-10-2016, 21:22:23

ilker20601

Kimlik doğrulama veya yönetimden onay bekliyor.

<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.

10-10-2016, 15:20:54

#2

hacierdogan

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhabalar. tam olarak anlamadım ama şunu söylim. aşağıda vermiş olduğum sitenin menüsünü incelerseniz sizin için uygunsa yardımcı olabilirim.

www.beykozadak.com.tr

10-10-2016, 16:31:40

#3

Tonks

F. STACK WEB + MOBILE DEV

ilker20601 adlı üyeden alıntı: mesajı görüntüle

<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.