Выпадающее меню

пятница, 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 коммент.:

Holodkov комментирует...

привет, все прекрасно, но где же пример, разместил бы у себя структуре блога такое меню :Р

prokofevna комментирует...

Я тоже хотела бы посмотреть пример такого меню.
Вы применили его у себя в блоге?

Виталий Горовой комментирует...

Меню поставилось, но выпадающие списки не занимаются тем, для чего они созданы. То бишь не выпадают...
Т.е. банально висят несколько квадратиков вверху.

DA комментирует...

странно, сейчас буду искать проблему.
Приношу свои извинения, проблема будет устранена в ближайшее время

DA комментирует...

Код переписан.
Пробуйте ;)

Виталий Горовой комментирует...

Теперь все здорово!
Спасибо :)

БабочкаЯночка комментирует...

У меня тоже получилось. Но сначала я поставила в боковой колонке, но выпадающие списки закрывались следующими окнами: из списка меню№1 всё было закрыть табличками со словами "меню2", "меню3"... Потом я переместила гаджет под самый заголовок страницы и там всё поместилось прекрасно. Принцип понятен: если захочу поставить в боковую колонку, просто разделю по гаджетам - для каждого выпадающего списка свой гаджет и своя тема. Спасибо за работу. А от чайника, как я ещё одно спасибо: вы один указали КАК найти слова в шаблоне. Я раньше не пыталась даже заглядывать в код шаблона - не умела найти нужные слова и удивлялась как другие находят. А вы дали Ctrl+F - эта подсказка меня вдохновила. Благодарю.

DA комментирует...

Виталий, вам спасибо, за информацию о неработоспособности меню.

БабочкаЯночка, рад, что у Вас все получилось ;)

Вячеслав комментирует...

Интересная штука, в дальнейшем попробую...

FireWolf комментирует...

Привет!
Почитав несколько статей хочу отметить: хорошо!!!
Все это конечно заслуживает внимания для использования.
Но! Вы упускаете один мааальенкий моментик, который в последствии может быть "камнем в ваш огород": это безопасность.
Почему Вы везде делаете ссылки на скрипты с других ресурсов? Это очень небезопасно, даже если эти ресурсы принадлежат Вам.
Как думаете понравится ли людям, если подменят эти скрипты на скрипты генерящие рекламные ссылки? (или это цель?)
Хоть приписку тогда делайте, что мол так и так - безопаснее сделать так-то... (да согласен, гемора больше...)

Афанасьев А.А. комментирует...

Сейчас у блоггера появились новые шаблоны (например Picture Window), в них такое меню выпадает ПОД СООБЩЕНИЯ, остаются только пункты самого верхнего уровня. Не подскажете как побороть?

Ильнар Мухаметзянов комментирует...

НЕ могу понять... Почему у меня не выпадает меню а всего лишь стоит списком...

lina комментирует...

набор качественных и нужных гаджетов для blogger с подробными инструкциями установки
http://all-blogger-widgets.blogspot.com/

Dmitriy Schuka комментирует...

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

RomaN комментирует...

как изменить цвет меню??

Алеся комментирует...

Привет! абалдеть. Я полный профан в этих делах, а вот взялась сама за создание сайта. И Вы мне очень помогли!!! Спасибо Вам огромное!
Но маленький вопрос. Меню-то получилось беленькое, а мне бы нужно тёмненькое) Очень прошу, подскажите, как это сделать? Заранее спасибо!

Рубцова Дарья комментирует...

не получается(( все скопировала как у вас а выпадающего списка не получается - все в столбик выстраивается

Иван Задротов комментирует...

Как сделать, чтоб выпадающее меню было поверх всех оеон, а не перекрывалось другими блоками и как изменить шрифт надписей?

Елена комментирует...

В общем, меню получилось не выпадающим. Оно висит во всей своей красе со всеми своими пунктами огромным квадратом.

Отправить комментарий