Выпадающее Меню
#1
Отправлено 27 Сентябрь 2012 - 10:46
Этот вопрос уже задавался и обсуждался на форуме и, насколько я понимаю, в различных вариациях - неоднократно.
Но к сожалению мои попытки реализовать предложенные в разных ветках методы и способы, увы, ни к чему не привели.
Задача состоит в следующем:
Необходимо в имеющемся главном меню сайта отдельные его пункты сделать выпадающими, т.е. чтобы при наведении (или нажатии) на них мышью раскрывался список из нескольких новых подпунктов меню.
Т.е. нужно, к примеру, сделать что-то вроде этого:
->
Пример: http://otdyh-i-son.ru/
После того, как я сделал всё, как описано здесь, на сайте вообще не произошло абсолютно никаких изменений, а после следования этим рекомендациям главное меню полностью заменялось новым, состоящим из 3-х пунктов, которые, при этом не содержали никакого выпадающего списка. Вот так:
Уважаемые админы и модераторы, просьба не отсылать на аналогичные темы форума (вроде этой http://forum.storela..._2072#entry2072), поскольку изложенные в них шаги также не привели к результату; я не являюсь опытным пользователем и возможно что-то упускаю из виду. Предполагаю, что приведенные в вышеуказанных темах способы создания выпадающего меню описаны не полностью, а в расчёте на продвинутого пользователя и возможно "за кадром" остались еще какие-то манипуляции, которые необходимо произвести. В связи с этим обращаюсь с просьбой дать пошаговую инструкцию того какие кокретно html (или иные) коды и в какие шаблоны (и места в шаблонах) необходимо вставить, чтобы решить эту задачу.
Спасибо.
#2
Отправлено 27 Сентябрь 2012 - 12:39
Описывает подробно что у куда необходимо вставлять. Вероятно вы упускаете что-то из виду. Могу только предложить вам прочитать тему внимательнее. Мне кажется что вы забыли создать необходимые дополнительные меню в разделе Сайт -> Меню. Проверьте это. Расписать как-то еще подробнее не получиться, так как и так все подробно расписано - необходимо только следовать инструкции, и внимательно вставлять предложенный код.
Вам необходимо сообщить адрес вашего магазина - где вы пытаетесь использовать данный код. Это может оказаться полезным, для понимания происходящего. Так же приведите код из вашего шаблона "HTML" по вставке меню.
#3
Отправлено 27 Сентябрь 2012 - 18:44
Почитал ссылку которую дали в сообщении сверху, там так много написано что я честно говоря потерялся немного=) И такие способы и другие, вот лучше бы один понятный FAQ тут прикрепить с полным описанием от а до я для шаблона сияние
#4
Отправлено 28 Сентябрь 2012 - 12:18
или http://forum.storela...ndpost__p__9332
По сути необходимо создать дополнительное меню в разделе меню, вставить код в шаблон "HTML" для этого меню, и вставить необходимые стили отображения.
#5
Отправлено 04 Октябрь 2012 - 01:32
сайт avondag.ru
#6
Отправлено 04 Октябрь 2012 - 14:53
При создании дополнительных меню указываем обязательно имя переменной в шаблоне так как оно необходимо в коде.
Будем делать по моему примеру.
Я сделаю 3 дополнительных меню с переменными: header1, header2, header3.
Далее мы заходим в шаблон редактора тем - HTML, в нем находим сл.блок:
<!-- Верхний блок навигации --> <div class="containerin" id="top-menu"> <ul class="pad-box cont620" id="mainmenu"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> <div class="clr"></div> </div> <!-- end Верхний блок навигации -->
и изменяем до сл.вида(не забываем что у меня 3 доп.меню, у вас кол-во может быть другим):
<!-- Верхний блок навигации --> <div class="containerin" id="top-menu"> <ul class="pad-box cont620" id="mainmenu"> <li><a href="ссылка" title="На главную">Главная</a> <ul> {% FOR menu %} {% FOR header1 %} {% FOR links %} <li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </li> <li><a href="ссылка" title="На главную">Инфа</a> <ul> {% FOR menu %} {% FOR header2 %} {% FOR links %} <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </li> <li><a href="ссылка" title="На главную">О нас</a> <ul> {% FOR menu %} {% FOR header3 %} {% FOR links %} <li><a href="{menu.header3.links.URL}" {% IF menu.header3.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </li> </ul> <div class="clr"></div> </div> <!-- end Верхний блок навигации -->
далее заходим в шаблон maincsstemplate.css и в самом низу добавляем код сл.вида:
#mainmenu{ position:relative; } #mainmenu li{ display: block !important; float: left; } #mainmenu li ul { display: none; left: 0; width:200px; position: absolute; top: 39px; z-index:99; } #mainmenu li:hover ul{display:block;} #mainmenu li ul li{ width:200px; padding:10px; border-bottom:1px solid #000; background:#999; } #mainmenu li ul li a{ font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif; padding: 0px; background:none; } #mainmenu li ul li a:hover{ background:none; }
далее находим в том же шаблоне:
#top-menu { height: 40px; overflow: hidden; }
и меняем на:
#top-menu { height: 40px; }
Итого у нас получается 3 пункта меню у каждого из них имеется выпадающий список из дополнительных блоков меню.
Далее уже можете стилизовать пункты меню и сам список как вам необходимо, инфу по стилям читаем и изучаем тут: http://htmlbook.ru/css
#7
Отправлено 07 Октябрь 2012 - 09:17
1) Во первых, если в Google Chrome все работает более - менее приемлемо, вот так:
то в Fox'e меню выпадает вот в таком ужасном виде:
А в Internet Explorer'e ВООБЩЕ НЕ ВЫПАДАЕТ, ни при наведении мыши, ни при щелчке. Вообще никак, как буде-то его и нет!
В Opera не проверял.
2) Следующая проблема - в стилях. Не смог добиться в выпадающем меню такой же "голубой подсветки", как в "родительском" меню. Где и что для этого нужно поменять?
3) Ну и последнее: Названия пунктов главного меню были смещены в право, а не располагались по центру кнопок. Я решил этот вопрос довольно прямолинейно - просто тупо добавил перед названиями неразрывных пробелов. Т.е. это, конечно, дало результат, но чувствую, что должно быть более рациональное решение. Хотелось бы просто узнать.
Сайт avondag.ru
#8
Отправлено 08 Октябрь 2012 - 11:14
<meta http-equiv="X-UA-Compatible" content="IE=7" />и цифру 7 замените на 9
2)это не проблема,а больше неизвестность))) родительский класс с данным фоном называется #mainmenu li a и #mainmenu li a:hover оттуда и берем фон.
3)в #mainmenu li a вы убрали стиль padding-left: 15px; из-за чего неровно текст идет, нужно вставить обратно. При создании выпадающего меню данный класс мы не трогаем, поэтому моя совесть чиста
#9
Отправлено 09 Октябрь 2012 - 13:35
Vaccina (08 Октябрь 2012 - 11:14) писал:
<meta http-equiv="X-UA-Compatible" content="IE=7" />и цифру 7 замените на 9
#10
Отправлено 14 Январь 2013 - 16:53
"далее находим в том же шаблоне:
#top-menu {
height: 40px;
overflow: hidden;
}
и меняем на:
#top-menu {
height: 40px;
}
и меню не выпадает, сайт
http://стильисталь.рф
#11
Отправлено 14 Январь 2013 - 20:36
#12
Отправлено 18 Январь 2013 - 14:47
#13
Отправлено 18 Январь 2013 - 17:05
Можно сделать следуюющим образом.
В файле "HTML".
Найти код:
<div id="mainNav"> <table> <tr> {% FOR menu %} {% FOR header %} {% FOR links %} <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}> <div> <a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{% ENDIF %} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a> </div> </td> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </tr> </table> </div>Заменить:
<div id="mainNav" class="nav"> <table> <tr> {% FOR menu %} {% FOR header %} {% FOR links %} <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}> <li> <a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{% ENDIF %} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a> {%IF menu.header.links.NAME = Главная%} <ul> <li> <a href="http://ya.ru/">Yandex</a> </li> <li> <a href="http://ya.ru/">Yandex2</a> </li> </ul> {%ENDIF%} </li> </td> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </tr> </table> </div>В этом коде мы пишем выподающее меню вручную:
<li> <a href="http://ya.ru/">Yandex2</a> </li>Это и есть пункт под выподаюшим меню. Для того чтобы добавить новый пункт меню достаточно вставить еще раз подобный код.Например:
<li> <a href="http://ya.ru/">Yandex2</a> </li> <li> <a href="адрес страницы">Еще один пункт меню</a> </li>
А для того чтобы изменить расположение выпадающего меню, нужно изменить условия.
{%IF menu.header.links.NAME = Главная%}Изменить слово "Главная" на название категории под которой хотите выводить выпадающее меню.
Затем до кода </head>.
Добавить код:
<script type="text/javascript"> $(document).ready(function () { $('.nav li').hover( function () { //show its submenu $('ul', this).stop().slideDown(100); }, function () { //hide its submenu $('ul', this).stop().slideUp(100); } ); }); </script>
В файл "main.csstemplate".
Добавить код:
.nav li { float:left; display:block; position:relative; z-index:500; margin:0 1px; } .nav li a { display:block; padding:8px 5px 0 5px; text-decoration:none; } .nav li a:hover { } .nav a.selected { } .nav ul { position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none; } .nav ul li { float:left; } .nav ul a { display:block; padding: 8px 5px; background: white; min-width: 50px; width:auto; opacity: 0.8; } .nav ul a:hover { text-decoration:underline; }
#15
Отправлено 18 Январь 2013 - 18:33
Jerek (18 Январь 2013 - 17:24) писал:
Сделал как Вы сказали, но не чего не поменялось, только верхнее меню стало серым и не красивым. Мне нужно сделать что бы раскрывающееся меню было с левой стороны =(
http://forum.storela...аров/#entry2906
#16
Отправлено 05 Март 2013 - 11:48
Vaccina (14 Январь 2013 - 20:36) писал:
правильно ли я понимаю, что можно обойтись без скачивания файла в корень сайта? проделала все вышесказанное, но меню не выпадает(
#18
Отправлено 17 Март 2013 - 13:49
каким образом быть?
пробывал указания,которые описали ниже для мокко,но получилась ерунда
подскажите пожалуйста,что делать?
#20
Отправлено 18 Март 2013 - 11:58
Stasya (18 Март 2013 - 11:39) писал:
там тема идет по поводу левых вертикальных каталогов
а мне нужен горизонтальный,который посередине
Помогите пожалуйста!!!
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных