Интересное меню для сайта в стиле аккордеона

Сегодня в уроке речь пойдет о создании красивого меню для Вашего сайта.

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

demosourse

Все ссылки, которые должны находиться в меню необходимо оформить следующим образом:

<ul id="menu">
<li>
<a href="#">Weblog Tools</a>
<ul>
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li>
<a href="#">Cool Stuff</a>
<ul>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li>
<a href="#">Search Engines</a>
<ul>
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>

Как Вы видите здесь ссылки разбиты по разделам (т.е. сначала идет общий раздел - при нажатии на него выпадают ссылки именно из этого раздела). Также нам обязательно необходимо вставить следующий фрагмент кода между тегами <head></head>:

	<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu-collapsed.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

В этом коде мы подключаем jQuery, функцию меню и таблицу стилей (в ней, по желанию, можно легко изменить внешний вид такого меню).

В данном примере мы создали меню в котором при нажатии на общий раздел выпадают ссылки именно из этого раздела. Для того, чтоб они исчезли, необходимо заново нажать на общий раздел. Иногда это может быть очень неудобно. И именно для этой ситуации в архиве с исходниками находится также файл menu.js. Если Вы его используете вместо файла menu-collapsed.js в коде сверху, тогда при нажатии на другой общий раздел меню, текущий раздел будет автоматически сворачиваться (демо версия такого меню находится здесь).

