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


Новое Выпадающее Меню (Весна)


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

#1 pro_taras

pro_taras

    Пользователь

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

Отправлено 04 Апрель 2015 - 14:15

Аккаунт SL-315271

Помогите реализовать такую идею:

Шаблон Весна. В верхней части сайта над корзиной хочу сделать меню-аккардион (типа как меню каталога).
Заголовок - "выбор региона"
Само меню - это города (Москва, Тула, Тверь и тд.)
Выбор города -  ведет на другой сайт (представительство компании в регионе), т.е. по сути "город" - это ссылка

Скрин прилагаю

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

  • макет для меню.jpg


#2 Ирина345

Ирина345

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

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

Отправлено 04 Апрель 2015 - 15:17

Просмотр сообщенияpro_taras (04 Апрель 2015 - 14:15) писал:

Аккаунт SL-315271

Помогите реализовать такую идею:

Шаблон Весна. В верхней части сайта над корзиной хочу сделать меню-аккардион (типа как меню каталога).
Заголовок - "выбор региона"
Само меню - это города (Москва, Тула, Тверь и тд.)
Выбор города -  ведет на другой сайт (представительство компании в регионе), т.е. по сути "город" - это ссылка

Скрин прилагаю
Здравствуйте,
для начала зайдите в раздел Сайт-Меню и создайте меню, с пунктами меню(городами) и ссылками
Название: Дополнительное
имя переменной: 123

далее найдите в шаблоне HTML

        
  <div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=spring" title="" alt=""></a></div>
			<div id="cart">
после вставьте

	<div class="boxqwe">
			 
			  <div class="box-content qwe">
				<div class="box-category">
				 <ul class="accordion">
				 <li class="parent"><a>Выберите город:</a>
				  <ul class="accordion" style="display: none;">
					{% FOR menu %}
				  {% FOR 123 %}
					{% FOR links %}
				   
				   <li><a href="{menu.123.links.URL}" {% IF menu.123.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.123.links.TITLE %}title="{menu.123.links.TITLE}"{% ENDIF %}>{menu.123.links.NAME}</a></li>
				  
						  {%ENDFOR%}
								 {%ENDFOR%}
										{%ENDFOR%}  </ul></li>
				</ul>
				</div>
			  </div>
			</div>

далее добавьте в конец файла main.css

.box-content.qwe {
  width: 150px;
}
.boxqwe {
  float: right;
  margin-top: 15px;
  padding-left: 14px;
  padding-right: 46px;
  position: relative;
  z-index: 1;
}


#3 pro_taras

pro_taras

    Пользователь

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

Отправлено 04 Апрель 2015 - 15:44

Спасибо! Почти получилось )
Только:
1. теперь основной каталог, который слева, всегда раскрыт, как сделать чтобы он свернулся?
2. Как подвинуть корзину под новое меню с городами, чтобы одно было под другим?

Сообщение отредактировал pro_taras: 04 Апрель 2015 - 16:24


#4 Ирина345

Ирина345

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

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

Отправлено 04 Апрель 2015 - 16:28

Просмотр сообщенияpro_taras (04 Апрель 2015 - 15:44) писал:

Спасибо! Почти получилось )
Только:
1. теперь основной каталог, который слева, всегда раскрыт, как сделать чтобы он свернулся?
2. Как выровнять корзину и новое меню с городами, чтобы одно было под другим?
Найдите в main.css
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {
  
  jQuery("ul.accordion li.parent").each(function(){
	jQuery(this).append('<em class="open-close">&nbsp;</em>');
  }); 

jQuery('ul.accordion').accordion(); 
  
jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});

замените на

