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

[Djony1987]

Всем привет!

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


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

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

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

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

[Serg_pnz]

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

[Djony1987]

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

$("#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
Как решить её можно?

[Djony1987]

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

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

[Djony1987]

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

Меню не работает в 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>

Спасибо!