Спасибо за внимание! Всего наилучшего всем!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.i-marco.nl
Перевел: Максим Шкурупий
Урок создан: 16 Мая 2009
Просмотров: 106973
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 17 Мая 2009 10:11
    Святослав
    А можно ли на jquery сделать так чтоб выводилась в диве например какая та часть текста, а внизу ссылка читать дальше и по нажатию на нее разворачивался полный текст, и появлялась ссылка свернуть...?
  • 17 Мая 2009 10:25
    Игорь
    Вот это хорошая вещиться !!!
  • 17 Мая 2009 15:19
    ABCD
    Евгений, новый RUSELLER - супер! 181 ошибка [validator.w3.org] Проверьте через него мой aquadc.6te.net - 0 ошибок!
  • 17 Мая 2009 16:04
    МаксимШкурупий
    ABCD, это к уроку не имеет никакого отношения.
  • 17 Мая 2009 16:59
    Олег
    ABCD, чем ты хвастаешся: фон, картинка и три ссылки ?
  • 17 Мая 2009 17:02
    Олег
    K черту ошибки ! RUSELLER класный сайт, побольше таких !
  • 17 Мая 2009 17:12
    doctor
    меню прикольное. только мне вот интересно, что будет с тем контентом, который может быть ниже меню, когда меню будет раздвигаться!?
    • 1 Февраля 2012 04:17
      n1ko
      Вниз сдвигаться будет
  • 17 Мая 2009 17:17
    doctor
    Спецы, помогите, пожалуйста. Вопрос не совсем по теме, но рядом! У меня возникла проблемма с совмещением скриптов на одной странице. т.е. если я ставлю на страницу 2 скрипта, то работает только один, в зависимости от того в какой последовательности они расположены. Как правильно распологать скрипты на страницах, что бы они не конфликтовали друг с другом?
  • 17 Мая 2009 17:31
    Святослав
    doctor, а названия или переменные с которыми они работают, формируют случайно одинаковые названия не имеют?
  • 17 Мая 2009 18:01
    dima
    doctor, построй выполнение скрипта через параметры, передаваемые в адресной строке, т.е. if($_GET['par']=='параметр1') {выполняем 1 скрипт} if($_GET['par']=='параметр2') {выполняем 2 скрипт} и так далее. можно через switch($_GET['par']).. короче как угодно. И соответственно ссылки для запуска того или иного скрипта формируй динамически, т.е. ?par=параметр1, ?par=параметр2 Если непонятно или есть вопросы пеши мне в асю363484556 или заходите на мой сайт =)
  • 17 Мая 2009 18:10
    dima
    если передаешь несколько параметров, то соответственно: ?par1=значение1&par2=значение2 и так далее...
  • 17 Мая 2009 19:05
    Виталий
    Класс! То что нужно!
  • 18 Мая 2009 20:23
    doctor
    Святослав, скорее всего да. Я пытаюсь на одной странице одновременно использовать mootools.js и jquery.js и они конфликтуют, работает или один или другой, в зависимоти от расположения на странице, а вместе не хотят. Как определить используют ли они одинаковые переменные или нет и возможно ли это реально исправить? или их вообще нельзя заставить работать вместе в таком случае? помогите пожалуйста...
  • 19 Мая 2009 22:09
    NDreY
    Здравствуйте, может кто-нибудь подскажет можно ли использовать несколько jQuery скриптов на одной странице? Я попробовал вставить скрипт на уфеличение фото и скрипт на эфект затухания изображения, и у меня не работает один из них в зависимость от их положения выше-ниже. Может кто знает помогите очень надо?
  • 21 Мая 2009 22:27
    tiredman
    если страницу обновить то состояние меню возвращается к первоначальному, можно как-нибудь это обойти?
  • 29 Мая 2009 14:33
    lizaveta
    Класс!!!!!!!!Я такое меню уже давно искала!!!!!!!!!Большое спасибо создателю!!!!!!
  • 9 Июня 2009 14:01
    Андрей
    вопрос, а как сделать в этом меню чтобы при переходе на другую страницу, меню оставляла развернутый список тот из которого перешли на страницу. Сейчас при переходе на страничку меню разворачивает первый список! Или если использовать menu-collapsed.js то все сворачивает.
  • 18 Июня 2009 00:09
    evil_adge
    Помогите люди добрые! Как заставить IE6 Воспринимать это меню так , как это должно быть? Cуть в том,что IE6 делает расстояние (около 30px) между ячейками всей навигации!!! Уже все перепробовал! Одна надежда на вас! Менюшку менять не хочу, ибо очень подходит по дизайну !!! Заранее Спасибо.
  • 19 Июня 2009 23:08
    osix
    Подскажите пожалуйста, как сделать меню немного уже, а то у меня сайт скосило чутка. Заранее спасибо!
  • 26 Июня 2009 11:45
    lizaveta
    А у меня при загрузке сразу появляется и меню, и то меню которое выпадает. Как сделать, чтоб при загрузке не было этого выпадения? Подскажите, пожайлуста
  • 31 Июля 2009 17:55
    Erema
    в ie6 и 7 меню выглядие огромнейшим
  • 11 Августа 2009 17:47
    Erema
    кому мешает большое растояние между пунктами в ie6 можно заменить ul#menu li { margin-top:1px; } на ul#menu li { margin-top:1px; -margin-bottom:-15px; } и все заработает, только что проверил
  • 31 Августа 2009 13:14
    aleksandr
    Здравствуйте а как зделать так чтобы первый пункт меню был свернут а как переход!!?
  • 31 Августа 2009 13:15
    aleksandr
    тоесть а остальные были как переход
  • 26 Сентября 2009 10:46
    armaged
    На опере меню ростягуетца до онца страници
  • 29 Сентября 2009 12:43
    Сергей
    "Помогите люди добрые! Как заставить IE6 Воспринимать это меню так , как это должно быть? Cуть в том,что IE6 делает расстояние (около 30px) между ячейками всей навигации!!! Уже все перепробовал! Одна надежда на вас! Менюшку менять не хочу, ибо очень подходит по дизайну !!! Заранее Спасибо." Да похоже ничего нельзя сделать, тоже перепробовал кучу вариантов.
  • 12 Ноября 2009 15:20
    Oleg
    А так пробовали? ul#menu li { line-height:1.2em; }
  • 27 Декабря 2009 15:38
    Qizz
    Как можно увеличить длину колонки??
  • 14 Января 2010 10:37
    Andrey
    Кто-нибудь знает как сделать, чтобы при обновлении гармошка не "скидывалась" в первоначальное состояние? а так бы и оставалось раскрытой например на третьей вкладке ?
  • 14 Января 2010 13:29
    Andrey
    все разобрался, нужен просто jquery.cookie.js
  • 20 Января 2010 23:58
    master_n
    а где взять этот jquery.cookie.js?
  • 21 Января 2010 00:00
    master_n
    а как сделать так что бы при переходе на новую строницу меню оставалась открытым?
  • 27 Января 2010 17:22
    durogon
    У меня почему-то IE8 тупит с колонками, где название занимает несколько строчек, подскажите в чем проблема?
  • 23 Марта 2010 11:03
    vanjan
    Меню действительно интересное, только не могу его прикрепить к Joomla а в частности как дерево каталога ВыртуМарт, имхо было бы очень удобно.
  • 24 Марта 2010 18:06
    Reneile
    Друзья, кто-нибудь смог реализовать данное меню на Joomla? Основной вопрос в том, как заставить работать библиотеку, ибо стиль\отображение то настраивается элементарно, а вот функционал библиотеки сделать не могу. подскажите пожалуйста. Просто надоело постоянно видеть, как страница при активации меню обновляется.. Спасибо заранее.
  • 24 Марта 2010 23:40
    Reneile
    Проблема решена. Спасибо большое. Если что - пишите в асю. 4968412шестьшесть
  • 15 Апреля 2010 23:09
    Nickol
    Присоединяюсь к просьбам по поводу jquery.cookie.js! Пожалуйста, объясните, как, где у куда его использовать, чтобы эффект раскрытого меню оставался при переходе на другую вкладку. И где го взять? Совсем чайник. Сделала практически все и этот момент огорчает, что не знаю, как завершить.
  • 16 Апреля 2010 14:56
    НеформатноеРадио
    Меню остаётся раскрытым ))) Как его захлопнуть ??? Сразу же при загрузке страницы все вложенные пункты остаются раскрытыми
  • 20 Мая 2010 17:49
    orsy
    нашел вот статейку, немного подучу jquery и можно будет сделать запоминание положения меню. h t t p://в в в.linkexchanger.su/2008/42.html
  • 2 Июня 2010 21:40
    Светлана
    Меню отличное! Спасибо огромное! НО!!! Люди добрые, умоляю, помогите разобраться с работой jquery.cookie.js. Где брать? Нужно ли править код? Как подключать этот скрипт чтоб все правильно работало? Без него это меню теряет смысл! Очень, очень прошу помощи!
  • 14 Июня 2010 13:37
    salavat
    Здравствуйте. Кто может подсказать куда нужно прописать кук что бы сохранялось состояние таблицы?
  • 25 Июня 2010 01:27
    HOG_Seruj
    Подскажите Пожалуйста, а как сделать вывод меню из БД?
  • 30 Июня 2010 14:59
    lilibyyy
    Огромное спасибо создателю урока!!! Вы прям спасли меня!!!! ))
  • 2 Января 2011 14:35
    StronGX
    А как все таки реализовывается cookie? Еще не могу разобраться, почему при нажатии на раскрывающийся список, перебрасывает в верх страницы! Тоже как-то связанно с куки?
  • 17 Января 2011 17:05
    xpaco
    Я Вас люблю :)
  • 29 Марта 2011 06:40
    kazeuweb
    Подскажите пожалуйста! А как это красивое меню прикрутить к Drupal?
  • 12 Апреля 2011 15:09
    maxstels
    Друзья! Помогите пожалуйста, при переходе по пунктам меню, у меня совсем сбрасывается весь дизайн. Оформление не работает. Может кто-нибудь помочь?Приложу скриншоты, если кто-то откликнется на зов помощи
  • 21 Июня 2011 18:25
    Иоланта
    !!!!Здорово!!!!
  • 27 Июня 2011 10:34
    TommyDBrown
    Поставил это меню) смотрится хорошо, а может мне кто-нибудь объяснить, как сделать, чтобы после открытия к примеру подраздела PivotX и перехода на новую страницу, меню аккардеон не закрывалось, а оставалось также открытым?
  • 11 Августа 2011 17:05
    sonart
    Меню просто супер! Отлично подогнала под Joomla. Только вот такой вопрос... можно ли сделать так, чтобы подменю открывалось при наведении курсора на родительский пункт? Я в JS вообще просто 0 =(
    • 12 Августа 2011 17:28
      fabrigas201
      а чё нормально всё только в 8 IE псевдоклас тормозит при наведении мыши на меню в течении секунд 30-50 начинает подсвечиваться а также выдвигаться а на IE6 можно и заглушку ставить всё равно им мало народу пользуется а пока с настройкой провозишься целый день пройдет <!--[if lte IE 6]><style type="text/css" media="screen">/* <![CDATA[ */ @import url(/css/al/ie6.css?19); /* ]]> */</style><![endif]--> <!--[if IE 7]><style type="text/css" media="screen">/* <![CDATA[ */ @import url(/css/al/ie7.css?13); /* ]]> */</style><![endif]--> <meta http-equiv="X-UA-Compatible" content="IE=9" /> решают некоторые проблемы с браузерами IE 6 -7 а с восьмым незнаю как разобраться!!!
  • 20 Сентября 2011 12:23
    Delirium4444
    Большое спасибо за прекрасную статью, это именно то, что нужно. Только в моей задаче есть еще один пункт, рядом с аккордеоном должна быть кнопка, по которой развернулись бы все пункты меню (т.е. все меню можно посмотреть полностью в развернутом виде). Скажите, это вообще реально сделать?
  • 6 Октября 2011 19:32
    stepfinans
    не понял люди,куда что нужно вставлять! Первый HTML код - это куда вставлять, куда кидать файлы из исходников?
  • 7 Октября 2011 00:19
    shoostr
    Недоработаный скрипт, он должен запоминать своё состояние после перехода на другую страницу. Я весь день делал дизайн сайта, и в конце облом. Что же делать с куками?
  • 28 Апреля 2012 07:51
    agent176
    Здравствуйте, подскажите пожалуйста как организовать структуру сайта, что бы по нажатию на определенный пункт меню менялась правая часть страницы без перезагрузке страницы и меню не сворачивалось в исходное состояние. Заранее спасибо очень нужно!!!
  • 9 Сентября 2012 00:18
    birt.asu
    Как изменить цвет каждой категории???
    • 9 Января 2013 03:24
      alexnegniy
      берешь и в css меняешь код и все =)
  • 20 Февраля 2013 21:49
    batman_wlad
    Добрый день! Смотрите, так как в ссылках пунктов главных стоит "#", то при каждом нажатии пункта страницу скидывает до самого верха. Можете подсказать, как это обойти?
  • 23 Февраля 2013 08:49
    Agilardo
    Доброго времени суток! Очень нужен совет понимающих людей: У меня сайт использует html,php,xml очень нужно прикрутить эту менюшку Вот часть кода: ...Не хочет добавлять код в сообщение... "Строка содержит участок из многократно повторяющихся символов" Как мне показать код?! Собственно вопрос: Как правильно проставить теги? Сколько не мудрил-Никак! ОЧЕНЬ буду благодарен за ответ! Заранее Спасибо!!!
  • 8 Июля 2013 15:24
    golfstrimvbg
    1.подскажите как поменять цвет меню на бледно-голубой? 2.как поменять стиль шрифта в меню?
    • 30 Августа 2013 13:45
      querido2208
      golfstrimvbg
      1.подскажите как поменять цвет меню на бледно-голубой? 2.как поменять стиль шрифта в меню?
      Вы бы прежде чем менюшки пилить на сайт, почитали бы основы html и css. Есть хороший сайт htmlbook называется, там все разжевано и разложено по полочкам. А то вы тут "как поменять цвет, размер, шрифт и т.д." всю тему убили непосредственно по работе и багов меню ....
  • 18 Сентября 2013 15:55
    vados730
    Доброго времени суток! Помогите сделать многоуровневое меню акордеон за умереную плату. моя почта: vados730@gmail.com.
^ Наверх ^