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


Всплывающее Меню При Наведении

Автор art.ivanaev, 27 февр. 2013 11:23

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

#1 art.ivanaev

art.ivanaev

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

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

Отправлено 27 Февраль 2013 - 11:23

Добрый день. Подскажите, как сделать всплывающее меню при наведении на определенный раздел и чтобы там были подпункты. (т.е подменю)

Спасибо

#2 support 2.0

support 2.0

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

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

Отправлено 27 Февраль 2013 - 11:31

Просмотр сообщенияart.ivanaev (27 Февраль 2013 - 11:23) писал:

Добрый день. Подскажите, как сделать всплывающее меню при наведении на определенный раздел и чтобы там были подпункты. (т.е подменю)

Спасибо

Вы говорите про главное меню или про левый каталог товаров?

#3 miyako

miyako

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

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

Отправлено 27 Февраль 2013 - 11:31

Подобный вопрос рассматривался в этих темах - http://forum.storela...еста/#entry2072
http://forum.storela...еню/#entry42989

#4 art.ivanaev

art.ivanaev

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

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

Отправлено 27 Февраль 2013 - 13:35

Просмотр сообщенияsupport 2.0 (27 Февраль 2013 - 11:31) писал:

Вы говорите про главное меню или про левый каталог товаров?
Про Главное меню.

#5 miyako

miyako

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

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

Отправлено 27 Февраль 2013 - 13:46

Просмотр сообщенияart.ivanaev (27 Февраль 2013 - 13:35) писал:

Про Главное меню.

Можете обратится к этой теме - http://forum.storela...еню/#entry42989

#6 art.ivanaev

art.ivanaev

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

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

Отправлено 27 Февраль 2013 - 14:02

Просмотр сообщенияmiyako (27 Февраль 2013 - 13:46) писал:

Можете обратится к этой теме - http://forum.storela...еню/#entry42989
я так понимаю тему которую вы предложили - это для шаблона Сияние, а мне нужно изменить в шаблоне Мокко

#7 Koderhan

Koderhan

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

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

Отправлено 27 Февраль 2013 - 14:10

На самом деле все проще чем кажется. Действия для шаблона мокко аналогичны.

#8 art.ivanaev

art.ivanaev

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

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

Отправлено 27 Февраль 2013 - 15:30

помогите пожалуйста. Ничего не выходит. Мне нужно например Из меню "О нас", раскрывался список подменю (например - "Статьи") аккаунт SL-182568

#9 Koderhan

Koderhan

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

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

Отправлено 27 Февраль 2013 - 16:19

Просмотр сообщенияart.ivanaev (27 Февраль 2013 - 15:30) писал:

помогите пожалуйста. Ничего не выходит. Мне нужно например Из меню "О нас", раскрывался список подменю (например - "Статьи") аккаунт SL-182568
В файл "main.csstemplate".
Добавить код:
.m1 ul {
display: none;
}
.first .m1:hover ul {
display: block;
}
В файле "HTML".
Найти код:
<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>
Заменить:
<tr>
		{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
			 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
			   <div class="m1">
				 <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://google.ru/">google</a>
						  </li>
						</ul>
					  {%ENDIF%}
			   </div>
			 </td>
		   {% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
	  </tr>

#10 art.ivanaev

art.ivanaev

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

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

Отправлено 27 Февраль 2013 - 17:45

Просмотр сообщенияKoderhan (27 Февраль 2013 - 16:19) писал:

В файл "main.csstemplate".
Добавить код:
.m1 ul {
display: none;
}
.first .m1:hover ul {
display: block;
}
В файле "HTML".
Найти код:
<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>
Заменить:
<tr>
	 {% FOR menu %}
			 {% FOR header %}
			 {% FOR links %}
			 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
			 <div class="m1">
				 <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://google.ru/">google</a>
						 </li>
					 </ul>
					 {%ENDIF%}
			 </div>
			 </td>
		 {% ENDFOR %}
			 {% ENDFOR %}
		 {% ENDFOR %}
	 </tr>

ничего неизменилось

#11 Koderhan

Koderhan

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

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

Отправлено 27 Февраль 2013 - 18:06

Просто нужно было немного изменить код под свою задачу.
В файле "HTML".
Теперь попробуйте этот код:
<tr>
		 {% FOR menu %}
						 {% FOR header %}
						 {% FOR links %}
						 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
						 <div class="m1">
								 <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="адрес сайта">адрес</a>
												 </li>
										 </ul>
										 {%ENDIF%}
						 </div>
						 </td>
				 {% ENDFOR %}
						 {% ENDFOR %}
				 {% ENDFOR %}
		 </tr>
Теперь вы можете поменять адрес сайта . Тут в цикле мы прописали условие. Если пункт меню равно "О нас" то выводим подменю...

#12 art.ivanaev

art.ivanaev

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

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

Отправлено 27 Февраль 2013 - 18:27

Просмотр сообщенияKoderhan (27 Февраль 2013 - 18:06) писал:

Просто нужно было немного изменить код под свою задачу.
В файле "HTML".
Теперь попробуйте этот код:
<tr>
		 {% FOR menu %}
						 {% FOR header %}
						 {% FOR links %}
						 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
						 <div class="m1">
								 <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="адрес сайта">адрес</a>
												 </li>
										 </ul>
										 {%ENDIF%}
						 </div>
						 </td>
				 {% ENDFOR %}
						 {% ENDFOR %}
				 {% ENDFOR %}
		 </tr>
Теперь вы можете поменять адрес сайта . Тут в цикле мы прописали условие. Если пункт меню равно "О нас" то выводим подменю...

Спасибо. Помогло

#13 art.ivanaev

art.ivanaev

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

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

Отправлено 28 Февраль 2013 - 20:15

Просмотр сообщенияart.ivanaev (27 Февраль 2013 - 18:27) писал:

Спасибо. Помогло

еще вопрос по Всплывающему меню.
когда наводишь на меню, выпадает подменю и при выпадении подменю сдвигаются вправо другие пункты Меню. как можно зафиксировать?

#14 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 28 Февраль 2013 - 23:26

Найдите в вашем файле стилей main.css

#mainNav table td div {
	background: url("http://intim-eshop.storeland.net/nav_item_bg.gif") repeat-x scroll left bottom #FFFFFF;
	float: left;
	font-size: 1.25em;
	height: 30px;
	line-height: 1.3333em;
}

и замените на

#mainNav table td div {
	background: url("http://intim-eshop.storeland.net/nav_item_bg.gif") repeat-x scroll left bottom #FFFFFF;
	float: left;
	font-size: 1.25em;
	height: 30px;
	line-height: 1.3333em;
	position: relative;
}

