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


Меню


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

#1 Janna_Brauer

Janna_Brauer

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

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

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

Необходимо создать блок меню со ссылками на статьи, вход и парой внешних.
HTML - вариант ссылок отвратительно отображается в мобильной версии, поэтому прошу помощи.
сайт http://opt-altamar.ru
на скрине меню обозначено так, как оно должно выглядеть после внесения изменений
http://savepic.su/6800976.png

#2 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

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

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

Необходимо создать блок меню со ссылками на статьи, вход и парой внешних.
HTML - вариант ссылок отвратительно отображается в мобильной версии, поэтому прошу помощи.
сайт http://opt-altamar.ru
на скрине меню обозначено так, как оно должно выглядеть после внесения изменений
http://savepic.su/6800976.png


Здравствуйте, каким образом должны выглядеть эти ссылки в мобильной версии?

#3 Janna_Brauer

Janna_Brauer

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

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

Отправлено 17 Декабрь 2015 - 17:48

Просмотр сообщенияЮля123 (17 Декабрь 2015 - 16:41) писал:

Здравствуйте, каким образом должны выглядеть эти ссылки в мобильной версии?
аналогично как выглядят ссылки на каталоги товаров

#4 Janna_Brauer

Janna_Brauer

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

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

Отправлено 18 Декабрь 2015 - 18:34

Создала новое меню со всеми необходимыми ссылками, как понимаю, теперь его надо в html или css шаблонах вывести на страницы?

#5 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 18 Декабрь 2015 - 19:02

Просмотр сообщенияJanna_Brauer (18 Декабрь 2015 - 18:34) писал:

Создала новое меню со всеми необходимыми ссылками, как понимаю, теперь его надо в html или css шаблонах вывести на страницы?


Можно просто стилизовать те ссылки, что у Вас есть. Создайте бэкап перед выполнением инструкции. Затем В шаблоне HTML найдите код:


<!--Пять кнопок под меню-->
				   <div class="three_buttons">
				   <a href="http://spektr2.storeland.ru/page/Sotrudnichestvo-opt"><button>Сотрудничество - опт</button></a>
				   <a href="http://spektr2.storeland.ru/page/dostavka-oplata"><button>Доставка и оплата</button></a>
				   <a href="http://hanaltai.ru"><button>Купить в розницу</button></a>
				   <a href="http://spektr2.storeland.ru/user/register"><button>вход / регистрация</button></a>
				   <a href="https://translate.google.ru/translate?sl=ru&tl=en&js=y&prev=_t&hl=ru&ie=UTF-8&u=http%3A%2F%2Fspektr2.storeland.ru%2F&edit-text="><button>english</button></a>
				  
				 
				  </div>
			  <!--END Пять кнопок под меню-->

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

<!--Пять кнопок под меню-->
				   <div class="three_buttons">
				   <a href="http://spektr2.storeland.ru/page/Sotrudnichestvo-opt"><button>Сотрудничество - опт</button></a>
				   <a href="http://spektr2.storeland.ru/page/dostavka-oplata"><button>Доставка и оплата</button></a>
				   <a href="http://hanaltai.ru"><button>Купить в розницу</button></a>
				   <a href="http://spektr2.storeland.ru/user/register"><button>вход / регистрация</button></a>
				   <a href="https://translate.google.ru/translate?sl=ru&tl=en&js=y&prev=_t&hl=ru&ie=UTF-8&u=http%3A%2F%2Fspektr2.storeland.ru%2F&edit-text="><button>english</button></a>
				  </div>
				   <div id="mommenu" class="menu-offcanvas">
				<span class="btn-navbar"> <i class="fa fa-align-justify" title="Инфо"></i> <span class="overlay"></span></span>
				<div id="menu_offcanvas" class="offcanvas">
				  <div class="canvas-title">
					<i class="fa fa-bars"></i>
					<span class="title">Инфо</span>
					<i class="fa fa-times"></i>
				  </div>
				  <ul class="mainnav">
					  <li> <a href="http://spektr2.storeland.ru/page/Sotrudnichestvo-opt"><button>Сотрудничество - опт</button></a></li>
					   <li><a href="http://spektr2.storeland.ru/page/dostavka-oplata"><button>Доставка и оплата</button></a></li>
					   <li><a href="http://hanaltai.ru"><button>Купить в розницу</button></a></li>
					   <li><a href="http://spektr2.storeland.ru/user/register"><button>вход / регистрация</button></a></li>
					   <li><a href="https://translate.google.ru/translate?sl=ru&tl=en&js=y&prev=_t&hl=ru&ie=UTF-8&u=http%3A%2F%2Fspektr2.storeland.ru%2F&edit-text="><button>english</button></a></li>
				  </ul>
				</div>
			  </div>
			  <!--END Пять кнопок под меню-->


в main.css после кода:

@media all and (max-width: 767px) {

добавьте код:

.three_buttons {display:none;}


#6 Janna_Brauer

Janna_Brauer

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

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

Отправлено 19 Декабрь 2015 - 07:26

Наверное, мы немного не поняли друг друга)
Мне не столь важен стиль ссылок, сколько их целесообразность. сейчас на сайте вход/регистрация ссылка постоянная, выводится даже залогиненным пользователям, а мне необходимо, чтобы при осуществлении входа она заменялась на выход соответственно. Поэтому целесообразнее будет прописать в код страницы уже созданное меню
http://savepic.su/6834546.png

#7 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 20 Декабрь 2015 - 09:59

Просмотр сообщенияJanna_Brauer (19 Декабрь 2015 - 07:26) писал:

Наверное, мы немного не поняли друг друга)
Мне не столь важен стиль ссылок, сколько их целесообразность. сейчас на сайте вход/регистрация ссылка постоянная, выводится даже залогиненным пользователям, а мне необходимо, чтобы при осуществлении входа она заменялась на выход соответственно. Поэтому целесообразнее будет прописать в код страницы уже созданное меню
http://savepic.su/6834546.png
Здравствуйте.
В шаблоне html найдите код
<!--Пять кнопок под меню-->
				 <div class="three_buttons">
				 <a href="http://spektr2.storeland.ru/page/Sotrudnichestvo-opt"><button>Сотрудничество - опт</button></a>
				 <a href="http://spektr2.storeland.ru/page/dostavka-oplata"><button>Доставка и оплата</button></a>
				 <a href="http://hanaltai.ru"><button>Купить в розницу</button></a>
				 <a href="http://spektr2.storeland.ru/user/register"><button>вход / регистрация</button></a>
				 <a href="https://translate.google.ru/translate?sl=ru&tl=en&js=y&prev=_t&hl=ru&ie=UTF-8&u=http%3A%2F%2Fspektr2.storeland.ru%2F&edit-text="><button>english</button></a>
				
				
				 </div>
			 <!--END Пять кнопок под меню-->
и замените на
<!--Пять кнопок под меню-->
				 <div class="three_buttons">
				 <a href="http://spektr2.storeland.ru/page/Sotrudnichestvo-opt"><button>Сотрудничество - опт</button></a>
				 <a href="http://spektr2.storeland.ru/page/dostavka-oplata"><button>Доставка и оплата</button></a>
				 <a href="http://hanaltai.ru"><button>Купить в розницу</button></a>
				 {% IFNOT CLIENT_IS_LOGIN %}
<a href="http://spektr2.storeland.ru/user/register"><button>вход / регистрация</button></a>
{% ELSE %}
<a href="{USER_SETTINGS_URL}" title="Личный кабинет"><button>Мой кабинет</a></button></li>
<a href="{USER_LOGOUT_URL}" title="Выход"><button>Выход</button></a>
{% ENDIF %}
				 <a href="https://translate.google.ru/translate?sl=ru&tl=en&js=y&prev=_t&hl=ru&ie=UTF-8&u=http%3A%2F%2Fspektr2.storeland.ru%2F&edit-text="><button>english</button></a>
				 </div>
			 <!--END Пять кнопок под меню-->
После указанных изменений, авторизованный пользователь будет видеть в верхнем меню "Выход" и "Мой кабинет"

#8 Janna_Brauer

Janna_Brauer

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

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

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

Все отлично, благодарю вас!

но возможно ли добавить пару ссылок к каталогу, например страницу http://opt-altamar.ru/page/Video наверх, после ссылки на рекламную продукцию?

#9 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

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

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

Все отлично, благодарю вас!

но возможно ли добавить пару ссылок к каталогу, например страницу http://opt-altamar.ru/page/Video наверх, после ссылки на рекламную продукцию?
В конец main.css добавьте
li.level0 ul .none {
	display: none !Important;
}
В шаблоне html найдите код
<ul class="mainnav">
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
<li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></a>
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
{%ENDFOR%}
{%ENDIF%}
и замените на
<ul class="mainnav">
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
<li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></a>
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.LAST %}{%FOR out%}
<li class="level0 none"><a href="Ссылка на страницу">Название ссылки</a></li>
<li class="level0 none"><a href="Ссылка на страницу">Название ссылки</a></li>
</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
{%ENDFOR%}
{%ENDIF%}
замените текст в коде "Ссылка на страницу" и "Название ссылки" на соответствующие элементы.

#10 Janna_Brauer

Janna_Brauer

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

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

Отправлено 21 Декабрь 2015 - 08:35

Спасибо!!

#11 3796

3796

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

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 24 Январь 2016 - 01:26

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

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

  • Iu3W9va.png


#12 3796

3796

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

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 24 Январь 2016 - 15:45

Кто-нибудь поможет?

#13 MikDark

MikDark

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

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

Отправлено 24 Январь 2016 - 16:56

Просмотр сообщенияSilver-Pegas (24 Январь 2016 - 15:45) писал:

Кто-нибудь поможет?

Здравствуйте. Попробуйте в шаблоне HTML заменить код:
<ul class="mainnav">
				  {%IFNOT catalog_full_empty%}
					{%FOR catalog_full%}
					  {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
						<li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
						  <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></a>
						{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
					  {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
					{%ENDFOR%}
				  {%ENDIF%}
				</ul>

на

<ul class="mainnav">
				  {% FOR menu %}
					{% FOR header %}
					  {% FOR links %}
						<li class="{% IF menu.header.links.SELECTED %}active{% ENDIF %}">
						  <a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}><span>{menu.header.links.NAME}</span></a>
					   </li>
					 {% ENDFOR %}
					{% ENDFOR %}
				  {% ENDFOR %}
				</ul>


#14 3796

3796

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

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 24 Январь 2016 - 18:24

Просмотр сообщенияMikDark (24 Январь 2016 - 16:56) писал:

Здравствуйте. Попробуйте в шаблоне HTML заменить код:
<ul class="mainnav">
				 {%IFNOT catalog_full_empty%}
				 {%FOR catalog_full%}
					 {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
					 <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
						 <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></a>
					 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
					 {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
				 {%ENDFOR%}
				 {%ENDIF%}
			 </ul>

на

<ul class="mainnav">
{% FOR menu %}
{% FOR header %}
{% FOR links %}
					 <li class="{% IF menu.header.links.SELECTED %}active{% ENDIF %}">
						 <a href="{menu.header.links.URL}" class="{% IF menu.header.links.SELECTED %}active{% ENDIF %}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}><span>{menu.header.links.NAME}</span></a>
</li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
			 </ul>

Не получается. Выходит столбиком.

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

  • RzLrKl7.png


#15 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 25 Январь 2016 - 11:34

Просмотр сообщенияSilver-Pegas (24 Январь 2016 - 18:24) писал:

Не получается. Выходит столбиком.

Здравствуйте. После выполнения предыдущей инструкции, попробуйте добавить в конце main.css код:

ul.mainnav li {
display: inline-block;
}


#16 3796

3796

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

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 25 Январь 2016 - 13:26

Просмотр сообщенияЮля123 (25 Январь 2016 - 11:34) писал:

Здравствуйте. После выполнения предыдущей инструкции, попробуйте добавить в конце main.css код:

ul.mainnav li {
display: inline-block;
}

В одну  строку мелким шрифтом.
Можно ли теперь увеличить шрифт и сделать это всё в 2 строки?

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

  • 08TkPF8.png


#17 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 25 Январь 2016 - 16:47

Просмотр сообщенияSilver-Pegas (25 Январь 2016 - 13:26) писал:

В одну  строку мелким шрифтом.
Можно ли теперь увеличить шрифт и сделать это всё в 2 строки?
Здравствуйте.
Пришлите номер аккаунта сайта указанного на скриншоте.

#18 3796

3796

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

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 25 Январь 2016 - 18:26

Просмотр сообщенияDanil (25 Январь 2016 - 16:47) писал:

Здравствуйте.
Пришлите номер аккаунта сайта указанного на скриншоте.

Здравствуйте.  Номер тот, что указан в профиле
SL-367244.
Я сейчас всё вернула. И попробовала сделать как в теме:
http://forum.storela...енения-в-шапке/

Так тоже очень хорошо, но теперь всё сдвинулось вниз.  

Поиск залез под слайдер, лого и каталог тоже выехали за границы.

При этом поиск стал неактивен.

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

  • lMpaMv1.png


#19 3796

3796

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

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 25 Январь 2016 - 20:24

Помогите, пожалуйста. Очень некрасиво стало.

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

  • K7aa37m.png
  • v0sgeWh.png


#20 Vaccina

Vaccina

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

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

Отправлено 26 Январь 2016 - 02:51

Попробуйте следующее, в main.css найдите:
.form-search {
	float: right;
	position: relative;
	padding: 0px 7px;
	line-height: 47px;
}

замените на:
.form-search {
	float: right;
	position: absolute;
	margin: 0px 7px;
	line-height: 47px;
	z-index: 99;
	display: block;
	right: 0;
	top: 55px;
}





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

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