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


Меню Сайта


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

#1 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 15 Июль 2017 - 01:54

Добрый день. Помогите с лева от кнопки меню сделать кнопку Войти в ЛК по аналогии рядом стоящих. иконку можно использовать как иконка меню.
Получается при нажатии на кнопку Войти в ЛК всплывала окно как в других кнопках меню и там была информация для клиента Войти , зарегистрироваться и т п.

#2 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 15 Июль 2017 - 02:03

Помогите всплывающее окно при нажатии сделать чуть уже как на фото во вложении. . + помогите выронить текст пропорционально кнопки и что бы окна открывались с права от иконки и чуть меньше маштабом.
Заранее спасибо

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

  • меню.jpg
  • Контакты.jpg


#3 Vaccina

Vaccina

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

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

Отправлено 15 Июль 2017 - 07:06

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Меню в шапке -->
		  <div class="menu toggle_menu_wrap">
			<a class="toggle_menu icon-align-justify" href="#"><span class="title">Меню</span></a>
			<div class="toggle_menu_cont">
			  <h4 class="title">Меню</h4>
			  <ul class="mainnav" itemscope itemtype="http://schema.org/SiteNavigationElement">
				{% FOR menu %}
				  {% FOR header %}
					{% FOR links %}
					  <li><a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{%ENDIF%} {% IF menu.header.links.NAME = Каталог %}tc{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url"><span>{menu.header.links.NAME}</span></a></li>
					{% ENDFOR %}
				  {% ENDFOR %}
				{% ENDFOR %}
			  </ul>
			</div>
		  </div>
          
          
перед ним вставьте:
<!-- Вход в ЛК -->
		  <div class="menu lk toggle_menu_wrap">
			<a class="toggle_menu icon-align-justify" href="#"><span class="title">Войти в ЛК</span></a>
			<div class="toggle_menu_cont">
			  <h4 class="title">Войти в ЛК</h4>
			  <ul class="mainnav">
			   {% IFNOT CLIENT_IS_LOGIN %}
				<li><a href="{USER_LOGIN_URL}" title="Вход в личный кабинет">Вход</a></li>
				<li><a href="{USER_REGISTER_URL}" title="Регистрация">Регистрация</a></li>
				{% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a href="{COMPARE_URL}" title="Сравнение">Сравнение</a></li>{% ENDIF %}
				{% ELSE %}
				<li><a href="{USER_SETTINGS_URL}" title="Личный кабинет">Мой кабинет</a></li>
				<li><a href="{USER_HISTORY_LIST_URL}" title="История заказов">История</a></li>
				<li><a href="{FAVORITES_URL}" title="Избранные товары">Избранное</a></li>
				{% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a href="{COMPARE_URL}" title="Сравнение">Сравнение</a></li>{% ENDIF %}
				<li><a href="{USER_LOGOUT_URL}" title="Выход">Выход</a></li>
				{% ENDIF %}
			  </ul>
			</div>
		  </div>
          
          
Далее зайдите в main.css - найдите:
#header .toggle_menu_wrap .toggle_menu_cont {display: none;position: absolute;width: 300px;right: -25px;top: -25px;padding: 30px 10px 20px 30px;text-align: left;z-index: -1;background: #fff;-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);}


в данной строке уменьшите значение стиля width.

Уточните пожалуйста на счет пропорционального текста, сейчас текст подпунктов идет ровно под заголовком, куда его необходимо переместить?

#4 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 15 Июль 2017 - 12:12

Просмотр сообщенияVaccina (15 Июль 2017 - 07:06) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Меню в шапке -->
		 <div class="menu toggle_menu_wrap">
		 <a class="toggle_menu icon-align-justify" href="#"><span class="title">Меню</span></a>
		 <div class="toggle_menu_cont">
			 <h4 class="title">Меню</h4>
			 <ul class="mainnav" itemscope itemtype="http://schema.org/SiteNavigationElement">
			 {% FOR menu %}
				 {% FOR header %}
				 {% FOR links %}
					 <li><a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{%ENDIF%} {% IF menu.header.links.NAME = Каталог %}tc{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url"><span>{menu.header.links.NAME}</span></a></li>
				 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
			 </ul>
		 </div>
		 </div>
  
  
перед ним вставьте:
<!-- Вход в ЛК -->
		 <div class="menu lk toggle_menu_wrap">
		 <a class="toggle_menu icon-align-justify" href="#"><span class="title">Войти в ЛК</span></a>
		 <div class="toggle_menu_cont">
			 <h4 class="title">Войти в ЛК</h4>
			 <ul class="mainnav">
			 {% IFNOT CLIENT_IS_LOGIN %}
			 <li><a href="{USER_LOGIN_URL}" title="Вход в личный кабинет">Вход</a></li>
			 <li><a href="{USER_REGISTER_URL}" title="Регистрация">Регистрация</a></li>
			 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a href="{COMPARE_URL}" title="Сравнение">Сравнение</a></li>{% ENDIF %}
			 {% ELSE %}
			 <li><a href="{USER_SETTINGS_URL}" title="Личный кабинет">Мой кабинет</a></li>
			 <li><a href="{USER_HISTORY_LIST_URL}" title="История заказов">История</a></li>
			 <li><a href="{FAVORITES_URL}" title="Избранные товары">Избранное</a></li>
			 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a href="{COMPARE_URL}" title="Сравнение">Сравнение</a></li>{% ENDIF %}
			 <li><a href="{USER_LOGOUT_URL}" title="Выход">Выход</a></li>
			 {% ENDIF %}
			 </ul>
		 </div>
		 </div>
  
  
Далее зайдите в main.css - найдите:
#header .toggle_menu_wrap .toggle_menu_cont {display: none;position: absolute;width: 300px;right: -25px;top: -25px;padding: 30px 10px 20px 30px;text-align: left;z-index: -1;background: #fff;-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);}


в данной строке уменьшите значение стиля width.

Уточните пожалуйста на счет пропорционального текста, сейчас текст подпунктов идет ровно под заголовком, куда его необходимо переместить?
Помогите сделать шапку как на фото. Спасибо.

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

  • Шапка.jpg


#5 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 16 Июль 2017 - 10:57

На эту тему тоже очень нужно ответить. И при этом что бы в мобильнлй версии так же было

#6 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 16 Июль 2017 - 11:28

Просмотр сообщенияbscgroup (15 Июль 2017 - 12:12) писал:

Помогите сделать шапку как на фото. Спасибо.
Выровнял шапку и пункты в файле main.css
@media all and (min-width: 1200px) {
#header .cart .toggle_menu_cont {right: 60px;}
#header .search .toggle_menu_cont {right: 85px;}
#header .header-top .container {	display: flex;	align-items: center;	justify-content: space-around;}
#header .header-top .container > div:first-child {margin-left:auto;}
#header .header-top .container > div:last-child {margin-right:auto;min-width:100px;}
#header .contacts.toggle_menu_wrap {	margin-right: 0;}
#header .logo {	margin:0 auto;}
}

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

  • 16-07-2017 11-26-04.jpg


#7 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 16 Июль 2017 - 13:01

Просмотр сообщенияMr.Nito (16 Июль 2017 - 11:28) писал:

Выровнял шапку и пункты в файле main.css
@media all and (min-width: 1200px) {
#header .cart .toggle_menu_cont {right: 60px;}
#header .search .toggle_menu_cont {right: 85px;}
#header .header-top .container { display: flex; align-items: center; justify-content: space-around;}
#header .header-top .container > div:first-child {margin-left:auto;}
#header .header-top .container > div:last-child {margin-right:auto;min-width:100px;}
#header .contacts.toggle_menu_wrap { margin-right: 0;}
#header .logo { margin:0 auto;}
}
Спасибо

#8 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 19 Июль 2017 - 07:51

Помогите пожалуйста сделать шапку для мобильной версии как на фото с права. (выровнять значки меню в строчку по середине, логотип тоже по середине. Расстановка значков меню такую как на фото) Заранее спасибо

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

  • 1.png


#9 Vaccina

Vaccina

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

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

Отправлено 19 Июль 2017 - 08:46

Здравствуйте.

Не дублируйте пожалуйста вопросы, ответила вам в другой теме по данному вопросу.
http://forum.storela...та/#entry264987

#10 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 19 Июль 2017 - 15:03

Помогите пожалуйста сделать шапку для мобильной версии как на фото . (выровнять значки меню в строчку по середине, логотип тоже по середине. Расстановка значков меню такую как на фото) Заранее спасибо

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

  • 1.png


#11 Vaccina

Vaccina

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

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

Отправлено 20 Июль 2017 - 07:28

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#header .header-top .container > div.contacts.toggle_menu_wrap {
margin-right: 45%;
}

замените на:
#header .header-top .container > div.contacts.toggle_menu_wrap {
margin-right: 35%;
}

Далее найдите:
#header .header-top .container {
padding-top: 60px;
}


замените на:
#header .header-top .container {
padding-top: 0;
line-height: 60px;
}


Далее найдите:
#header .header-top .container > div.logo {
display: inline-block;
position: absolute;
top: 40px;
left: 15px;
right: 15px;
margin: 0;
}


замените на:
#header .header-top .container > div.logo {
display: inline-block;
position: absolute;
top: -5px;
left: 15px;
right: 15px;
margin: 0;
}

Результат:
Скриншот сделанный 2017-07-20 в 11.28.18.png

#12 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 20 Июль 2017 - 07:50

Просмотр сообщенияVaccina (20 Июль 2017 - 07:28) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#header .header-top .container > div.contacts.toggle_menu_wrap {
margin-right: 45%;
}

замените на:
#header .header-top .container > div.contacts.toggle_menu_wrap {
margin-right: 35%;
}

Далее найдите:
#header .header-top .container {
padding-top: 60px;
}


замените на:
#header .header-top .container {
padding-top: 0;
line-height: 60px;
}


Далее найдите:
#header .header-top .container > div.logo {
display: inline-block;
position: absolute;
top: 40px;
left: 15px;
right: 15px;
margin: 0;
}


замените на:
#header .header-top .container > div.logo {
display: inline-block;
position: absolute;
top: -5px;
left: 15px;
right: 15px;
margin: 0;
}

Результат:
Прикрепленный файл Скриншот сделанный 2017-07-20 в 11.28.18.png
Очень хорошо, спасибо большое

#13 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 20 Июль 2017 - 12:07

Помогите шапку в мобильной версии сделать по выше, значки меню и логотип воровнить по середине. Спасибо заранее

#14 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 20 Июль 2017 - 13:55

?

#15 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 20 Июль 2017 - 18:37

Просмотр сообщенияbscgroup (20 Июль 2017 - 12:07) писал:

Помогите шапку в мобильной версии сделать по выше, значки меню и логотип воровнить по середине. Спасибо заранее
Выполнил последний шаг из инструкции выше, а также увеличил размер шапки для мобильного
Код
@media all and (min-width: 375px) and (max-width: 481px) {
  #header {
	padding: 17px 0;
  }
  #header .header-top .container > div.logo {
		top: -10px;
  }
}


#16 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 20 Июль 2017 - 19:15

Просмотр сообщенияMr.Nito (20 Июль 2017 - 18:37) писал:

Выполнил последний шаг из инструкции выше, а также увеличил размер шапки для мобильного
Код
@media all and (min-width: 375px) and (max-width: 481px) {
#header {
padding: 17px 0;
}
#header .header-top .container > div.logo {
	 top: -10px;
}
}
Большое спасибо за быстрый ответ, все гуд

#17 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 23 Июль 2017 - 16:06

При разрешении экрана 1366*768 в шапке расстановка портится. Нужно поправить и сделать как при полной версии. То что поправить выделил красным овалом

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

  • Шапка 1366-768.jpg


#18 metry

metry

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

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

Отправлено 23 Июль 2017 - 19:57

Добрый день. Для внесения изменений в конец кода main.css вставьте:
@media all and (min-width:1200px) {
.menu.lk.toggle_menu_wrap,.m.menu.toggle_menu_wrap, .contacts toggle_menu_wrap,.search.toggle_menu_wrap, .cart.toggle_menu_wrap{width:18%;}
#header .header-top .container > div {margin-left: 1%;}
}


#19 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 23 Июль 2017 - 20:42

Просмотр сообщенияmetry (23 Июль 2017 - 19:57) писал:

Добрый день. Для внесения изменений в конец кода main.css вставьте:
@media all and (min-width:1200px) {
.menu.lk.toggle_menu_wrap,.m.menu.toggle_menu_wrap, .contacts toggle_menu_wrap,.search.toggle_menu_wrap, .cart.toggle_menu_wrap{width:18%;}
#header .header-top .container > div {margin-left: 1%;}
}
К сожалению не исправилось, всё так же((

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

  • Шапка 1366-768.jpg


#20 bscgroup

bscgroup

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

  • Пользователи
  • PipPipPipPip
  • 285 сообщений
  • ГородЕкатеринбург

Отправлено 24 Июль 2017 - 12:05

??????




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

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