Jquery ile Açılır Kapanır Menü veya Yazı

Menü Butonları

<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>



Menüyü açılır yapmak için gereken jquery açma kodu

$('.collapse').click(function(){
$(".collapse").hide();
$("li").last().hide("slow", function fnCollapse() {
$(this).prev("li").hide("slow", fnCollapse);
if(!$(this).prev("li").length)
	$(".expand").show();
});
});

Menüyü Kapatmak için Gerekli Jquery Kodları

$(".expand").hide();
$('.expand').click(function(){
$(".expand").hide();
$("li").first().show('slow',function fnExpand() {
$(this).next("li").show("slow", fnExpand);
if(!$(this).next("li").length)
$(".collapse").show();
});
}); 


 

HTML Kodlarıda Aşağıdaki gibi olacaktır.



<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.showhide.js"></script>
</head>
<body>
<table width="500px" cellpadding="10" cellspacing="10" border="0" class="tblShowHide">
<tr>
<td valign="top">
<div>
<span>Programmes</span>
<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>
</div> 
<ul>
<li>News</li>
<li>Knowledge</li>
<li>Religion</li>
<li>Entertainment</li>
<li>Movies</li>
<li>Music</li>
<li>Comedy</li>
</ul>
</td>
</tr>
</table>
</body>
</html>


Gerekli tüm dosyaları Bu Linkten İndirebilirsiniz.

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