Съезжающее вниз подменю
 

Всем привет!

Хотелось бы сделалть меню на jQuery, чтобы при нажатии на кнопку основного меню снизу съезжало подменю, смещая контент вниз...


Посоветуйте как лучше это сделать...в хэдере небольшое место оставить и потом его заполнять подменю или сделать блок между хэдером и контентом и потом изменять его высоту от 0 до некоторого значения...

Как лучше хранить элементы подменю для каждого элемента основно меню...

Если есть подобный тип меню буду рад за ссылку на источник...

Заранее спасибо!

Тут посмотрите http://www.ajaxrain.com/tag?tag=menu

Вот как я сделал:

$("#mainmenu a").click(function()
    {
        var id = this.id;
        if($("#submenu > div :visible"))
        {
        $("#submenu > div :visible").css({"height" : "0px"});
        $("#submenu > div :visible").hide();
        $("div.panel" + id).show().animate({"height" : "30px"}, 300);
        }
        else
        {
        $("div.panel" + id).show().animate({"height" : "30px"}, 300);
        }
    });

<div class="panel1" style="display: none; height: 0px;">
   <ul>
      <li><a href="#" id="1">Item 1</a></li>
      <li><a href="#" id="2">Item 2</a></li>
      
   </ul>
</div>

Вот такая проблема возникает...
http://www.youtube.com/watch?v=hgELZCvfdio
Как решить её можно?

Спасибо! Но подходящего не нашел...

Подскажите плис по меню...уже незнаю что и делать(

Меню не работает в IE...

$(".panel1").css({"display" : "block"});
        $("#mainmenu a").click(function()
	{
		var id = this.id;
		if($("#submenu > div").css({"display" : "none"}))
		{
		$("div.panel" + id).css({"display" : "auto"}).slideDown(400);
		}
		else
	       {
		$("#submenu > div :visible").slideUp("slow").css({"display" : "none"});
		}
});

HTML:

<div id="mainmenu">
		<ul>
			<li class="f1"><a href="#" id="1">&#187&#32Item1</a></li>
			<li class="f2"><a href="#" id="2">&#187&#32Item2</a></li>
			.....	
		</ul>
	</div>

<div id="submenu">
<div class="panel1" style="display: none; height: 0;">
	<ul>
		<li><a href="#" id="1">&#187&#32Subitem1</a></li>
		<li><a href="#" id="2">&#187&#32Subitem2</a></li>
		....
	</ul>
</div>
<div class="panel2" style="display: none; height: 0;">
	<ul>
		<li><a href="#" id="1">&#187&#32Subitem6</a></li>
		<li><a href="#" id="2">&#187&#32Subitem7</a></li>

Спасибо!