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


Сделать Выпадающее Меню Вертикальным

Автор r373760, 07 сент. 2015 20:37

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

#1 r373760

r373760

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

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

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

sl-354973

Подскажите пожалуйста как сделать выпадающее меню вертикальным и чтобы подразделы были разделены чертой?

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

  • WP_20150907_20_27_51_Pro.jpg

#2 Firefly

Firefly

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

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

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

Просмотр сообщенияr373760 (07 Сентябрь 2015 - 20:37) писал:

sl-354973

Подскажите пожалуйста как сделать выпадающее меню вертикальным и чтобы подразделы были разделены чертой?

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}

Замените на:
#custommenu ul.mainnav li.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;width: 25%;}

Найдите код:
#custommenu ul.mainnav li.level1 {list-style: none;width: 25%;float: left;}

Замените на:
#custommenu ul.mainnav li.level1 {list-style: none;/* width: 25%; *//* float: left; */border-bottom: grey 1px solid;}

Найдите код:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;left: 0;background: #dfedad;border-bottom: 2px solid #ffffff;border-top: 2px solid #dfedad;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}

Замените на:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;width:100%;/* left: 0; */background: #dfedad;border-bottom: 2px solid #ffffff;border-top: 2px solid #dfedad;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}

#3 r373760

r373760

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

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

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

отлично, спасибо!
Подскажите еще пожалуйста:

1) убрать телефон в левый край

2) самое верхнее меню сдвинуть в правый край

3) данный блок сдвинуть под телефон(левый край)

4) логотип пусть будет по центру

5) категории каталога сдвинуть в левый край

6) сравнение товаров и корзину сдвинуть в правый край

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

  • WP_20150909_14_01_18_Pro.jpg

#4 Alekseys

Alekseys

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

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

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

Просмотр сообщенияr373760 (09 Сентябрь 2015 - 14:14) писал:

отлично, спасибо!
Подскажите еще пожалуйста:

1) убрать телефон в левый край

2) самое верхнее меню сдвинуть в правый край

3) данный блок сдвинуть под телефон(левый край)

4) логотип пусть будет по центру

5) категории каталога сдвинуть в левый край

6) сравнение товаров и корзину сдвинуть в правый край
Здравствуйте. В main.css замените
.container {width: 1170px}
на
.container {width: 98%;}
затем
#header .header-right {display: block;float: left;}
замените на
#header .header-right {display: block;float: right;width: 485px;}
и
#header #logo {display: block;float: left;margin-left: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
замените на
#header #logo {display: block;float: left;margin-left: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin-left: 30%;}

#5 r373760

r373760

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

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

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

Просмотр сообщенияAlekseys (09 Сентябрь 2015 - 14:28) писал:

Здравствуйте. В main.css замените
.container {width: 1170px}
на
.container {width: 98%;}
затем
#header .header-right {display: block;float: left;}
замените на
#header .header-right {display: block;float: right;width: 485px;}
и
#header #logo {display: block;float: left;margin-left: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
замените на
#header #logo {display: block;float: left;margin-left: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin-left: 30%;}
Спасибо! еще один момент:
как блок "поиск по сайту " и иконки ютюба и т.д сдвинуть вниз, дабы значок "вк" не накрывал его ?

#6 Firefly

Firefly

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

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

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

Просмотр сообщенияr373760 (09 Сентябрь 2015 - 15:24) писал:

Спасибо! еще один момент:
как блок "поиск по сайту " и иконки ютюба и т.д сдвинуть вниз, дабы значок "вк" не накрывал его ?

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
@media only screen and (min-width: 1367px) {
#header .header-right {margin-top: 60px;}
}

#7 r373760

r373760

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

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

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

Просмотр сообщенияFirefly (09 Сентябрь 2015 - 15:43) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
@media only screen and (min-width: 1367px) {
#header .header-right {margin-top: 60px;}
}
Спасибо!

Еще вопрос)
хочу сделать анимированный эффект при наведении курсора на логотип, вот код как и куда мне его вставить?

Примените класс «grow» к вашему элементу и добавьте следующий код к вашим стилям

                                



.grow:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}

#8 Alekseys

Alekseys

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

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

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

Просмотр сообщенияr373760 (09 Сентябрь 2015 - 15:53) писал:

Спасибо!

Еще вопрос)
хочу сделать анимированный эффект при наведении курсора на логотип, вот код как и куда мне его вставить?

Примените класс «grow» к вашему элементу и добавьте следующий код к вашим стилям



.grow:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}

В конец main.css вставьте
#logo a img:hover {
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
}

#9 r373760

r373760

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

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

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

Просмотр сообщенияAlekseys (09 Сентябрь 2015 - 16:40) писал:

В конец main.css вставьте
#logo a img:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Спасибо! в мобильной версии на смартфоне и планшете происходит вот такая ерунда, как исправить?

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

  • WP_20150909_18_34_33_Pro.jpg
  • wp_ss_20150909_0001.jpg

#10 r373760

r373760

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

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

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

Люди ау?

#11 Danil

Danil

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

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

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

Просмотр сообщенияr373760 (11 Сентябрь 2015 - 16:36) писал:

Люди ау?
Здравствуйте.
1 скриншот.
В конец main.css добавьте
@media only screen and (max-width: 1202px) and  (min-width: 980px){
#custommenu ul.mainnav li.level0 {
padding: 10px 0px 10px 0px;
}
#custommenu ul.mainnav li.level0 > a {
padding: 8px 3px;
font-size: 118%;
}
}
2 скриншот.
К сожалению, данной ошибки обнаружить не удалось, попробуйте очистить кэш браузера.

#12 r373760

r373760

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

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

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

Просмотр сообщенияDanil (11 Сентябрь 2015 - 16:54) писал:

Здравствуйте.
1 скриншот.
В конец main.css добавьте
@media only screen and (max-width: 1202px) and  (min-width: 980px){
#custommenu ul.mainnav li.level0 {
padding: 10px 0px 10px 0px;
}
#custommenu ul.mainnav li.level0 > a {
padding: 8px 3px;
font-size: 118%;
}
}
2 скриншот.
К сожалению, данной ошибки обнаружить не удалось, попробуйте очистить кэш браузера.
ничего не изменилось и на 1053, 1061 строках ошибка

#13 Danil

Danil

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

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

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

Просмотр сообщенияr373760 (11 Сентябрь 2015 - 20:03) писал:

ничего не изменилось и на 1053, 1061 строках ошибка
Была допущена ошибка в инструкции, её исправили как в сообщениях, так и у Вас в style.css, проверьте пожалуйста.

#14 r373760

r373760

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

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

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

Да вот теперь лучше стало, но блок с поиском и с соц. иконками по прежнему некрасиво стоит, хотелось бы исправить.

и еще вопросик как в подкатегориях в выпадающем списке белый шрифт изменить?

#15 Danil

Danil

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

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

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

Просмотр сообщенияr373760 (11 Сентябрь 2015 - 20:16) писал:

Да вот теперь лучше стало, но блок с поиском и с соц. иконками по прежнему некрасиво стоит, хотелось бы исправить.

и еще вопросик как в подкатегориях в выпадающем списке белый шрифт изменить?
По поводу поиска и кнопок соц. сетей, то не совсем понятно, как именно они должны отображаться, так как на скриншоте они просто обведены.
В конец main.css добавьте
#custommenu ul.mainnav li a.title-lv2 {
color:#FFF;
}
изменяйте цвет #FFF на свой

#16 r373760

r373760

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

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

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

Просмотр сообщенияDanil (11 Сентябрь 2015 - 20:24) писал:

По поводу поиска и кнопок соц. сетей, то не совсем понятно, как именно они должны отображаться, так как на скриншоте они просто обведены.
В конец main.css добавьте
#custommenu ul.mainnav li a.title-lv2 {
color:#FFF;
}
изменяйте цвет #FFF на свой
ну просто этот блок под логотип залез, давайте так сделаем: удалим иконки соц.сетей, а блок с поиском сместим максимально вправо чтобы он по высоте оказался между "ВК" и корзиной

#17 Firefly

Firefly

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

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

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

Просмотр сообщенияr373760 (11 Сентябрь 2015 - 20:38) писал:

ну просто этот блок под логотип залез, давайте так сделаем: удалим иконки соц.сетей, а блок с поиском сместим максимально вправо чтобы он по высоте оказался между "ВК" и корзиной

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#header .header-right {display: block;float: right;width: 485px;}

