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


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

осень меню

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

#1 Dmitri

Dmitri

    Новичок

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

Отправлено 10 Декабрь 2015 - 15:16

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

#2 Юля123

Юля123

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

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

Отправлено 10 Декабрь 2015 - 16:24

Просмотр сообщенияDmitri (10 Декабрь 2015 - 15:16) писал:

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

Здравствуйте, перед изменениями создайте бэкап. Затем зайдите сайт -> меню.

1) Сначала отредактируем ВЕРХНЕЕ меню. На сколько я Вас понимаю, Вам нужно убрать три пункта, и вместо них добавить один с "выпадением" .

В верхнем меню удалите пункты  "Как сделать заказ", "Оплата и доставка" , а так же "Таблица размеров", чтобы это сделать нажмите справа на крестики:

QIP Shot - Screen 050.png

2) Затем там же создайте дополнительное меню с названием "Выпадающее меню" и переменой header, сверху там же нажмите "Создать блок меню".
QIP Shot - Screen 051.png

3) Затем добавьте пункты меню "Как сделать заказ", "Оплата и доставка" , а так же "Таблица размеров", с ссылками на страницы, что Вам требуется.

4) Далее переходим в Редактор шаблонов - HTML, найдите код:

		<!-- Блок навигации -->
		{% IFNOT menu_empty %}
		  <ul id="megamenu">
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}" >
					<a href="{menu.header.links.URL}" class="root_link" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} >{menu.header.links.NAME}</a>
				  </li>
			  {% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
		  </ul>
		{% ENDIF %}

и замените на код:


<!-- Верхний блок навигации -->
<div class="containerin col-" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
<li><a href="ссылка" title="На главную">Главная</a></li>
<li><a href="ссылка" title="В каталог">Каталог</a></li>
<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></li>
<li><a href="ссылка" title="Корзина">Корзина</a></li>
<li><a href="ссылка" title="Личный кабинет">Войти в ЛК</a></li>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->

Замените "ссылка" на ссылки на соответствующие с страницы.

Далее в конце main.css добавьте код:

#mainmenu{
position:relative;
}
#mainmenu li{
display: block !important;
float: left;
}
#mainmenu li ul {
display: none;
left: 181;
width:200px;
position: absolute;
top: 29px;
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;
}
#mainmenu li a {
	color: white;
	text-decoration: none;
	margin-left: 20px;
	font-size: 16px;
	line-height: 29px;
}


#3 Dmitri

Dmitri

    Новичок

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

Отправлено 11 Декабрь 2015 - 12:22

Здравствуйте, сделал все инструкции то что нужно получилось, осталось пара вопросов

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

2. если не сложно уточните где правятся размер шрифта, фон и цвет выпадающего меню.

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

  • 1.jpg


#4 Ирина345

Ирина345

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

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

Отправлено 11 Декабрь 2015 - 12:52

Просмотр сообщенияDmitri (11 Декабрь 2015 - 12:22) писал:

Здравствуйте, сделал все инструкции то что нужно получилось, осталось пара вопросов

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

2. если не сложно уточните где правятся размер шрифта, фон и цвет выпадающего меню.
Здравствуйте, Найдите в шаблоне hTML
  <!-- Верхний блок навигации -->
<div class="containerin col-" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
<li><a href="http://bmodnitsa.ru/" title="На главную">Главная</a></li>
<li><a href="http://bmodnitsa.ru/catalog" title="В каталог">Каталог</a></li>
<li><a href="http://bmodnitsa.ru/page/help" 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="http://bmodnitsa.ru/page/kontact" title="Контакты">Контакты</a></li>
<li><a href="http://bmodnitsa.ru/cart" title="Корзина">Корзина</a></li>
<li><a href="http://bmodnitsa.ru/user/login" title="Личный кабинет">Войти в ЛК</a></li>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->

и перенесите после строк
	<div class="container">  
	  <div class="column full" id="header">

далее в style.css найдите
#search_block_top{position:static;float:right;margin:26px 10px 0 0}

замените на
#search_block_top{position:static;float:right;margin:2px 10px 0 0}


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

#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}
замените на

#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:2px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}

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

#header #cart_block{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);top:86px;
background:#fcfcfc;width:auto;*border: solid 1px #c0c0c0;}
замените на

#header #cart_block{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);top:44px;
background:#fcfcfc;width:auto;*border: solid 1px #c0c0c0;}
2. Найдите в style.css

#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 a {
		color: white;
		text-decoration: none;
		margin-left: 20px;
		font-size: 16px;
		line-height: 29px;
}
где цвет фона это background:#999;
цвет текста  color: white;
размер шрифта это font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;

#5 Dmitri

Dmitri

    Новичок

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

Отправлено 11 Декабрь 2015 - 16:56

Огромное спасибо, все получилось !

#6 UGIN

UGIN

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

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

Отправлено 30 Август 2016 - 10:13

Добрый день. попытался создать, подобное меню по вышеуказанной инструкции. нозадача немного другая))))
  • перемеенная header, уже используется. как прописать, для другойпеременной.
  • нужно всплывающие меню для двух пунктов : "о компании" и "Услуги"


#7 Vaccina

Vaccina

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

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

Отправлено 31 Август 2016 - 05:51

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

#8 UGIN

UGIN

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

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

Отправлено 01 Сентябрь 2016 - 13:52

Просмотр сообщенияVaccina (31 Август 2016 - 05:51) писал:

В инструкции выше используется переменная header1, можете назвать и по своему просто в коде выше необходимо будет изменить переменную header1 на свою.
здесь расписано, для создания одного всплывающего меню, мне бы для двух пунктов меню)))

#9 Vaccina

Vaccina

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

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

Отправлено 02 Сентябрь 2016 - 04:03

Изменения произвести в этом случае аналогичные, приведу подробный пример на основе вашего шаблона.
Допустим нам необходимо сделать выпадающие пункты "О компании" и "Услуги", в разделе Сайт - Меню - в верхнем меню удаляем оба этих пункта и создаем два новых блока меню с переменными "uslugi" и "company" (переменные указывать без кавычек), в них добавляем необходимые выпадающие пункты.
В шаблоне HTML находим:
<div class="navbar-collapse collapse">
									 <ul class="top-navbar-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 %}
									 </ul>
								 </div>

заменяем на:
<div class="navbar-collapse collapse">
									 <ul class="top-navbar-links">
										 <li><a href="#" title="О компании">О компании</a>
										 <ul>
											 {% FOR menu %}
											 {% FOR company %}
												 {% FOR links %}
													 <li><a href="{menu.company.links.URL}" {% IF menu.company.links.TITLE %}title="{menu.company.links.TITLE}"{% ENDIF %}>{menu.company.links.NAME}</a></li>
												 {% ENDFOR %}
											 {% ENDFOR %}
											 {% ENDFOR %}
										 </ul>
										 </li>
										 <li><a href="#" title="Услуги">Услуги</a>
										 <ul>
											 {% FOR menu %}
											 {% FOR uslugi %}
												 {% FOR links %}
													 <li><a href="{menu.uslugi.links.URL}" {% IF menu.uslugi.links.TITLE %}title="{menu.uslugi.links.TITLE}"{% ENDIF %}>{menu.uslugi.links.NAME}</a></li>
												 {% ENDFOR %}
											 {% ENDFOR %}
											 {% ENDFOR %}
										 </ul>
										 </li>
										 {% 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>

Далее в main.css находим:
.header-top .header-top-left .top-navbar-links {float:left;list-style:none;overflow: hidden;height: 50px;}
.header-top .header-top-left .top-navbar-links li {float: left;border-left: 1px solid #fff;height: 50px;background-repeat: no-repeat;}
.header-top .header-top-left .top-navbar-links li a {padding: 18px 18px 12px 18px;display: block;font-size:115%;}
.header-top .header-top-left .top-navbar-links li:hover {background-color: #1cae5c;}
.header-top .header-top-left .top-navbar-links li:hover a {color: #fff;text-decoration: none;}

заменим на:
.header-top .header-top-left .top-navbar-links {float:left;list-style:none;height: 50px;}
.header-top .header-top-left .top-navbar-links li {position: relative;float: left;border-left: 1px solid #fff;height: 50px;background-repeat: no-repeat;}
.header-top .header-top-left .top-navbar-links li a {padding: 18px 18px 12px 18px;display: block;font-size:115%;}
.header-top .header-top-left .top-navbar-links li:hover {background-color: #1cae5c;}
.header-top .header-top-left .top-navbar-links li:hover a {color: #fff;text-decoration: none;}
.header-top .header-top-left .top-navbar-links li ul {
display: none;
position: absolute;
left: 0;
top: 43.8px;
background: #fff;
width: 150px;
}
.header-top .header-top-left .top-navbar-links li:hover ul {
display: block;
}
.header-top .header-top-left .top-navbar-links li ul li {
list-style: none;
float: none;
width: 100%;
}
.header-top .header-top-left .top-navbar-links li ul li a {
color: #21AE5E;
}
.header-top .header-top-left .top-navbar-links li ul li:hover a {
color: #ffffff;
}

В результате данных изменений получим:
123.png




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

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