далее найдите

.first .m1:hover ul {
	display: block;
	left: 0;
	top: 0;
}

и замените на

.first .m1:hover ul {
	display: block;
	left: 0;
	top: 30px;
	position: absolute;
}

#15 art.ivanaev

art.ivanaev

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

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

Отправлено 05 Март 2013 - 21:47

Просмотр сообщенияVaccina (28 Февраль 2013 - 23:26) писал:

Найдите в вашем файле стилей main.css

#mainNav table td div {
background: url("http://intim-eshop.storeland.net/nav_item_bg.gif") repeat-x scroll left bottom #FFFFFF;
float: left;
font-size: 1.25em;
height: 30px;
line-height: 1.3333em;
}

и замените на

#mainNav table td div {
background: url("http://intim-eshop.storeland.net/nav_item_bg.gif") repeat-x scroll left bottom #FFFFFF;
float: left;
font-size: 1.25em;
height: 30px;
line-height: 1.3333em;
position: relative;
}

далее найдите

.first .m1:hover ul {
display: block;
left: 0;
top: 0;
}

и замените на

.first .m1:hover ul {
display: block;
left: 0;
top: 30px;
position: absolute;
}

спасибо. работает

#16 art.ivanaev

art.ivanaev

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

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

Отправлено 14 Март 2013 - 15:27

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

#17 art.ivanaev

art.ivanaev

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

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

Отправлено 14 Март 2013 - 18:59

Просмотр сообщенияart.ivanaev (05 Март 2013 - 21:47) писал:

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

#18 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 14 Март 2013 - 19:24

Просмотр сообщенияart.ivanaev (14 Март 2013 - 18:59) писал:

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

#19 art.ivanaev

art.ivanaev

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

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

Отправлено 14 Март 2013 - 19:43

Просмотр сообщенияMikola (14 Март 2013 - 19:24) писал:

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

#20 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 15 Март 2013 - 01:07

К сожалению 3й уровень навигации сделать с меню в виде

{% FOR menu %}
				 {% FOR header1 %}
					 {% FOR links %}

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

{% FOR menu %}
				 {% FOR header1 %}
					 {% FOR links %}
				 {% FOR header2 %}
								 {% FOR links %}

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

Если вы хотите сделать меню вручную на основе

<tr>
				 {% FOR menu %}
												 {% FOR header %}
												 {% FOR links %}
												 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
												 <div class="m1">
																 <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="адрес сайта">адрес</a>
																								 </li>
																				 </ul>
																				 {%ENDIF%}
												 </div>
												 </td>
								 {% ENDFOR %}
												 {% ENDFOR %}
								 {% ENDFOR %}
				 </tr>

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

<tr>
				 {% FOR menu %}
												 {% FOR header %}
												 {% FOR links %}
												 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
												 <div class="m1">
																 <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="адрес сайта">адрес</a>
																								   <ul>
																									 <li>
																									   <a href="адрес сайта">адрес 2</a>
																									 </li>
																								   </ul>
																							  </li>
																				 </ul>
																				 {%ENDIF%}
												 </div>
												 </td>
								 {% ENDFOR %}
												 {% ENDFOR %}
								 {% ENDFOR %}
				 </tr>

т.е в данном случае идут дополнительные вложенные списки <ul> <li>
Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Изменение общей стилистики
  6. Privacy Policy