Замените на:
#header .header-right {display: block;float: right;width: 255px;padding: 20px 0 10px 0;}

Найдите код:
#header .header-right .header-right-inner .connect-us {list-style: none;float: left;margin: 0 0 5px 25px;padding: 0;}

Замените на:
#header .header-right .header-right-inner .connect-us {list-style: none;float: left;margin: 0 0 5px 25px;padding: 0;display: none;}

Найдите и удалите код:
#header .header-right {margin-top: 60px;}

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
	  <div id="header" class="wrap">
		<div class="container">
		  <div class="row-fluid">
			<!-- Logo -->
			<div id="logo" class="col-xs-4">
			  <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">
				<img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}">
			  </a>
			</div>
			<!-- END: Logo -->
			<div class="header-right col-xs-8">
			  <div class="header-right-inner">
				<ul class="connect-us">
				  <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>
				</ul>
				<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="inputText search-string" placeholder="Поиск по магазину...">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>
			  </div>
			</div>
		  </div>
		</div>
	  </div>

Замените на:
	  <div id="header" class="wrap">
		<div class="container">
		  <div class="row-fluid">
			<!-- Logo -->
			<div id="logo" class="col-xs-4">
			  <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">
				<img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}">
			  </a>
			</div>
			<!-- END: Logo -->
		  </div>
		</div>
			<div class="header-right col-xs-8">
			  <div class="header-right-inner">
				<ul class="connect-us">
				  <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>
				</ul>
				<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="inputText search-string" placeholder="Поиск по магазину...">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>
			  </div>
			</div>
	  </div>

#18 r373760

r373760

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

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

Отправлено 12 Сентябрь 2015 - 23:27

Просмотр сообщенияFirefly (12 Сентябрь 2015 - 10:25) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#header .header-right {display: block;float: right;width: 485px;}

Замените на:
#header .header-right {display: block;float: right;width: 255px;padding: 20px 0 10px 0;}

Найдите код:
#header .header-right .header-right-inner .connect-us {list-style: none;float: left;margin: 0 0 5px 25px;padding: 0;}

Замените на:
#header .header-right .header-right-inner .connect-us {list-style: none;float: left;margin: 0 0 5px 25px;padding: 0;display: none;}

Найдите и удалите код:
#header .header-right {margin-top: 60px;}

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
	 <div id="header" class="wrap">
	 <div class="container">
		 <div class="row-fluid">
		 <!-- Logo -->
		 <div id="logo" class="col-xs-4">
			 <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">
			 <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}">
			 </a>
		 </div>
		 <!-- END: Logo -->
		 <div class="header-right col-xs-8">
			 <div class="header-right-inner">
			 <ul class="connect-us">
				 <li><a href="#" class="fa fa-facebook"></a></li>
				 <li><a href="#" class="fa fa-twitter"></a></li>
				 <li><a href="#" class="fa fa-youtube"></a></li>
				 <li><a href="#" class="fa fa-vk"></a></li>
			 </ul>
			 <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="inputText search-string" placeholder="Поиск по магазину...">
				 <button type="submit" title="Искать" class="button search-submit"></button>
				 </div>
			 </form>
			 </div>
		 </div>
		 </div>
	 </div>
	 </div>

Замените на:
	 <div id="header" class="wrap">
	 <div class="container">
		 <div class="row-fluid">
		 <!-- Logo -->
		 <div id="logo" class="col-xs-4">
			 <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">
			 <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}">
			 </a>
		 </div>
		 <!-- END: Logo -->
		 </div>
	 </div>
		 <div class="header-right col-xs-8">
			 <div class="header-right-inner">
			 <ul class="connect-us">
				 <li><a href="#" class="fa fa-facebook"></a></li>
				 <li><a href="#" class="fa fa-twitter"></a></li>
				 <li><a href="#" class="fa fa-youtube"></a></li>
				 <li><a href="#" class="fa fa-vk"></a></li>
			 </ul>
			 <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="inputText search-string" placeholder="Поиск по магазину...">
				 <button type="submit" title="Искать" class="button search-submit"></button>
				 </div>
			 </form>
			 </div>
		 </div>
	 </div>
Спасибо большое!
Обратно в Изменение общей стилистики


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

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

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