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


Опустить Меню Ниже


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

#1 niko1a

niko1a

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

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

Отправлено 09 Февраль 2015 - 23:35

Здравствуйте. помогите, пожалуйста опустить меню (Главная / О нас / покупателям и т.д.) вниз, между серым полем и кнопкой "Каталог товаров".
Если это возможно: Хотелось бы что бы пункты меню были кнопками.
Нормально ли будет отображаться подобное меню на мобильных устройствах и в ИЕ?
Заранее спасибо.

#2 Vaccina

Vaccina

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

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

Отправлено 10 Февраль 2015 - 01:04

В main.css найдите:
.mainmenu .menu{display:block;width: 700px;overflow:hidden;padding:20px 5px 0 5px;float:left;}
.mainmenu.index .menu{padding:30px 0 0 160px;}
.mainmenu ul li{position:relative;list-style:none;float:left;padding:10px 0px;margin:0 10px 0 0;}
.mainmenu ul li a{padding:10px;z-index: 500;font-weight:bold;color:white;position:relative;}
.mainmenu ul li:hover:after{width:100%;}
.mainmenu ul li.selected:hover:after{width:0;}
.mainmenu ul li a:hover{color:#DF747A;}
.mainmenu ul li a:after{box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-moz-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-webkit-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
content:' ';position:absolute;width:0;height:30px;background:white;transform:skew(-20deg);z-index:-1;left:0;top:7px;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-moz-transition:all 0.35s ease;-o-transition:all 0.35s ease;-ms-transition:all 0.35s ease;}
.mainmenu ul li a:hover:after{width:100%;}
.mainmenu ul li a.selected{color:#DF747A;}
.mainmenu ul li a.selected:after{box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-moz-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-webkit-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
content:' ';position:absolute;width:100%;height:30px;background:white;transform:skew(-20deg);z-index:-1;left:0;top:7px;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-moz-transition:all 0.35s ease;-o-transition:all 0.35s ease;-ms-transition:all 0.35s ease;}

замените на:
.menu{display:block;width: 700px;overflow:hidden;padding:20px 5px 0 5px;float:left;}
.menu{padding:30px 0 0 160px;}
.menu li{position:relative;list-style:none;float:left;padding:10px 0px;margin:0 10px 0 0;}
.menu li a{padding:10px;z-index: 500;font-weight:bold;color:white;position:relative;}
.menu li:hover:after{width:100%;}
.menu li.selected:hover:after{width:0;}
.menu li a:hover{color:#DF747A;}
.menu li a:after{box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-moz-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-webkit-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
content:' ';position:absolute;width:0;height:30px;background:white;transform:skew(-20deg);z-index:-1;left:0;top:7px;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-moz-transition:all 0.35s ease;-o-transition:all 0.35s ease;-ms-transition:all 0.35s ease;}
.menu li a:hover:after{width:100%;}
.menu li a.selected{color:#DF747A;}
.menu li a.selected:after{box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-moz-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
-webkit-box-shadow: 3px 3px 0 rgba(153, 153, 153, 0.2);
transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
content:' ';position:absolute;width:100%;height:30px;background:white;transform:skew(-20deg);z-index:-1;left:0;top:7px;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-moz-transition:all 0.35s ease;-o-transition:all 0.35s ease;-ms-transition:all 0.35s ease;}

далее в шаблоне HTML найдите:
<ul class="menu">	
			{% FOR menu %}
		 {% FOR header %}
		   {% FOR links %}
				   <li class="{% IF menu.header.links.SELECTED %}selected{%ENDIF%}"><a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}"  {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
			 {% ENDFOR %}
		   {% ENDFOR %}
		 {% ENDFOR %}
	   
	  </ul>

перенесите его, расположив после:
<noscript>
		<div class="noscript">
		  <div class="noscript-inner">
			<p><strong>Мы заметили что у Вас выключен JavaScript.</strong></p>
			<p>Необходимо включить его для корректной работы сайта.</p>
		  </div>
		</div>
	  </noscript>

также после перенесенного кода меню вставьте:
<div class="clear"></div>


#3 niko1a

niko1a

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

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

Отправлено 10 Февраль 2015 - 21:46

После внесения изменений на сайте все поехало.
Помогите, пожалуйста.
imsleep.ru
Аккаунт SL-328526

#4 Vaccina

Vaccina

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

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

Отправлено 11 Февраль 2015 - 00:11

Восстановите бэк ап в разделе Редактор шаблонов и повторите изменения, "поехать" сайт не должен, проверялось на стандартном коде шаблона Шоколад. Судя по результату у вас нарушен синтаксис.




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

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