Выпадающее меню
пятница, 20 марта 2009 г.
Они также очень удобны при навигации по сайту/блогу, за счет чего очень востребованы =)
Сегодня мы будем делать выпадающие меню со списком ссылок для Блоггера (Пример такого меню Вы можете найти ) , которое при желании и некоторых усилиях можно полностью подогнать под дизайн своего блога!
Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:
</head>и сразу ПЕРЕД ним вставляем:
<!--MULTI-LEVEL-DD-MENU-STARTS-->
<link href='http://forum.wafl.ru/files/freeman/DDM1_style.css' rel='stylesheet' type='text/css'/>
<script src='http://forum.wafl.ru/files/freeman/DDM1_script.js' type='text/javascript'/>
<!--MULTI-LEVEL-DD-MENU-http://beliber-da.blogspot.com-->
теперь сохраняем шаблон и переходим в "Элементы страницы" и в том месте, где хотете видеть выпадающие меню добавляем гаджет вида "HTML/JavaScript", содержание которого вставляем следующий код:
<!--MULTI-LEVEL-DD-MENU-STARTS-->После чего заменить текст на свой а знаки "#" на соответствующие тексту ссылки, а также удалить ненужные строки или добавить новые ;)
<ul id="menu" class="menu">
<li><a href="#" class="menulink">Меню №Раз</a>
<ul>
<li><a href="#">Меню 1 - пункт 1</a></li>
<li><a href="#">Меню 1 - пункт 2</a></li>
<li><a href="#">Меню 1 - пункт 3</a></li>
<li><a href="#">Меню 1 - пункт 4</a></li>
<li><a href="#">Меню 1 - пункт 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Меню №Два</a>
<ul>
<li><a href="#">Меню 2 - пункт 1</a></li>
<li><a href="#">Меню 2 - пункт 2</a></li>
<li><a href="#">Меню 2 - пункт 3</a></li>
<li><a href="#">Меню 2 - пункт 4</a></li>
<li><a href="#">Меню 2 - пункт 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Меню №Три</a>
<ul>
<li><a href="#">Меню 3 - пункт 1</a></li>
<li><a href="#">Меню 3 - пункт 2</a></li>
<li><a href="#">Меню 3 - пункт 3</a></li>
<li><a href="#">Меню 3 - пункт 4</a></li>
<li><a href="#">Меню 3 - пункт 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Меню №Четыре</a>
<ul>
<li><a href="#">Меню 4 - пункт 1</a></li>
<li><a href="#">Меню 4 - пункт 2</a></li>
<li><a href="#">Меню 4 - пункт 3</a></li>
<li><a href="#">Меню 4 - пункт 4</a></li>
<li><a href="http://beliber-da.blogspot.com/">БелиберDA</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
<!--MULTI-LEVEL-DD-MENU-http://beliber-da.blogspot.com-->
19 коммент.:
-
привет, все прекрасно, но где же пример, разместил бы у себя структуре блога такое меню :Р
-
Я тоже хотела бы посмотреть пример такого меню.
Вы применили его у себя в блоге? -
Меню поставилось, но выпадающие списки не занимаются тем, для чего они созданы. То бишь не выпадают...
Т.е. банально висят несколько квадратиков вверху. -
странно, сейчас буду искать проблему.
Приношу свои извинения, проблема будет устранена в ближайшее время -
Код переписан.
Пробуйте ;) -
Теперь все здорово!
Спасибо :) -
У меня тоже получилось. Но сначала я поставила в боковой колонке, но выпадающие списки закрывались следующими окнами: из списка меню№1 всё было закрыть табличками со словами "меню2", "меню3"... Потом я переместила гаджет под самый заголовок страницы и там всё поместилось прекрасно. Принцип понятен: если захочу поставить в боковую колонку, просто разделю по гаджетам - для каждого выпадающего списка свой гаджет и своя тема. Спасибо за работу. А от чайника, как я ещё одно спасибо: вы один указали КАК найти слова в шаблоне. Я раньше не пыталась даже заглядывать в код шаблона - не умела найти нужные слова и удивлялась как другие находят. А вы дали Ctrl+F - эта подсказка меня вдохновила. Благодарю.
-
Виталий, вам спасибо, за информацию о неработоспособности меню.
БабочкаЯночка, рад, что у Вас все получилось ;) -
Интересная штука, в дальнейшем попробую...
-
Привет!
Почитав несколько статей хочу отметить: хорошо!!!
Все это конечно заслуживает внимания для использования.
Но! Вы упускаете один мааальенкий моментик, который в последствии может быть "камнем в ваш огород": это безопасность.
Почему Вы везде делаете ссылки на скрипты с других ресурсов? Это очень небезопасно, даже если эти ресурсы принадлежат Вам.
Как думаете понравится ли людям, если подменят эти скрипты на скрипты генерящие рекламные ссылки? (или это цель?)
Хоть приписку тогда делайте, что мол так и так - безопаснее сделать так-то... (да согласен, гемора больше...) -
Сейчас у блоггера появились новые шаблоны (например Picture Window), в них такое меню выпадает ПОД СООБЩЕНИЯ, остаются только пункты самого верхнего уровня. Не подскажете как побороть?
-
НЕ могу понять... Почему у меня не выпадает меню а всего лишь стоит списком...
-
набор качественных и нужных гаджетов для blogger с подробными инструкциями установки
http://all-blogger-widgets.blogspot.com/ -
подскажите почему окошки выпадают под фоновое изображения если находятся на верхней панели,если на боковой то все в порядке,но хочется сверху иметь такое меню
-
как изменить цвет меню??
-
Привет! абалдеть. Я полный профан в этих делах, а вот взялась сама за создание сайта. И Вы мне очень помогли!!! Спасибо Вам огромное!
Но маленький вопрос. Меню-то получилось беленькое, а мне бы нужно тёмненькое) Очень прошу, подскажите, как это сделать? Заранее спасибо! -
не получается(( все скопировала как у вас а выпадающего списка не получается - все в столбик выстраивается
-
Как сделать, чтоб выпадающее меню было поверх всех оеон, а не перекрывалось другими блоками и как изменить шрифт надписей?
-
В общем, меню получилось не выпадающим. Оно висит во всей своей красе со всеми своими пунктами огромным квадратом.