// Меню-аккордеон. Каталог
jQuery(document).ready(function () {
  
  jQuery("ul.accordion li.parent").each(function(){
	jQuery(this).append('<em class="open-close">&nbsp;</em>');
  }); 

jQuery('ul.accordion').accordion(); 
  
jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {
  
  jQuery("ul.accordion1 li.parent").each(function(){
	jQuery(this).append('<em class="open-close">&nbsp;</em>');
  }); 
  
jQuery('ul.accordion1').accordion(); 
  
jQuery("ul.accordion1 li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});


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

 <div class="box-content qwe">
								<div class="box-category">
								 <ul class="accordion">
								 <li class="parent"><a>Выберите город:</a>
								  <ul class="accordion" style="display: none;">

замените на
 <div class="box-content qwe">
								<div class="box-category">
								 <ul class="accordion">
								 <li class="parent"><a>Выберите город:</a>
								  <ul class="accordion1" style="display: none;">

далее найдите в main,css

#header #cart .heading {
  float: right;
  margin-top: 55px;
  padding-left: 14px;
  padding-right: 46px;
  position: relative;
  z-index: 1;
}
замените на





#header #cart .heading {
  float: right;
  margin-top: 55px;
  padding-left: 14px;
  padding-right: 46px;
  position: relative;
  z-index: 1;
  margin-right: -162px;
}



#5 pro_taras

pro_taras

    Пользователь

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

Отправлено 04 Апрель 2015 - 17:04

Просмотр сообщенияИрина345 (04 Апрель 2015 - 16:28) писал:

Найдите в main.css
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {

jQuery("ul.accordion li.parent").each(function(){
jQuery(this).append('<em class="open-close">&nbsp;</em>');
});

jQuery('ul.accordion').accordion();

jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});

замените на



// Меню-аккордеон. Каталог
jQuery(document).ready(function () {

jQuery("ul.accordion li.parent").each(function(){
jQuery(this).append('<em class="open-close">&nbsp;</em>');
});

jQuery('ul.accordion').accordion();

jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {

jQuery("ul.accordion1 li.parent").each(function(){
jQuery(this).append('<em class="open-close">&nbsp;</em>');
});

jQuery('ul.accordion1').accordion();

jQuery("ul.accordion1 li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});


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

<div class="box-content qwe">
<div class="box-category">
<ul class="accordion">
<li class="parent"><a>Выберите город:</a>
<ul class="accordion" style="display: none;">

замените на
<div class="box-content qwe">
<div class="box-category">
<ul class="accordion">
<li class="parent"><a>Выберите город:</a>
<ul class="accordion1" style="display: none;">

далее найдите в main,css

#header #cart .heading {
float: right;
margin-top: 55px;
padding-left: 14px;
padding-right: 46px;
position: relative;
z-index: 1;
}
замените на





#header #cart .heading {
float: right;
margin-top: 55px;
padding-left: 14px;
padding-right: 46px;
position: relative;
z-index: 1;
margin-right: -162px;
}


Найдите в main.css
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {
  
  jQuery("ul.accordion li.parent").each(function(){
jQuery(this).append('<em class="open-close">&nbsp;</em>');
  });

jQuery('ul.accordion').accordion();
  
jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});

У меня в main.css нет ничего похожего на jQuery .......

#6 Ирина345

Ирина345

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

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

Отправлено 04 Апрель 2015 - 19:17

Просмотр сообщенияpro_taras (04 Апрель 2015 - 17:04) писал:

Найдите в main.css
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {
  
  jQuery("ul.accordion li.parent").each(function(){
jQuery(this).append('<em class="open-close">&nbsp;</em>');
  });

jQuery('ul.accordion').accordion();
  
jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});

У меня в main.css нет ничего похожего на jQuery .......
Извините данные изменения необходимо было произвести в main.js

#7 pro_taras

pro_taras

    Пользователь

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

Отправлено 05 Апрель 2015 - 13:07

Просмотр сообщенияИрина345 (04 Апрель 2015 - 19:17) писал:

Извините данные изменения необходимо было произвести в main.js

Все получилось! Спасибо!

#8 pro_taras

pro_taras

    Пользователь

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

Отправлено 05 Апрель 2015 - 13:32

Еще момент: можно ли сделать так, чтобы новое меню-аккордеон (которое с городами) при раскрытии вываливалось поверх слайдера, а не сдвигало всю страницу вниз?

#9 Ирина345

Ирина345

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

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

Отправлено 06 Апрель 2015 - 17:18

Просмотр сообщенияpro_taras (05 Апрель 2015 - 13:32) писал:

Еще момент: можно ли сделать так, чтобы новое меню-аккордеон (которое с городами) при раскрытии вываливалось поверх слайдера, а не сдвигало всю страницу вниз?
Здравствуйте, добавьте в конец файла main.css
.accordion1 ul {
  padding: 0 !important;
  margin: 0;
  display: block;
  width: 100%;
  position: absolute;
  overflow: hidden !important;
}


#10 pro_taras

pro_taras

    Пользователь

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

Отправлено 06 Апрель 2015 - 21:43

Просмотр сообщенияИрина345 (06 Апрель 2015 - 17:18) писал:

Здравствуйте, добавьте в конец файла main.css
.accordion1 ul {
padding: 0 !important;
margin: 0;
display: block;
width: 100%;
position: absolute;
overflow: hidden !important;
}

Добавил, ничего не изменилось....

#11 pro_taras

pro_taras

    Пользователь

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

Отправлено 06 Апрель 2015 - 21:58

Просмотр сообщенияpro_taras (06 Апрель 2015 - 21:43) писал:

Добавил, ничего не изменилось....

Разобрался: поменял показатель position: absolute; в параметрах boxqwe

Спасибо

#12 pro_taras

pro_taras

    Пользователь

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

Отправлено 28 Май 2015 - 15:37

Подскажите, пожалуйста, как сделать так чтобы при изменении размеров окна браузера объекты "Корзина" и "меню-аккордеон" с городами, оставались один под другим. В настоящий момент при изменении размера окна корзина перемещается, а меню с городами остается на месте. (скрины прилепил.) Аккаунт SL-31527

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

  • 1.jpg
  • 2.jpg


#13 Cupuyc

Cupuyc

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

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

Отправлено 28 Май 2015 - 17:23

Просмотр сообщенияpro_taras (28 Май 2015 - 15:37) писал:

Подскажите, пожалуйста, как сделать так чтобы при изменении размеров окна браузера объекты "Корзина" и "меню-аккордеон" с городами, оставались один под другим. В настоящий момент при изменении размера окна корзина перемещается, а меню с городами остается на месте. (скрины прилепил.) Аккаунт SL-31527

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
.boxqwe {
  float: right;
  margin-top: -40px;
  margin-left: 927px;
  padding-left: 14px;
  padding-right: 110px;
  position: absolute;
  z-index: 1;
}

Замените его на:
.boxqwe {
  float: right;
  right: -35px;
  top: -41px;
  margin-right: 100px;
  padding-left: 14px;
  padding-right: 46px;
  position: relative;
  z-index: 1;
}


#14 pro_taras

pro_taras

    Пользователь

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

Отправлено 28 Май 2015 - 20:51

Просмотр сообщенияCupuyc (28 Май 2015 - 17:23) писал:

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
.boxqwe {
float: right;
margin-top: -40px;
margin-left: 927px;
padding-left: 14px;
padding-right: 110px;
position: absolute;
z-index: 1;
}

Замените его на:
.boxqwe {
float: right;
right: -35px;
top: -41px;
margin-right: 100px;
padding-left: 14px;
padding-right: 46px;
position: relative;
z-index: 1;
}

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

#15 Cupuyc

Cupuyc

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

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

Отправлено 28 Май 2015 - 21:00

Просмотр сообщенияpro_taras (28 Май 2015 - 20:51) писал:

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

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;}

