Menüyü Açılır kapanır yapma

Merhaba arkadaşlar, benim sitede bir menü var, ben bu menüye buton eklemek istiyorum, ziyaretçiler bastığında menü yukarıya giderek kapanacak, tekrar bastıklarında açılacak. (sayfa değişince kapalı ise kapalı açık ise açık kalacak) nasıl yapabilirim ?

jQuery ile yapabilirsin.

Menü'yü display: none ile görünmez yaparsın, eklediğin butona tıklandığında jQuery fonsiyonu çalışır ve menü görünür hale gelir.

Örnek Buton kodu;

<div id="MenuIcon" onclick="MenuGoster();">
                    <img src="menu_icon.png" width="45" height="45" alt="Menü Buton">
                </div>

jQuery fonksiyonu;

function MenuGoster(){
	  $("#Menu").slideToggle("fast"); // menu gorunur veya gorunmez olur  
}

slideToggle() ile menü görünür ise görünmez olur, tersi ise görünür olur.

css ile :hover özelliğini kullanarak javascript kullanmadan da yapılabilir.

ör :
CSS :

.menu { position: relative; font-family: Arial; }
.menu .icon { text-align: center; height: 30px; width: 30px; line-height: 30px; background: #F1F1F1; border: 1px solid #DDD; box-sizing: border-box; font-size: 20px; text-shadow: 0px 1px #FFF; }
.menu .sub { display: none; width: 120px; position: absolute; top: 29px; border: 1px solid #DDD; padding: 10px; line-height: 25px; font-size: 11px; }
.menu .sub a { display: block; border-bottom: 1px dashed #EEE; text-decoration: none; }
.menu .sub a:last-child { border-bottom: 0px; }
.menu:hover .sub { display: block; }

HTML :

<div class="menu">
	<div class="icon">#</div>
	<div class="sub">
		<a href="">Submenu 1</a>
		<a href="">Submenu 2</a>
		<a href="">Submenu 3</a>
		<a href="">Submenu 4</a>
	</div>
</div>