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


Меню И Плагин Боковых Колонок

Автор Stas_Y, 20 авг. 2015 22:17

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

#1 Stas_Y

Stas_Y

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

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

Отправлено 20 Август 2015 - 22:17

Доброй ночи! Скажите можно ли привязать к строке меню вот такой плагин http://plugins.adchsm.me/slidebars/

#2 Stas_Y

Stas_Y

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

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

Отправлено 21 Август 2015 - 18:08

Ребятаа) кто подскажет?!

#3 Vaccina

Vaccina

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

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

Отправлено 22 Август 2015 - 02:23

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

#4 Stas_Y

Stas_Y

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

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

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

Для аккаунта sl-355094) И как раз вопрос. Мы с вами видео фон там попутно делаем на главной. Скажите а можно это все сделать для мобильной версии? для любых разрешений?

#5 Stas_Y

Stas_Y

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

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

Отправлено 22 Август 2015 - 09:28

Ответьте пожалуйста это очень важно)

#6 Stas_Y

Stas_Y

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

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

Отправлено 23 Август 2015 - 11:52

Ребята как реализовать данное меню?

#7 Stas_Y

Stas_Y

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

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

Отправлено 26 Август 2015 - 21:53

Администраторы, как реализовать данное меню????

#8 Stas_Y

Stas_Y

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

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

Отправлено 27 Август 2015 - 06:55

АУУУУУУУУ

#9 Stas_Y

Stas_Y

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

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

Отправлено 28 Август 2015 - 11:50

Вопрос все еще актуален!)

#10 Vaccina

Vaccina

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

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

Отправлено 01 Сентябрь 2015 - 02:07

Загрузите файлы slidebars.css и slidebars.js в Редактор шаблонов

В шаблоне HTML найдите:
<!-- Скрипты магазина -->
после нее вставьте:
<script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom_fancybox-1.3.4.version2.min.js"></script>

далее после:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js?design=orange"></script>

вставьте:
<script type="text/javascript" src="{ASSETS_JS_PATH}slidebars.js?design=orange"></script>

а после:
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}main.css?design=orange">

вставьте:
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}slidebars.css?design=orange">


далее найдите:
<body id="bd">
	<div id="yt_wrapper">

замените на:
<body id="bd">
<div id="sb-site">
	<div id="yt_wrapper">

далее найдите:
</div>
  </body>

замените на:
</div></div>
<div class="sb-slidebar sb-left">
		  <!-- Your left Slidebar content. -->
		  <ul class="sb-menu">
					  {% 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>
	<script>
		  (function($) {
				$(document).ready(function() {
					$.slidebars();
				});
			}) (jQuery);
		</script>
  </body>

далее найдите:
<!-- Основное меню -->
			  <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">
				<div class="top-navbar">
				  <button type="button" class="button-navbar two btn-top-navbar" data-toggle="collapse" data-target=".top-navbar .navbar-collapse">
					<span class="text">Меню</span>
				  </button>
				  <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>
			  </div>

замените на:
<!-- Основное меню -->
			  <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">
				<div class="top-navbar">
				  <div class="navbar-collapse collapse">
					 <ul class="top-navbar-links">
					  <li><a class="sb-toggle-left">меню</a></li>
					</ul>
				  </div>
				</div>
			  </div>

далее в конец slidebars.css пропишем:
.sb-menu li {
	width: 100%;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sb-left .sb-menu li a {
	border-left: 3px solid transparent;
}
.sb-menu li a {
	width: 100%;
	display: inline-block;
	padding: 1em;
	color: #F2F2F2;
}

#11 Stas_Y

Stas_Y

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

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

Отправлено 01 Сентябрь 2015 - 05:02

Спасибо вам большое), но пока из-за долгого ожидания, изменил решения по "меню".  Актуальна другая тема http://forum.storela...pic/20864-меню/ первый пост!!!

P/S но  не огорчайтесь)) ваши труды не напрасны, я использую данный метод для второго сайта))

#12 Stas_Y

Stas_Y

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

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

Отправлено 07 Сентябрь 2015 - 18:11

ДД! Я в конечном итоге понял что мне просто необходимо вот такое меню!https://www.instacar...omotions/nestle

Помогите! сделать

В приложении я выложил подобное исполнение, Источник вот https://github.com/k...jQuery-menu-aim


Думаю по сути они связаны, может вам будет проще разобраться

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

  • Безымянный.jpg

#13 Stas_Y

Stas_Y

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

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

Отправлено 07 Сентябрь 2015 - 19:46

СРОЧНААЯ ТЕМА!!!!! Администраторы вы где??????

#14 Vaccina

Vaccina

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

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

Отправлено 08 Сентябрь 2015 - 03:21

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

#15 Stas_Y

Stas_Y

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

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

Отправлено 08 Сентябрь 2015 - 07:07

Будет кнопка Каталог, при нажатии на нее открывается вертикальный список, у некоторых пунктов будет второй уровень. в принципе вот так) если можно проще то пожалуйста, мне сама система нужна такая.
P/S amazon.com там в каждом пункте выводится картинка на фоне. Так возможно?

#16 Stas_Y

Stas_Y

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

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

Отправлено 08 Сентябрь 2015 - 08:10

В приложении высылаю конечный вид шапки))) нужно точь в точь (по стилистике) и расположению

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

  • 11.jpg

#17 Vaccina

Vaccina

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

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

Отправлено 09 Сентябрь 2015 - 00:40

Изменений необходимо много, будем идти постепенно =)
Сразу вопрос, что делать с выпадающим меню, что мы недавно реализовали? Его удалить?

В шаблоне HTML найдите:
<!-- Логотип -->
												 <div class="logo col-lg-3 col-md-2 col-xs-12">
															 <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">								
																 <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}logo.png?design=orange">																													
															 </a>
												 </div>

после него пропишите:
<!-- Адрес -->
												 <div class="adres col-lg-3 col-md-2 col-xs-12">
															 здесь прописываем адрес
												 </div>

Далее найдите:
<!-- Корзина и Поиск -->
			 <div class="header-top-right col-lg-3 col-md-3 col-sm-6 col-xs-12">
			 <!-- Поиск -->
			 <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
			 <div class="form-search">
				 <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
				 <button type="submit" title="Искать" class="button search-submit"></button>
			 </div>
			 </form>
			 <div class="header-right-mobile">
	 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
				 <div class="form-search">
				 <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
				 <button type="submit" title="Искать" class="button search-submit"></button>
				 </div>
			 </form>			
			 <!-- Корзина -->
			 <div class="block mini-cartpro sm-cartpro cart-header">
				 <div class="block-title cart-count-block">
				 {% IF cart_count_empty %}
					 <span class="empty">Корзина пуста</span>
				 {% ELSE %}
					 <span class="not-empty"><a href="{CART_URL}"><span class="cart-count">{CART_COUNT_TOTAL}</span> товар{CART_COUNT_TOTAL| gen_word_end("","а","ов")}</a></span>
					 <span class="empty" style="display:none;">Корзина пуста</span>
				 {% ENDIF %}
				 </div>
	 <!-- Выпадающая корзина-->
								 <div class="block-content dropdown-cart" {% IF MOD_LNAME = cart %}style="display:none;"{% ENDIF %}>
									 <div class="block-inner" {% IF cart_count_empty %}style="display:none;"{% ENDIF %}>
										 <ul id="cart-sidebar" class="mini-products-list">
											 {% FOR cart_items %}
											 <li class="cart-item">
												 <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}" class="product-image"><img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=orange{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon"></a>
												 <a href="{cart_items.GOODS_URL}" class="product-name">{cart_items.GOODS_NAME}</a>
												 <span class="price" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span>
												 <span class="title-qty">Количество: <span class="qty-val">{cart_items.ORDER_LINE_QUANTITY}</span></span>
												 <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="product-remove"></a>
											 </li>
											 {% ENDFOR %}
		 <li class="bottom-action actions cart-item">
											 <a class="button btn-gotocart remove-products" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}"></a>
											 <a class="button btn-checkout" title="Перейти к оформлению заказа" href="{CART_URL}"></a>
											 <div class="summary">
												 {% FOR cart_sum %}
												 <span class="subtotal">
													 <span class="label-total">Итого:</span> <span class="total-sum">{cart_sum.NOW_WITH_DELIVERY_AND_DISCOUNT | money_format}</span>
												 </span>
												 {% ENDFOR %}
											 </div>
										 </li>
										 </ul>
									 </div>
								 </div>
								 <!-- /END Выпадающая корзина-->
			 </div>
			 <!-- /END Корзина -->
		
			 </div>
			 </div>

замените на:
<!-- Телефоны и Поиск -->
			 <div class="header-top-right col-lg-6 col-md-3 col-sm-6 col-xs-12">
			 <!-- Поиск -->
			 <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
			 <div class="form-search">
				 <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
				 <button type="submit" title="Искать" class="button search-submit"></button>
			 </div>
			 </form>
			 <div class="header-right-mobile">
	 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
				 <div class="form-search">
				 <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
				 <button type="submit" title="Искать" class="button search-submit"></button>
				 </div>
			 </form>			
			 </div>
	 <div class="contacts">
	 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</p>{% ENDIF %}
				 {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</p>{% ENDIF %}
				 {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</p>{% ENDIF %}
				 {% IF SETTINGS_STORE_WORK_TIME %}<p>Время работы : {SETTINGS_STORE_WORK_TIME}</p>{% ENDIF %}
				 {% IF SETTINGS_STORE_EMAIL_MAIN %}<p>Email : <a href="{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></p>{% ENDIF %}
				 {% IF SETTINGS_STORE_SKYPE %}<p>Skype : {SETTINGS_STORE_SKYPE}</p>{% ENDIF %}
				 {% IF SETTINGS_STORE_ICQ %}<p>ICQ : {SETTINGS_STORE_ICQ}</p>{% ENDIF %}
	
	 </div>
			 </div>

далее в main.css найдите:
/* Поиск */
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 50px;border-left: 1px solid #f2f2f2;position: relative;background-color: #f79242;}
.header-top .header-top-right #search_mini_form .form-search {opacity: 0;filter: alpha(opacity = 0);visibility: hidden;position: absolute;top: 0;right: 0;height: 50px;z-index: 1;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 52px;height: 50px;cursor:pointer;}
.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 50px;border: 7px solid transparent;border-color: #f79242;width: 50px;font-size: 100%;}
.header-top .header-top-right #search_mini_form:hover .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;}
.header-top .header-top-right #search_mini_form:hover .form-search #search {width: 200px;}
замените на:
/* Поиск */
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 50px;border-left: 1px solid #f2f2f2;position: relative;background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;position: absolute;top: 0;right: 0;height: 50px;}
.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 11px 12px;width: 52px;height: 50px;cursor:pointer;}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 50px;border: 7px solid transparent;border-color: #f79242;width: 200px;font-size: 100%;}

#18 Stas_Y

Stas_Y

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

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

Отправлено 09 Сентябрь 2015 - 05:28

Сделал все!
Да)) его удалите пожалуйста

#19 Vaccina

Vaccina

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

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

Отправлено 09 Сентябрь 2015 - 05:31

Для этого в шаблоне HTML найдите и удалите:
<!-- Каталог с подкатегориями -->
								<div class="yt-menu">
								  <div class="yt-menu-nav">
										<ul id="nav" class="clearfix">
		   <li class="category-level-0 parent">
												<a href="#" class="lvl-0 ">Цветы</a>
												<ul class="sub  dropdown-menu">										 
				{% FOR menu %}
												   {% FOR header2 %}
														{% FOR links %}
														  <li class="category-level-1 "><a href="{menu.header2.links.URL}" class="lvl-1" {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
														{% ENDFOR %}
												   {% ENDFOR %}
												  {% ENDFOR %}
		  </ul>
		   </li>
										  <li class="category-level-0 parent">
												<a href="#" class="lvl-0 ">Букеты</a>
												<ul class="sub  dropdown-menu">										 
				{% FOR menu %}
												   {% FOR header3 %}
														{% FOR links %}
														  <li class="category-level-1 "><a href="{menu.header3.links.URL}" class="lvl-1" {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li>
														{% ENDFOR %}
												   {% ENDFOR %}
												  {% ENDFOR %}
		  </ul>
		   </li>  
		   <li class="category-level-0 parent">
												<a href="#" class="lvl-0 ">О нас</a>
												<ul class="sub  dropdown-menu">										 
				{% FOR menu %}
												   {% FOR header4 %}
														{% FOR links %}
														  <li class="category-level-1 "><a href="{menu.header4.links.URL}" class="lvl-1" {% IF menu.header4.links.TITLE %}title="{menu.header4.links.TITLE}"{% ENDIF %}>{menu.header4.links.NAME}</a></li>
														{% ENDFOR %}
												   {% ENDFOR %}
												  {% ENDFOR %}
		  </ul>
		   </li>
		   <li class="category-level-0 parent">
												<a href="#" class="lvl-0 ">Кому</a>
												<ul class="sub  dropdown-menu">										 
				{% FOR menu %}
												   {% FOR header5 %}
														{% FOR links %}
														  <li class="category-level-1 "><a href="{menu.header5.links.URL}" class="lvl-1" {% IF menu.header5.links.TITLE %}title="{menu.header5.links.TITLE}"{% ENDIF %}>{menu.header5.links.NAME}</a></li>
														{% ENDFOR %}
												   {% ENDFOR %}
												  {% ENDFOR %}
		  </ul>
		   </li>
										  <li class="category-level-0 parent">
												<a href="#" class="lvl-0 ">Повод</a>
												<ul class="sub  dropdown-menu">										 
				{% FOR menu %}
												   {% FOR header6 %}
														{% FOR links %}
														  <li class="category-level-1 "><a href="{menu.header6.links.URL}" class="lvl-1" {% IF menu.header6.links.TITLE %}title="{menu.header6.links.TITLE}"{% ENDIF %}>{menu.header6.links.NAME}</a></li>
														{% ENDFOR %}
												   {% ENDFOR %}
												  {% ENDFOR %}
		  </ul>
		   </li>		 
		 </ul>
								  </div>
								</div>
								<!-- /END Каталог с подкатегориями -->

#20 Stas_Y

Stas_Y

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

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

Отправлено 09 Сентябрь 2015 - 05:39

Готово)
Обратно в Изменение общей стилистики


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

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

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