Замените его на:
.accordion ul {
  padding: 0 !important;
  margin: 0;
  display: block;
  width: 100%;
  position: absolute;
  overflow: hidden !important;
}


#16 pro_taras

pro_taras

    Пользователь

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

Отправлено 28 Май 2015 - 21:16

Просмотр сообщенияCupuyc (28 Май 2015 - 21:00) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;}

Замените его на:
.accordion ul {
padding: 0 !important;
margin: 0;
display: block;
width: 100%;
position: absolute;
overflow: hidden !important;
}
получилось, но меню-аккордеон, которое слева (там где К Вашим услугам:  аренда оборудования, запчасти и тп.) теперь тоже раскрывается без сдвига, а там как раз нужно чтобы оно раскрывалось полностью и сдвигало вниз другие подпункты...

#17 Vaccina

Vaccina

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

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

Отправлено 29 Май 2015 - 02:00

.accordion ul {
padding: 0 !important;
margin: 0;
display: block;
width: 100%;
position: absolute;
overflow: hidden !important;
}

замените на:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;}
.boxqwe .accordion ul {
  position: absolute;
}


#18 pro_taras

pro_taras

    Пользователь

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

Отправлено 29 Май 2015 - 08:44

Просмотр сообщенияVaccina (29 Май 2015 - 02:00) писал:

.accordion ul {
padding: 0 !important;
margin: 0;
display: block;
width: 100%;
position: absolute;
overflow: hidden !important;
}

замените на:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;}
.boxqwe .accordion ul {
position: absolute;
}
Получилось! Спасибо!

#19 pro_taras

pro_taras

    Пользователь

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

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

Аккаунт SL-315271

Помогите видоизменить шапку сайта:

Шаблон Весна.

1) В верхней красной плашке необходимо расположить элементы в таком порядке: "Аренда.Ремонт. Запчасти" - без изменений, рядом "аккордеон" (выбор города), рядом корзина, в конце - "поиск"  (без изменений.) Все расположить в одну линию, размер самой плашки (ее высоту) при этом уменьшить до узкой полоски (как в скрине)

2) В поле, где размещен логотип - добавить 2 текстовых блока - один для рекламного слогана, второй для адреса организации,  Расположить как в скрине


Скрин прилагаю

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

  • макет.jpg


#20 Stasya

Stasya

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

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

Отправлено 05 Сентябрь 2016 - 11:19

Просмотр сообщенияpro_taras (01 Сентябрь 2016 - 19:11) писал:

Аккаунт SL-315271

Помогите видоизменить шапку сайта:

Шаблон Весна.

1) В верхней красной плашке необходимо расположить элементы в таком порядке: "Аренда.Ремонт. Запчасти" - без изменений, рядом "аккордеон" (выбор города), рядом корзина, в конце - "поиск"  (без изменений.) Все расположить в одну линию, размер самой плашки (ее высоту) при этом уменьшить до узкой полоски (как в скрине)

2) В поле, где размещен логотип - добавить 2 текстовых блока - один для рекламного слогана, второй для адреса организации,  Расположить как в скрине


Скрин прилагаю

1) В файле main.css найдите блок
.boxqwe {
float: right;
right: 0px;
top: 0px;
margin-right: 100px;
padding-left: 14px;
padding-right: 46px;
position: relative;
z-index: 1;
}
и замените его на
.boxqwe {
float: left;
left: 15px;
top: 8px;
margin-right: 100px;
padding-left: 14px;
padding-right: 46px;
position: relative;
z-index: 1;
}
Далее блок
#header #welcome {
font-size: 25px;
font-family: 'Ubuntu Condensed';
position: relative;
padding-top: 20px;
}
замените на
#header #welcome {
font-size: 25px;
font-family: 'Ubuntu Condensed';
position: relative;
padding-top: 13px;
float: left;
}
Блок
#header #cart .heading {
float: right;
margin-top: 15px;
margin-right: 100px;
padding-left: 14px;
padding-right: 46px;
position: relative;
z-index: 1;
}
замените на
#header #cart .heading {
float: right;
margin-right: 100px;
padding-left: 14px;
padding-right: 46px;
position: relative;
z-index: 1;
}

Блок
#header #search {
position: relative;
float: right;
top: 9px;
right: 0px;
margin-bottom: 9px;
width: 225px;
z-index: 15;
}
замените на
#header #search {
position: relative;
float: right;
top: 3px;
right: 0px;
margin-bottom: 9px;
width: 225px;
z-index: 15;
}
И блок
#header_colapse .inner {
padding: 0 0 10px;
z-index: 0;
position: relative;
background: url('http://design.smstehno.ru/inner_shadow.png?design=spring') 50% 0px no-repeat !important;
z-index: 1000;
}
замените на
#header_colapse .inner {
padding: 0;
z-index: 0;
position: relative;
background: url('http://design.smstehno.ru/inner_shadow.png?design=spring') 50% 0px no-repeat !important;
z-index: 1000;
}

2) В шаблоне HTML находим строку
<div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=spring" title="" alt=""></a></div>
и сразу после нее вставляем
<div class ="sloganFirm">Сюда текст для слогана фирмы</div>
		 <div class ="adressFirm">Сюда адрес фирмы</div>
Здесь текст замените на Ваш.
Теперь в самый конец main.css вставляем блок
.sloganFirm{float:left;width:25%;}
.adressFirm{float:right;width:25%;}





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

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