0
Верхнее Меню
Автор darya_kolos, 18 июля 2016 16:52
Сообщений в теме: 8
#1
Отправлено 18 Июль 2016 - 16:52
Здравствуйте!
Интересует такой вопрос по верхнему меню - можно ли одну из ссылок сделать выпадающим списком. Т.е. сейчас у меня в верхнем меню ссылки Главная, Новости, Акции, Каталог и т.д. Хочу ссылку Помощь при наведении на которую выпадает список со ссылками на страницы О нас, Размеры одежды и пр. Сделать что-то типа раздела что ли.
Интересует такой вопрос по верхнему меню - можно ли одну из ссылок сделать выпадающим списком. Т.е. сейчас у меня в верхнем меню ссылки Главная, Новости, Акции, Каталог и т.д. Хочу ссылку Помощь при наведении на которую выпадает список со ссылками на страницы О нас, Размеры одежды и пр. Сделать что-то типа раздела что ли.
#2
Отправлено 19 Июль 2016 - 02:44
В шаблоне HTML найдите:
после него пропишите:
В разделе Сайт - Меню создайте меню с идентификатор header2 и добавьте необходимые пункты.
В main.css найдите:
замениье на:
Далее найдите:
замените на:
<span class="welcome">Добро пожаловать!</span> <ul class="links"> {% 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 %}
после него пропишите:
<li><a href="#">Помощь</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>
В разделе Сайт - Меню создайте меню с идентификатор header2 и добавьте необходимые пункты.
В main.css найдите:
#header-top .topheader-right .sns-quickaccess ul.links { list-style: none; margin: 0 0; padding: 0 0; float: left; height: 36px; overflow: hidden; }
замениье на:
#header-top .topheader-right .sns-quickaccess ul.links { list-style: none; margin: 0 0; padding: 0 0; float: left; height: 36px; }
Далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;}
замените на:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;position: relative;} #header-top .topheader-right .sns-quickaccess ul.links li ul { position: absolute; right: 0; padding: 0; z-index: 99; width: 100px; background: #fff; border: 1px solid #ccc; display:none; } #header-top .topheader-right .sns-quickaccess ul.links li:hover > ul { display: block; } #header-top .topheader-right .sns-quickaccess ul.links li ul li { background: none; width: 100%; text-align: center; padding: 5px 0; }
#3
Отправлено 19 Июль 2016 - 05:40
Vaccina (19 Июль 2016 - 02:44) писал:
В шаблоне HTML найдите:
после него пропишите:
В разделе Сайт - Меню создайте меню с идентификатор header2 и добавьте необходимые пункты.
В main.css найдите:
замениье на:
Далее найдите:
замените на:
<span class="welcome">Добро пожаловать!</span> <ul class="links"> {% 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 %}
после него пропишите:
<li><a href="#">Помощь</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>
В разделе Сайт - Меню создайте меню с идентификатор header2 и добавьте необходимые пункты.
В main.css найдите:
#header-top .topheader-right .sns-quickaccess ul.links { list-style: none; margin: 0 0; padding: 0 0; float: left; height: 36px; overflow: hidden; }
замениье на:
#header-top .topheader-right .sns-quickaccess ul.links { list-style: none; margin: 0 0; padding: 0 0; float: left; height: 36px; }
Далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;}
замените на:
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;position: relative;} #header-top .topheader-right .sns-quickaccess ul.links li ul { position: absolute; right: 0; padding: 0; z-index: 99; width: 100px; background: #fff; border: 1px solid #ccc; display:none; } #header-top .topheader-right .sns-quickaccess ul.links li:hover > ul { display: block; } #header-top .topheader-right .sns-quickaccess ul.links li ul li { background: none; width: 100%; text-align: center; padding: 5px 0; }
Я что-то может не так сделала, или неправильно объяснила... Я бы хотела сохранить верхнее меню как было, но один пункт сделать выпадающим списком. Сейчас остался только этот "должно быть выпадающий" список. Но получилось у меня вот так (скрин)
#4
Отправлено 19 Июль 2016 - 05:43
Вам в шаблоне HTML необходимо НЕ заменить блоки, а разместить дополнительный блок после найденного, то есть сейчас вместо:
должно получиться так:
<div class="quickaccess-inner"> <li><a href="#">Помощь</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> </ul> </div>
должно получиться так:
<div class="quickaccess-inner"> <span class="welcome">Добро пожаловать!</span> <ul class="links"> {% 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 %} <li><a href="#">Помощь</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> </ul> </div>
#5
Отправлено 19 Июль 2016 - 06:35
Вот это заработалась - простите, и вправду заменила. Плохо прочитала. Теперь сделала как надо, почти все устраивает. Осталось три нюанса:
1. как перенести этот пункт между Каталог и Контакты?
2. Сделать выпадающее окно по ширине самой ссылки (изменила название с помощь на Полезная информация, чтоб окно было более вместительным)
3. Ссылки на страницы в этом выпадающем списке - выравнивание не по центру, а по левому краю
1. как перенести этот пункт между Каталог и Контакты?
2. Сделать выпадающее окно по ширине самой ссылки (изменила название с помощь на Полезная информация, чтоб окно было более вместительным)
3. Ссылки на страницы в этом выпадающем списке - выравнивание не по центру, а по левому краю
#6
Отправлено 19 Июль 2016 - 06:41
В main.css найдите:
замените на:
далее найдите:
замените на:
Данный пункт можно сделать или первым или последним, так как если разместить среди других пунктов меню, то один цикл будет в другом цикле, что приведет к ошибке.
#header-top .topheader-right .sns-quickaccess ul.links li ul { position: absolute; right: 0; padding: 0; z-index: 99; width: 100px; background: #fff; border: 1px solid #ccc; display: none; }
замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul { position: absolute; right: 0; padding: 0; z-index: 99; background: #fff; border: 1px solid #ccc; display: none; }
далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li ul li { background: none; width: 100%; text-align: center; padding: 5px 0; }
замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul li { background: none; width: 100%; text-align: left; padding: 5px !important; }
Данный пункт можно сделать или первым или последним, так как если разместить среди других пунктов меню, то один цикл будет в другом цикле, что приведет к ошибке.
{% FOR menu %} {% FOR header %} {% FOR links %} {% FOR menu %} {% FOR header2 %} {% FOR links %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %}
#7
Отправлено 19 Июль 2016 - 06:51
Vaccina (19 Июль 2016 - 06:41) писал:
В main.css найдите:
замените на:
далее найдите:
замените на:
Данный пункт можно сделать или первым или последним, так как если разместить среди других пунктов меню, то один цикл будет в другом цикле, что приведет к ошибке.
#header-top .topheader-right .sns-quickaccess ul.links li ul { position: absolute; right: 0; padding: 0; z-index: 99; width: 100px; background: #fff; border: 1px solid #ccc; display: none; }
замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul { position: absolute; right: 0; padding: 0; z-index: 99; background: #fff; border: 1px solid #ccc; display: none; }
далее найдите:
#header-top .topheader-right .sns-quickaccess ul.links li ul li { background: none; width: 100%; text-align: center; padding: 5px 0; }
замените на:
#header-top .topheader-right .sns-quickaccess ul.links li ul li { background: none; width: 100%; text-align: left; padding: 5px !important; }
Данный пункт можно сделать или первым или последним, так как если разместить среди других пунктов меню, то один цикл будет в другом цикле, что приведет к ошибке.
{% FOR menu %} {% FOR header %} {% FOR links %} {% FOR menu %} {% FOR header2 %} {% FOR links %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} {% ENDFOR %}
Это сейчас выглядит примерно как
Меню_1 Меню_2
И второе никак не вставить в первое?
А слишком сложно разбить первое меня на два разных и между ними поставить меню с выпадающим списком?
#8
Отправлено 19 Июль 2016 - 06:56
В этом случае в разделе Сайт - Меню у первого меню вторую половину пунктов удалите, далее создайте новый блок меню с переменной header3 и добавьте в него удаленные пункты, в шаблоне HTML после:
вставьте:
<li><a href="#">Помощь</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>
вставьте:
{% 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 %}
#9
Отправлено 19 Июль 2016 - 13:43
Vaccina (19 Июль 2016 - 06:56) писал:
В этом случае в разделе Сайт - Меню у первого меню вторую половину пунктов удалите, далее создайте новый блок меню с переменной header3 и добавьте в него удаленные пункты, в шаблоне HTML после:
вставьте:
<li><a href="#">Помощь</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>
вставьте:
{% 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 %}
Ура! Вы просто мой спаситель я уж боялась, что скажете - вариант слишком муторный
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных