Jquery Mobil Menü Yardım

Tahribat.com Forumları
line

Html - CSS - XML - JavaScript - Ajax
line

Jquery Mobil Menü Yardım

17/Eki/16 10:43 Kısayol Şikayet Özel Mesaj

Kentaki

Kayıt Tarihi: 17/Ekim/2016

Merhaba arkadaşlar, öncelikle aranıza yeni katıldığım için mutluyum herkese selamlar.

Phonegap + cordova ile mobil uygulama üzerinde çalışıyorum bir app yapıyorum. Bu app de kullanmak istediğim bir menü türü var ama bir türlü ne yapmayı becerebildim, ne de hazır adını bulabildim. İstemiş olduğum menü sağ üstte menüye tıklandığında main container'ı ufaltarak sola itecek birşey.

Kentaki tarafından 17/Eki/16 13:24 tarihinde düzenlenmiştir

What are you doing???

Alıntı yap
17/Eki/16 10:55 Kısayol Şikayet Özel Mesaj

camarade
ontedi

Kayıt Tarihi: 04/Eylül/2005

Hocam css + javascript bilgin var mı?

Biraz bilgin varsa yapabilirsin.

Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

Alıntı yap
17/Eki/16 11:12 Kısayol Şikayet Özel Mesaj

Kentaki

Kayıt Tarihi: 17/Ekim/2016

ontedi bunu yazdı

Hocam css + javascript bilgin var mı?

Biraz bilgin varsa yapabilirsin.

Evet var hocam uğraşıyorum sol'a transition olayında sıkıntım yok fakat aynı zamanda height hem %80 olması, hem ortalanması olayını beceremedim. Bilmiyorum anlatabildim mi.

What are you doing???

Alıntı yap

17/Eki/16 13:22

Kısayol

Şikayet

Özel Mesaj

Kentaki

Kayıt Tarihi: 17/Ekim/2016

Kendim hallettim. Lazım olan olursa;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $(".ustmenubuton").click(function(){
	   		this.id="kapat";
			$("#maincontainer").css("left", "-50%");
			$("#maincontainer").css("height", "80%");
			$("#maincontainer").css("top", "10%");
	});
});
</script>

<style>
#backmenu{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background: #900007; /* Old browsers */
	background: -moz-linear-gradient(top,  #900007 0%, #d4141c 43%, #d4141c 60%, #900007 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #900007 0%,#d4141c 43%,#d4141c 60%,#900007 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #900007 0%,#d4141c 43%,#d4141c 60%,#900007 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#900007', endColorstr='#900007',GradientType=0 ); /* IE6-9 */
}
.backmenuback{
	width:100%;
	height:100%;
	float:right;
	background-image:url(images/menuback.png);
	background-size:cover;
	background-position:top right;
	background-repeat:no-repeat;
}
#maincontainer{
	width:100%;
	height:100%;
	background-color:#FFF;
	position:absolute;
	top:0px;
	left:0px;
	transition:0.5s;
}
header{
	width:100%;
	height:55px;
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(images/ustmenu-repeat.png);
	background-repeat:repeat-x;
}
footer{
	width:100%;
	height:76px;
	position:absolute;
	bottom:0px;
	left:0px;
	background-image:url(images/altmenu-repeat.png);
}
.icerik{
	width:100%;
	height:90%;
	position:absolute;
	top:55px;
	overflow-y:auto;
}
.ustmenusol{
	width:124px;
	height:55px;
	background-image:url(images/ustmenu-sol.png);
	background-repeat:no-repeat;
	float:left;
}
.ustmenubuton{
	width:53px;
	height:55px;
	background-image:url(images/ustmenu-buton.png);
	background-repeat:no-repeat;
	float:right;
}
.ustmeubutonafter{
	width:136px;
	height:55px;
	background-image:url(images/ustmenu-butonafter.png);
	background-repeat:no-repeat;
	float:right;
}
</style>

<div id="backmenu">
<div class="backmenuback"></div>
</div>
<div id="maincontainer">
	<header>
    <div class="ustmenusol"></div>
    <div class="ustmenubuton"></div>
    <div class="ustmeubutonafter"></div>
    </header>
    <div class="icerik"></div>
    <footer></footer>
</div>

What are you doing???

Alıntı yap

Toplam Hit: 702 Toplam Mesaj: 4
mobil menü jquery menü

Cevapla