2009-10-20 3 views
5

Я пытаюсь создать меню, которое имеет статическую высоту, и содержимое отображается между заголовками. (См. Ниже изображение. ... правая сторона - вид после того, как пользователь нажимает на заголовок 2)Что называется этим стилем меню?

Что называется этим стилем меню? Как я могу выполнить это с помощью jQuery?

accordion menu http://i37.tinypic.com/25ztrsx.png

Edit: Спасибо! Я искал аккордеон, прежде чем спрашивать, но мне не удалось найти примеры, когда высота меню остается неподвижной независимо от содержимого.

Edit 2: Это поведение, я искал: Vertical concertina menu Благодаря @ricebowl для обеспечения связи.

+0

Это стоит отметить, я думаю, что вы можете достичь этого макета с помощью только XHTML и CSS, нет * необходимости * (если вы не хотите) используйте jQuery или JS. См. Мой ответ ниже. –

+0

Конечно, но обычно клиенты требуют сегодня и хотят довольно мало эффектов и анимации, я не думаю, что супер минималистский html/css сократит его для некоторых клиентов. –

+0

@meder, вы абсолютно правы; но для тех, кто хочет жить с основами, это хороший ресурс. Но мне нравится работать с базой и * улучшать * с помощью JS/jQuery. Таким образом, он по-прежнему выглядит хорошо - без базового. =) –

ответ

5

Я уверен, что вы знаете, сейчас, что это стиль меню аккордеон, я просто предлагаю -если вы поддающийся к не -jQuery option- вы посещаете сайт Stu Nicholl's css-play, где он имеет чистый xhtml/css version этот стиль меню аккордеона.

+0

Вау, это на самом деле довольно круто для того, чтобы не использовать одну строку скрипта! – gn22

+0

Спасибо за ссылку! Я нашел именно то, что хотел. – Nescio

+1

@ Gurdas, я нашел сайт Stu Nicholl незаменимым на протяжении многих лет для изучения новых вещей и решения проблем CSS. Его css-игры, однако, являются * чистыми * удивительными: http://www.cssplay.co.uk/menu/(под заголовком «Пазлы») =) –

0

Это название как Аккордеонное меню Пользовательский интерфейс. Существует довольно много реализаций плагина jQuery, включая этот: jQuery Accordion.

Более подробную информацию и некоторые хорошие примеры здесь:

http://ui-patterns.com/pattern/AccordionMenu

Смежные вопросы