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



Гаджет "Выпадающее меню" на blogger позволяет сделать навигацию по сайту гораздо удобнее и сохранить место на главной странице.
Пример гаджета можно посмотреть на тестовом блоге

Установка гаджета "Выпадающее меню"
1.Дизайн-Изменить HTML
2.Находим строчку </head>с помощью комманды CTRL+F
3. Перед ней вставляем 

<!--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-->
4. Сохраняем шаблон
5.Дизайн-Элементы страницы-HTML/Javascript
6.Вставляем код
<!--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-->
в том месте, где вы хотите видеть выпадающее меню на blogger. 

36 коммент.:

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

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

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

"href='http://forum.wafl.ru/files/freeman/DDM1_style.css'" во второй строчке кода.
скопируйте ссылку и перейдите по ней.
там увидите css код.скопируйте его себе на компьютер и проведите нужные изменения.
потом перезалейте файл на хостинг и замените старую ссылку на новую.

Шейх комментирует...

а дальше что делать?тоесть как добавлять?

buxip@bk.ru комментирует...

Жаль только, что это меню не применить в blogger, так как на каждой новой создаваемой странице более одного поста не создать, в отличии от главной.

Graft XD комментирует...

У меня меню установилось, но вот что-то не выподает :(

Ася комментирует...
Этот комментарий был удален автором.
ЕвгенВеликий комментирует...

Все получилось)
http://new-rus.blogspot.com/

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

А скопировать код с Вашего сайта нельзя?

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

чего ж нельзя,можно!

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

"href='http://forum.wafl.ru/files/freeman/DDM1_style.css'" во второй строчке кода.
скопируйте ссылку и перейдите по ней.
там увидите css код.скопируйте его себе на компьютер и проведите нужные изменения.
потом перезалейте файл на хостинг и замените старую ссылку на новую


Если можно, расскажите поподробнее, я из "чайников", Меню получилось http://vebrabota.blogspot.com/, но хочется его поправить, чтобы все было красиво и функционально.

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

а я так и не поняла... у меня ничего не получается... где искать этот head? можно поподробнее рассказать!?

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

привет народ можете со мной связаться по скайпу не получается выпадающие окна сделать скайп tymon273

KissUn'ka комментирует...

Я тоже в шаге "5.Дизайн-Элементы страницы-HTML/Javascript" не могу найти Javascript........

KissUn'ka комментирует...

Получилось!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

KissUn'ka комментирует...
Этот комментарий был удален автором.
KissUn'ka комментирует...

"в том месте, где вы хотите видеть выпадающее меню на blogger."
Я хочу под шапкой, но не понимаю как? У меня где-то наверху получается((

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

А как вы удалили поиск на тестовом сайте???
Это не гаджет и потому незнаю как удалить!
А меню у меня странно ведет - очень быстро пропадает неуспеваю даже на пункт навести!
А увас оно очень плавно почему то - почему!!!!

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

Здравствуйте. Попробовала сделать меню. Если располагать внизу блога, то меню отлично работает, а вот если вверху блога, непосредственно под шапкой блога, то менюшка не раскрывается почему-то. Помогите, пожалуйста. Что нужно подправить?

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

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

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

круто, но как добавлять новости?

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

помогите плиз у меня тоже сбоку или внизу выпадает,а горизонтально вверху нет http://www.aziashopping.dn.ua/

JC-Barin комментирует...

Как сделать что бы шаблон отображал только главную страницу, не расстягивая сообщения "до бесконечности"? Кто знает?

JC-Barin комментирует...

Как сделать облако тегов? Пытался в данном месте где ярлыки только окошко в виде Flashplayer. Скачал и установил флеш, но изменений никаких, в чем подвох? Кто не будь проделывал подобную процедуру, как, что и где писать? Буду благодарен!

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

Здраствуйте, подскажите пожалуйста, как добавить стили к этому меню?

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

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

Александр Никитин комментирует...
Этот комментарий был удален автором.
Елена и Александр Никитины комментирует...

Здравствуйте, ваш уже не первый вариант пробую сделать менюшку, но выпадающие окна не видно под фоном почему-то. Посмотрте пожалуйста, может все проще, чем думается. www.oricoach.ru

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

Я перешел по ссылке во второй строке и увидел код, что делать дальше? Расскажите поподробнее. Заранее благодарен.

Инна Вация комментирует...

И скрипт и CSS удалили, залейте заного пожалуйста!

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

Не выпадает... Беда

Александр Тимошев комментирует...

При переходе по ссылке - пусто....
Могу дать код этого меню http://webpomosh.blogspot.ru/

God Koss комментирует...

http://homelessinussr.blogspot.ru/

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

http://studiob52.blogspot.fr/

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

Все ок http://www.spacser.com.ua

Дриженко Неля Петрівна комментирует...

Здравствуйте. Пишет Вам учитель, который создал свой блог, но при создании выпадающего меню за предложенным вариантом столкнулся с проблемой. На главной странице блога все меню видно в полном объеме. Далее создала страницу и из информационной панели страницы скопировала адрес ссылки и вставила, как описано «В этом коде добавляйте название Ваших пунктов меню, а вместо # вставляйте ссылки на необходимые страницы». Сохранив изменения, решила проверить, что же получилось. А получается то, что при открытии страницы, я попадаю не на страницу гостя (посетителя) блога, т.е. не туда, где указана информация для посетителя или файл и ссылка на
него, а на эту страницу в информационной панели, где может работать только блоггер. Где я допустила ошибку и как мне ее исправить? Помогите, пожалуйста. Спасибо.

Тата Загарей комментирует...

Нужно вставить этот код?

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