Перейти к содержимому


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


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 513

#1 Don Vinton

Don Vinton

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 27 Сентябрь 2012 - 10:46

ВЫПАДАЮЩЕЕ МЕНЮ.

Этот вопрос уже задавался и обсуждался на форуме и, насколько я понимаю, в различных вариациях - неоднократно.
Но к сожалению мои попытки реализовать предложенные в разных ветках методы и способы, увы, ни к чему не привели.

Задача состоит в следующем:
Необходимо в имеющемся главном меню сайта отдельные его пункты сделать выпадающими, т.е. чтобы при наведении (или нажатии) на них мышью раскрывался список из нескольких новых подпунктов меню.
Т.е. нужно, к примеру, сделать что-то вроде этого:
Изображение->Изображение
Пример: http://otdyh-i-son.ru/

После того, как я сделал всё, как описано здесь, на сайте вообще не произошло абсолютно никаких изменений, а после следования этим рекомендациям главное меню полностью заменялось новым, состоящим из 3-х пунктов, которые, при этом не содержали никакого выпадающего списка. Вот так:
Изображение

Уважаемые админы и модераторы, просьба не отсылать на аналогичные темы форума (вроде этой http://forum.storela..._2072#entry2072), поскольку изложенные в них шаги также не привели к результату; я не являюсь опытным пользователем и возможно что-то упускаю из виду. Предполагаю, что приведенные в вышеуказанных темах способы создания выпадающего меню описаны не полностью, а в расчёте на продвинутого пользователя и возможно "за кадром" остались еще какие-то манипуляции, которые необходимо произвести. В связи с этим обращаюсь с просьбой дать пошаговую инструкцию того какие кокретно html (или иные) коды и в какие шаблоны (и места в шаблонах) необходимо вставить, чтобы решить эту задачу.

Спасибо.

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 822 сообщений

Отправлено 27 Сентябрь 2012 - 12:39

В данных темах что вы указываете http://forum.storela...ndpost__p__2072
Описывает подробно что у куда необходимо вставлять. Вероятно вы упускаете что-то из виду. Могу только предложить вам прочитать тему внимательнее. Мне кажется что вы забыли создать необходимые дополнительные меню в разделе Сайт -> Меню. Проверьте это. Расписать как-то еще подробнее не получиться, так как и так все подробно расписано - необходимо только следовать инструкции, и внимательно вставлять предложенный код.

Вам необходимо сообщить адрес вашего магазина - где вы пытаетесь использовать данный код. Это может оказаться полезным, для понимания происходящего. Так же приведите код из вашего шаблона "HTML" по вставке меню.

#3 Flagman86@mail.ru

Flagman86@mail.ru

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 130 сообщений
  • ГородМосква

Отправлено 27 Сентябрь 2012 - 18:44

Мне тоже интересна эта тема, сайт gytalin.ru
Почитал ссылку которую дали в сообщении сверху, там так много написано что я честно говоря потерялся немного=) И такие способы и другие, вот лучше бы один понятный FAQ тут прикрепить с полным описанием от а до я для шаблона сияние

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 822 сообщений

Отправлено 28 Сентябрь 2012 - 12:18

Там особо сложного ничего нет, если читать начиная от http://forum.storela...ndpost__p__4795
или http://forum.storela...ndpost__p__9332

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

#5 Don Vinton

Don Vinton

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 04 Октябрь 2012 - 01:32

Я очень извиняюсь. Присоединяюсь полностью к сказанному Flagman86@mail.ru. Я, честно, читал, но кроме того, что там действительно много чего нагромождено, многие вещи все же на мой взгляд не договариваются и обсуждение рассчитано на людей с определенным опытом в "сайтостроении". К сожалению, начинающему пользователю, следуя предложенной вами схеме, трудно в этом разобраться. Я прошу, если вас не затруднит, не могли бы вы привести элементарнейший пошаговый алгоритм всех манипуляций, которые надо произвести, рассчитанный на новичка? Т.е. буквально "Такой-то код вставить в такое то место между этим и этим блоками в шаблоне таком-то...." и т.п.? особенно напрягает момент со стилями отображения. Не сочтите за занудство, но очень надо. Благодарю.
сайт avondag.ru

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 822 сообщений

Отправлено 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 Don Vinton

Don Vinton

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 07 Октябрь 2012 - 09:17

Спасибо за инструкции. Все сделал, как было вами указано (адаптировав под свои потребности). Правда работало меню не так, как хотелось, поэтому пришлось самостоятельно внести в код некоторые изменения. Это помогло, но не совсем, остались некоторые серьезные проблемы.

1) Во первых, если в Google Chrome все работает более - менее приемлемо, вот так:
Изображение

то в Fox'e меню выпадает вот в таком ужасном виде:
Изображение

