HTML ve Jquery Slider Menü Yapımı – Açılır Kapanır Menü PHP

Html Kodlarımız Aşağıdaki Gibidir

<div>
	<div class="menu-list">
	<div id="close">X</div>
	<ul>
		<li class="menu-links" id ="about">About</li>
		<li class="menu-links" id ="photos">Photos</li>
		<li class="menu-links" id ="terms">Terms and Conditions</li>
		<li class="menu-links" id ="contact">Contact</a></li>

	</ul>
	</div>
	
	<div class="menu-link-target">
		<div id="expand-menu"><img src="menu.png" width="24px"/></div>
		<h4 id="about-content">About</h4>
		<p>It has survived...</p>
		<h4 id="photos-content">Photos</h4>
		<p>It is a long...</p>
		<h4 id="terms-content">Terms and Conditions</h4>
		<p>There are many variations...</p>
		<h4 id="contact-content">Contact</h4>
		<p>The standard chunk...</p>
	</div>
</div>


Style Dosyalarımızda Aşağıdaki Gibidir.
<script>
$("#expand-menu").on('click',function(){
    $(".menu-list").css( {"left": 0});
	$(".menu-link-target").css( {"left": 200});
	$("#expand-menu").hide();
});
$("#close").on('click',function(){
    $(".menu-list").css({"left": "-"+ $(".menu-list").width()});
	$(".menu-link-target").css( {"left": 0});
	$("#expand-menu").show();
});
$('.menu-links').click(function() { 
		var target = $(this).attr('id');
		$('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000);
});
</script>

Demo 

Bir Cevap Yazın