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


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

Автор Don Vinton, 27 сент. 2012 10:46

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

#21 AS1987

AS1987

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

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

Отправлено 18 Март 2013 - 12:26

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

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

  • 123.jpg

#22 support 2.0

support 2.0

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

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

Отправлено 18 Март 2013 - 15:10

Просмотр сообщенияAS1987 (18 Март 2013 - 12:26) писал:

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

Вам нужно проделать изменения какие предложены в данной теме. Стили потом уже можно будет изменить на те, который Вам нужна

#23 AS1987

AS1987

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

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

Отправлено 18 Март 2013 - 16:17

Просмотр сообщенияsupport 2.0 (18 Март 2013 - 15:10) писал:

Вам нужно проделать изменения какие предложены в данной теме. Стили потом уже можно будет изменить на те, который Вам нужна

если я там начинаю менять,то у меня полностью все меняется

как быть?

#24 support 2.0

support 2.0

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

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

Отправлено 18 Март 2013 - 17:30

Просмотр сообщенияAS1987 (18 Март 2013 - 16:17) писал:

если я там начинаю менять,то у меня полностью все меняется

как быть?

Что конкретно у Вас меняется?

#25 AS1987

AS1987

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

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

Отправлено 18 Март 2013 - 22:47

Просмотр сообщенияsupport 2.0 (18 Март 2013 - 17:30) писал:

Что конкретно у Вас меняется?

1. это то ,что у меня было эпл.jpg
2.это,что стало Безымянныйс.jpg

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

жду от Вас помощи в решении проблемы.

#26 Vaccina

Vaccina

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

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

Отправлено 19 Март 2013 - 04:55

Попробуйте добавить в ваш файл стилей main.css

#mainNav li:hover ul {
display: block;
}

так же в файле стилей найдите

#mainNav table td div {float:left;font-size: 1.25em;line-height: 1.3333em;height: 30px;background: #FFF url("/design/nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a:link,
#mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("/design/nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a.selected,
#mainNav table td div a:hover,
#mainNav table td div a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}

и замените на

#mainNav table td > li {float:left;font-size: 1.25em;line-height: 1.3333em;height: 30px;background: #FFF url("/design/nav_item_bg.gif") repeat-x bottom left; margin:0 !important;}
#mainNav table td > li > a:link,
#mainNav table td > li > a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("/design/nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td > li > a.selected,
#mainNav table td > li > a:hover,
#mainNav table td > li > a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}

#27 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 15:03

Просмотр сообщенияKoderhan (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>.
Добавить код:
&lt;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;
}

Все получается, отлично. появляется всплывающее меню под один пункт верхнего меню.

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

Порекомендуйте именно исходя от этого сообщения.

Сообщение отредактировал AS1987: 19 Март 2013 - 21:24

#28 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 15:38

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

#29 Stasya

Stasya

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

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

Отправлено 19 Март 2013 - 15:41

А Вы делали то что описано выше?

#30 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 15:46

Просмотр сообщенияStasya (19 Март 2013 - 15:41) писал:

А Вы делали то что отвечали выше?

конечно,посмотрите сайт http://mobilesar.ru/,
дело в в том, если я повторяю эту операцию с.jpg
то у меня предыдущее закрывается

#31 Stasya

Stasya

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

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

Отправлено 19 Март 2013 - 15:57

Для каждого пункта меню Вам необходимо прописать код подменю с разными header. Затем в бэк-офисе в разделе Сайт-> Меню добавляйте пункты подменю.

#32 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 15:58

Просмотр сообщенияStasya (19 Март 2013 - 15:57) писал:

Для каждого пункта меню Вам необходимо прописать код подменю с разными header. Затем в бэк-офисе в разделе Сайт-> Меню добавляйте пункты подменю.


{%IF menu.header.links.NAME = Apple%} его менять?
                                         <ul>
                                                 <li>
                                                 <a href="http://ya.ru/">Yande...ru/">Yandex</a>
                                                 </li>
                                                 <li>
                                                 <a href="http://ya.ru/">Yande...u/">Yandex2</a>
                                                 </li>

#33 Stasya

Stasya

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

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

Отправлено 19 Март 2013 - 16:02

Вот пример выпадающего меню
<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 header %}
					 {% 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>
Если Вы хотите чтобы у каждого пункта меню было подменю, то после каждого пункта меню Вы добавляете 
<ul>
			 {% FOR menu %}
				 {% FOR header %}
				 {% FOR header1 %}
					 {% FOR header2 %}
						 ........................
						 {% 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>
						 <li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
				 ..................................................
					 {% ENDFOR %}
				 {% ENDFOR %}
				 .........................
			 {% ENDFOR %}
		 </ul>
ровно столько сколько пунктов подменю у Вас будет. Затем переходите в бэк-офис и там добавляете все пункты подменю

#34 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 16:03

Напишите пожалуйста по порядкку,каким образом это можно сделать, тут я так понимаю работы на 5 мин,а я уже делаю это 3 дня(((

Напишите это,что бы даже даун мог с одного разу все сделал.
Большое спасибо за понимание.

#35 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 16:12

{% FOR header1 %}

что это означает на сайте???
и на что это влияет?

#36 Stasya

Stasya

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

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

Отправлено 19 Март 2013 - 16:22

header1, header2 и т.д. это номера пунктов подменю. Именно эта строка- условие, которое переводя на русский язык трактуется как для header1 выполнить какое-либо условие. В дальнейшем эти номера Вам потребуются для привязки пункта подменю к адресу странички на которую нужно будет переходить.

#37 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 17:03

я разобрался,как делать дополнительный подпункт в существующем всплывающем окне.

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

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

спасибо за понимание.

#38 Stasya

Stasya

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

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

Отправлено 19 Март 2013 - 17:23

Что Вы имеете ввиду под словами дополнительное всплывающее окно и соответственно подпункты к нему? Вышенаписанный код реализует выпадающее подменю при наведении на какой-либо пункт основного меню. Например при наведении на пункт "О нас" будет выпадать меню с 2мя подпунктами- Магазин и Контакты. К сожалению, это не все, что нужно написать для реализации данного меню. Так же еще необходимо прописать стили. Я правильно Вас поняла?

#39 AS1987

AS1987

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

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

Отправлено 19 Март 2013 - 17:42

фильм трудности перевода вспоминаю))

давайте объясню на картинке,что хочу получить.подпункты.jpg

посмотрите пожалуйста мой файл HTML для того,что бы дать точные рекомендации,как создать выпадающее подменю при наведении на какой-либо пункт основного меню. Хотя бы для тех двух,которые указаны на картинке.
apple -> 1) iPhone 2) iPad и т.д.
гарантия -> 1) сервис 2) услуги и т.д.

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

Заранее благодарен за понимание.

#40 Vilenskiy85

Vilenskiy85

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

  • Пользователи
  • PipPipPipPip
  • 257 сообщений
  • ГородСтерлитамак

Отправлено 24 Март 2013 - 17:03

Помогите пожалуйста, вроде все сделал как было описано на ветке форума, но пока не получается сделать выпадение верхнего меню при наведении списком www.klimat-vikom.ru
Обратно в Изменение общей стилистики


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

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

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