А в Internet Explorer'e ВООБЩЕ НЕ ВЫПАДАЕТ, ни при наведении мыши, ни при щелчке. Вообще никак, как буде-то его и нет!
В Opera не проверял.

2) Следующая проблема - в стилях. Не смог добиться в выпадающем меню такой же "голубой подсветки", как в "родительском" меню. Где и что для этого нужно поменять?

3) Ну и последнее: Названия пунктов главного меню были смещены в право, а не располагались по центру кнопок. Я решил этот вопрос довольно прямолинейно - просто тупо добавил перед названиями неразрывных пробелов. Т.е. это, конечно, дало результат, но чувствую, что должно быть более рациональное решение. Хотелось бы просто узнать.
Сайт avondag.ru

#8 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 822 сообщений

Отправлено 08 Октябрь 2012 - 11:14

1) Я изменила выше код в main.css для #mainmenu li ul, добавила туда width:200px; теперь должно нормально выпадать. На счет IE в 9 версии работает, возможно проблема из-за режима совместимости, зайдите в html найдите:
<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 Don Vinton

Don Vinton

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений

Отправлено 09 Октябрь 2012 - 13:35

Просмотр сообщенияVaccina (08 Октябрь 2012 - 11:14) писал:

1) Я изменила выше код в main.css для #mainmenu li ul, добавила туда width:200px; теперь должно нормально выпадать. На счет IE в 9 версии работает, возможно проблема из-за режима совместимости, зайдите в html найдите:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
и цифру 7 замените на 9
Изображение

#10 raven_knp

raven_knp

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 14 Январь 2013 - 16:53

Здраствуйте все сделал как написано у вас  в примере, только не могу найти

"далее находим в том же шаблоне:
#top-menu {
        height: 40px;
        overflow: hidden;
}

и меняем на:

#top-menu {
        height: 40px;
}
и меню не выпадает, сайт

http://стильисталь.рф

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 822 сообщений

Отправлено 14 Январь 2013 - 20:36

Данные изменения предназначены для шаблона "Сияние". Вы можете изменить тему оформления в разделе Сайт -> Галерея тем. Темя "Сияние" значительно проще изменяется, так как в ней используется меньшее число стилей, что будет проще вам для изменения.

#12 Jerek

Jerek

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 120 сообщений
  • ГородОренбург

Отправлено 18 Январь 2013 - 14:47

Все очень хорошо описанно, но вот проблема, у меня не шаблон Сияние, так что не могу разобраться что к чему. Подскажите пожалуйста как сделать для шаблона Мокко. :)

#13 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 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;
}


#14 Jerek

Jerek

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 120 сообщений
  • ГородОренбург

Отправлено 18 Январь 2013 - 17:24

Сделал как Вы сказали, но не чего не поменялось, только верхнее меню стало серым и не красивым. Мне нужно сделать что бы раскрывающееся меню было с левой стороны =(

Прикрепленные изображения

  • 321312321.jpg


#15 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 18 Январь 2013 - 18:33

Просмотр сообщенияJerek (18 Январь 2013 - 17:24) писал:

Сделал как Вы сказали, но не чего не поменялось, только верхнее меню стало серым и не красивым. Мне нужно сделать что бы раскрывающееся меню было с левой стороны =(

Сделал как Вы сказали, но не чего не поменялось, только верхнее меню стало серым и не красивым. Мне нужно сделать что бы раскрывающееся меню было с левой стороны =(
Про раскрывающийся список вы можете прочитать в данной ветке форума.
http://forum.storela...аров/#entry2906

#16 ais-83

ais-83

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 165 сообщений

Отправлено 05 Март 2013 - 11:48

Просмотр сообщенияVaccina (14 Январь 2013 - 20:36) писал:

Данные изменения предназначены для шаблона "Сияние". Вы можете изменить тему оформления в разделе Сайт -> Галерея тем. Темя "Сияние" значительно проще изменяется, так как в ней используется меньшее число стилей, что будет проще вам для изменения.

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

#17 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 924 сообщений

Отправлено 05 Март 2013 - 13:23

Просмотр сообщенияais-83 (05 Март 2013 - 11:48) писал:

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

Напишите поподробнее что Вам нужно сделать. Какое меню и куда поставить?

#18 AS1987

AS1987

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений

Отправлено 17 Март 2013 - 13:49

у меня стиль мокко и не могу в html найти <!-- Верхний блок навигации -->

каким образом быть?

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

подскажите пожалуйста,что делать?

#19 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 18 Март 2013 - 11:39

Возможно Вам поможет данная тема

#20 AS1987

AS1987

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений

Отправлено 18 Март 2013 - 11:58

Просмотр сообщенияStasya (18 Март 2013 - 11:39) писал:

Возможно Вам поможет данная тема

там тема идет по поводу левых вертикальных каталогов

а мне нужен горизонтальный,который посередине

Помогите пожалуйста!!!




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных