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


Верхнее Меню: Пункты С Выпадающими Списками

Автор лиса, 23 марта 2017 05:28

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

#1 лиса

лиса

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

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

Отправлено 23 Март 2017 - 05:28

Необходимо некоторые пункты верхнего меню объединить в логические общие заголовки.
Верно ли я понимаю, что мне для этого нужно в настройке меню создать дополнительные блоки меню, которые будут содержать список страниц для подпунктов? Допустим, с этим я справлюсь) Ну, скажем, я создала два дополнительных блоков меню - Верхнее2 {menu.header2} и Верхнее3 {menu.header3}. Как мне запилить их в нужные мне пункты первого уровня меню?
      
 {% FOR menu %}
				  {% FOR header %}
					{% FOR links %}
					  <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					{% ENDFOR %}
				  {% ENDFOR %}
Куда ставить-то?))    

И ещё.. сколько ни пыталась поменять настройки оформления вот тут -
/* Каталог в шапке */
#custommenu {z-index:1;}
#custommenu ul.mainnav {overflow: hidden;}
#custommenu ul.mainnav:before, #custommenu ul.mainnav:after {content: " ";display: table;}
#custommenu ul.mainnav:after {clear: both;}
#custommenu ul.mainnav li.level0 {display: inline-block;float:left;border: none;}
#custommenu ul.mainnav li.level0.active > a, #custommenu ul.mainnav li.level0:hover > a {color: #fff;background: #09afe7;position: relative;}
#custommenu ul.mainnav li.level0:first-child {padding-left: 0;}
#custommenu ul.mainnav li.level0 > a {font-family: Georgia, Times, serif;display: block;padding: 18px 20px;color: #696c79;line-height: 20px;text-transform: uppercase;font-size: 12px;font-weight: 200;position: relative;}
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;width:100%;left: 0;background: #333744;z-index: 999;overflow-y: hidden;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;margin-left: 15px;overflow-y: hidden;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.mainnav li.level0.parent a.title-lv0:after {content: "\f107";color: #696c79;position: absolute;top: 50%;right: 0px;left: 0;margin: 0 auto;text-align: center;padding-top: 5px;display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}
#custommenu ul.mainnav li.level0.parent:hover a.title-lv0:after, #custommenu ul.mainnav li.level0.parent.active a.title-lv0:after {color: #fff;}
#custommenu ul.mainnav li.level1 {list-style: none;width: 23%;float: left;margin-right: 2%;border-right: 1px solid #4d4d4d;margin-bottom: -99999px;padding-bottom: 99999px;}
#custommenu ul.mainnav li.level1:nth-child(4n+1) {clear: both}
#custommenu ul.mainnav li.level1:nth-child(4n) {margin-right: 0;border-right: 0;}
#custommenu ul.mainnav li a.title-lv1 {font-size: 12px;font-weight: 200;display: block;color: #fff;text-transform: uppercase;line-height: 17px;padding: 8px 0px;margin-right: 15px;word-wrap: break-word;position: relative;}
#custommenu ul.mainnav li a.title-lv1:after {content: "";width: 100%;border-bottom: 2px solid #fff;position: absolute;bottom: -1px;left: 0;}
#custommenu ul.mainnav li a.title-lv1:hover, #custommenu ul.mainnav li a.title-lv1:hover:after {color: #09afe7;border-color: #09afe7;}
#custommenu ul.mainnav li a.title-lv2 {color: #9e9e9e;font-size: 13px;font-weight: normal;text-transform: capitalize;padding: 5px 5px 5px 15px;display: block;position: relative;}
#custommenu ul.mainnav li a.title-lv2:hover {color: #09afe7;}
#custommenu ul.mainnav li a.title-lv2:before {content: "\f111";position: absolute;left: 0;top: 50%;margin-top: -2px;display: inline-block;font: normal 7px/1 FontAwesome;color: #09afe7;}
#custommenu ul.mainnav li ul.sub {list-style: none;padding: 10px 0 0 0;margin: 0;}
#custommenu ul.mainnav li ul.sub.dropdown-menu {padding: 20px 30px;}
#custommenu ul.menunav li {display: inline-block;float:left;border: none;}
#custommenu ul.menunav li.active > a, #custommenu ul.menunav li:hover > a {color: #fff;background: #09afe7;position: relative;}
#custommenu ul.menunav li:first-child {padding-left: 0;}
#custommenu ul.menunav li > a {display: block;padding: 10px 15px;color: #696c79;line-height: 30px;text-transform: uppercase;font-size: 16px;font-weight: 700;position: relative;border-bottom: 2px solid transparent;}
#custommenu ul.menunav li > a.active {border-bottom: 2px solid #09afe7;}
.hide-cat {display:none;}
#mommenu {display: none;background-color: #09afe7;border-radius: 0;margin: 10px 0 0;min-height: 50px;position: relative;}
#mommenu .btn {position: relative;float: right;padding: 5px 10px;margin: 10px 15px 6px 0;cursor: pointer;}
#mommenu .btn i {font-size: 21px;color: #fff;}
#mommenu .btn .overlay {content: "";display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;z-index: 9998;background: #000000;opacity: 0.2;filter: alpha(opacity=20);cursor: pointer;}
#mommenu .menu_catalog {color: #fff;text-transform: uppercase;text-shadow: none;font-size: 18px;float: left;padding: 15px 15px;line-height: 20px;}
#mommenu .menu_collapse_wrap {width: 100%;position: absolute;left: 0;top: 100%;z-index: 99;border: 1px solid transparent;background-color: #09afe7;margin-top: -2px;}
#mommenu .menu_collapse_wrap a {text-decoration: none;text-transform: capitalize;border-bottom: 1px solid #e0d8d8;line-height: 40px;font-weight: normal;color: #666;margin: 0 15px;display: block;cursor: pointer;font-size: 12px;}
#mommenu .menu_collapse_wrap a:hover, #mommenu .menu_collapse_wrap a.active, #mommenu .menu_collapse_wrap a.active span {color: #09afe7;}
#mommenu .menu_collapse_wrap .mainnav {height: auto;float: left;width: 100%;margin: 0;text-align: left;}
#mommenu .menu_collapse_wrap .mainnav li {background: #f8f8f8;list-style-type: none;padding: 0;margin: 0;float: left;width: 100%;display: block;position: relative;}
#mommenu .menu_collapse_wrap .mainnav li.level0:last-child {margin-bottom: 10px;}
#mommenu .menu_collapse_wrap .mainnav li ul.sub {display: none;padding-left: 15px;}
#mommenu .menu_collapse_wrap .mainnav li.active > ul.sub {display: block;}
#mommenu .menu_collapse_wrap .mainnav li a .open-menu {cursor: pointer;float: right;position: absolute;right: 10px;top: 4px;padding: 0 10px;}
#mommenu .menu_collapse_wrap .mainnav li a .open-menu:before {content: "\f067";font-family: 'FontAwesome';font-size: 14px;float:right;}
#mommenu .menu_collapse_wrap .mainnav li.active a .open-menu.active:before {content: "\f068";color: #707070;}
#mommenu .menu_collapse_wrap .collapse {position: relative;height: 0;overflow: hidden;}
#mommenu .menu_collapse_wrap .collapsing {position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}
#mommenu .menu_collapse_wrap .collapse.in {he
- оформление меню всё никак не меняется.. Может я ошибочно полагаю, что именно этот блок css отвечает за верхнее меню?)) Как бы разобраться во всех этих строчках, какая из них за что именно отвечает?

#2 Ирина345

Ирина345

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

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

Отправлено 23 Март 2017 - 11:13

Просмотр сообщениялиса (23 Март 2017 - 05:28) писал:

Необходимо некоторые пункты верхнего меню объединить в логические общие заголовки.
Верно ли я понимаю, что мне для этого нужно в настройке меню создать дополнительные блоки меню, которые будут содержать список страниц для подпунктов? Допустим, с этим я справлюсь) Ну, скажем, я создала два дополнительных блоков меню - Верхнее2 {menu.header2} и Верхнее3 {menu.header3}. Как мне запилить их в нужные мне пункты первого уровня меню?
  
 {% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
Куда ставить-то?))

И ещё.. сколько ни пыталась поменять настройки оформления вот тут -
/* Каталог в шапке */
#custommenu {z-index:1;}
#custommenu ul.mainnav {overflow: hidden;}
#custommenu ul.mainnav:before, #custommenu ul.mainnav:after {content: " ";display: table;}
#custommenu ul.mainnav:after {clear: both;}
#custommenu ul.mainnav li.level0 {display: inline-block;float:left;border: none;}
#custommenu ul.mainnav li.level0.active > a, #custommenu ul.mainnav li.level0:hover > a {color: #fff;background: #09afe7;position: relative;}
#custommenu ul.mainnav li.level0:first-child {padding-left: 0;}
#custommenu ul.mainnav li.level0 > a {font-family: Georgia, Times, serif;display: block;padding: 18px 20px;color: #696c79;line-height: 20px;text-transform: uppercase;font-size: 12px;font-weight: 200;position: relative;}
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;width:100%;left: 0;background: #333744;z-index: 999;overflow-y: hidden;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;margin-left: 15px;overflow-y: hidden;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
#custommenu ul.mainnav li.level0.parent a.title-lv0:after {content: "\f107";color: #696c79;position: absolute;top: 50%;right: 0px;left: 0;margin: 0 auto;text-align: center;padding-top: 5px;display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transform: translate(0, 0);}
#custommenu ul.mainnav li.level0.parent:hover a.title-lv0:after, #custommenu ul.mainnav li.level0.parent.active a.title-lv0:after {color: #fff;}
#custommenu ul.mainnav li.level1 {list-style: none;width: 23%;float: left;margin-right: 2%;border-right: 1px solid #4d4d4d;margin-bottom: -99999px;padding-bottom: 99999px;}
#custommenu ul.mainnav li.level1:nth-child(4n+1) {clear: both}
#custommenu ul.mainnav li.level1:nth-child(4n) {margin-right: 0;border-right: 0;}
#custommenu ul.mainnav li a.title-lv1 {font-size: 12px;font-weight: 200;display: block;color: #fff;text-transform: uppercase;line-height: 17px;padding: 8px 0px;margin-right: 15px;word-wrap: break-word;position: relative;}
#custommenu ul.mainnav li a.title-lv1:after {content: "";width: 100%;border-bottom: 2px solid #fff;position: absolute;bottom: -1px;left: 0;}
#custommenu ul.mainnav li a.title-lv1:hover, #custommenu ul.mainnav li a.title-lv1:hover:after {color: #09afe7;border-color: #09afe7;}
#custommenu ul.mainnav li a.title-lv2 {color: #9e9e9e;font-size: 13px;font-weight: normal;text-transform: capitalize;padding: 5px 5px 5px 15px;display: block;position: relative;}
#custommenu ul.mainnav li a.title-lv2:hover {color: #09afe7;}
#custommenu ul.mainnav li a.title-lv2:before {content: "\f111";position: absolute;left: 0;top: 50%;margin-top: -2px;display: inline-block;font: normal 7px/1 FontAwesome;color: #09afe7;}
#custommenu ul.mainnav li ul.sub {list-style: none;padding: 10px 0 0 0;margin: 0;}
#custommenu ul.mainnav li ul.sub.dropdown-menu {padding: 20px 30px;}
#custommenu ul.menunav li {display: inline-block;float:left;border: none;}
#custommenu ul.menunav li.active > a, #custommenu ul.menunav li:hover > a {color: #fff;background: #09afe7;position: relative;}
#custommenu ul.menunav li:first-child {padding-left: 0;}
#custommenu ul.menunav li > a {display: block;padding: 10px 15px;color: #696c79;line-height: 30px;text-transform: uppercase;font-size: 16px;font-weight: 700;position: relative;border-bottom: 2px solid transparent;}
#custommenu ul.menunav li > a.active {border-bottom: 2px solid #09afe7;}
.hide-cat {display:none;}
#mommenu {display: none;background-color: #09afe7;border-radius: 0;margin: 10px 0 0;min-height: 50px;position: relative;}
#mommenu .btn {position: relative;float: right;padding: 5px 10px;margin: 10px 15px 6px 0;cursor: pointer;}
#mommenu .btn i {font-size: 21px;color: #fff;}
#mommenu .btn .overlay {content: "";display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;z-index: 9998;background: #000000;opacity: 0.2;filter: alpha(opacity=20);cursor: pointer;}
#mommenu .menu_catalog {color: #fff;text-transform: uppercase;text-shadow: none;font-size: 18px;float: left;padding: 15px 15px;line-height: 20px;}
#mommenu .menu_collapse_wrap {width: 100%;position: absolute;left: 0;top: 100%;z-index: 99;border: 1px solid transparent;background-color: #09afe7;margin-top: -2px;}
#mommenu .menu_collapse_wrap a {text-decoration: none;text-transform: capitalize;border-bottom: 1px solid #e0d8d8;line-height: 40px;font-weight: normal;color: #666;margin: 0 15px;display: block;cursor: pointer;font-size: 12px;}
#mommenu .menu_collapse_wrap a:hover, #mommenu .menu_collapse_wrap a.active, #mommenu .menu_collapse_wrap a.active span {color: #09afe7;}
#mommenu .menu_collapse_wrap .mainnav {height: auto;float: left;width: 100%;margin: 0;text-align: left;}
#mommenu .menu_collapse_wrap .mainnav li {background: #f8f8f8;list-style-type: none;padding: 0;margin: 0;float: left;width: 100%;display: block;position: relative;}
#mommenu .menu_collapse_wrap .mainnav li.level0:last-child {margin-bottom: 10px;}
#mommenu .menu_collapse_wrap .mainnav li ul.sub {display: none;padding-left: 15px;}
#mommenu .menu_collapse_wrap .mainnav li.active > ul.sub {display: block;}
#mommenu .menu_collapse_wrap .mainnav li a .open-menu {cursor: pointer;float: right;position: absolute;right: 10px;top: 4px;padding: 0 10px;}
#mommenu .menu_collapse_wrap .mainnav li a .open-menu:before {content: "\f067";font-family: 'FontAwesome';font-size: 14px;float:right;}
#mommenu .menu_collapse_wrap .mainnav li.active a .open-menu.active:before {content: "\f068";color: #707070;}
#mommenu .menu_collapse_wrap .collapse {position: relative;height: 0;overflow: hidden;}
#mommenu .menu_collapse_wrap .collapsing {position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}
#mommenu .menu_collapse_wrap .collapse.in {he
- оформление меню всё никак не меняется.. Может я ошибочно полагаю, что именно этот блок css отвечает за верхнее меню?)) Как бы разобраться во всех этих строчках, какая из них за что именно отвечает?
Здравствуйте, найдите в шаблоне HTML
<!-- Меню в шапке -->
			  <ul class="menunav">
				{% FOR menu %}
				  {% FOR header %}
					{% FOR links %}
					  <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					{% ENDFOR %}
				  {% ENDFOR %}
				{% ENDFOR %}
			  </ul>
			  {% ENDIF %}
			</div>
			<div id="mommenu" class="menu-collapse">

Замените на
<!-- Меню в шапке -->
			  <ul class="menunav">
				{% FOR menu %}
				  {% FOR header %}
					{% FOR links %}
					  <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					{% ENDFOR %}
				  {% ENDFOR %}
				{% ENDFOR %}
				 <li><a href="ссылка на страницу перехода" title="название основного пункта меню">название основного пункта меню</a>
				  <ul class="dopmenu">
				{% FOR menu %}
				  {% FOR header2 %}
					{% FOR links %}
					  <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
					{% ENDFOR %}
				  {% ENDFOR %}
				{% ENDFOR %}
			  
				</ul>
				</li>
			  </ul>
			  {% ENDIF %}
			</div>
			<div id="mommenu" class="menu-collapse">

где впишите название основного пункта и вставьте ссылку на страницу, если требуется.
далее добавьте в конец файла main.css код
#custommenu ul.menunav .dopmenu li a {
	color: #fff;
}
#custommenu ul.menunav li:hover ul.dopmenu {
	display: block;
}
.dopmenu {
	position: absolute;
	z-index: 99;
	background: #09afe7;
	display: none;
}

в разделе Сайт-Меню необходимо создать меню с переменной {menu.header2}
Обратно в Изменение общей стилистики


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

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

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