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


Меню

Автор Stas_Y, 26 авг. 2015 21:50

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

#41 Stas_Y

Stas_Y

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

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

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

Сейчас немного не то)) в приложении рис. нужно сделать как в нем))

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

  • 2.jpg

#42 Vaccina

Vaccina

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

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

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

<ul class="top-navbar-links accordion">
		 <li class="parent">
																				 <a href="#">Цветы</a>
																				 <ul class="top-navbar-links accordion">																			   
				 {% FOR menu %}
																								 {% FOR header2 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul>
				 </li>
																				 <li class="parent">
																				 <a href="#">Букеты</a>
																				 <ul class="top-navbar-links accordion">																			   
				 {% FOR menu %}
																								 {% FOR header3 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header3.links.URL}" {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul>
				 </li>
				 <li class="parent">
																				 <a href="#">О нас</a>
																				 <ul class="top-navbar-links accordion">																			   
				 {% FOR menu %}
																								 {% FOR header4 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header4.links.URL}" {% IF menu.header4.links.TITLE %}title="{menu.header4.links.TITLE}"{% ENDIF %}>{menu.header4.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul>
				 </li>
				 <li class="parent">
																				 <a href="#">Кому</a>
																				 <ul class="top-navbar-links accordion">																			   
				 {% FOR menu %}
																								 {% FOR header5 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header5.links.URL}" {% IF menu.header5.links.TITLE %}title="{menu.header5.links.TITLE}"{% ENDIF %}>{menu.header5.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul>
				 </li>
																				 <li class="parent">
																				 <a href="#">Повод</a>
																				 <ul class="top-navbar-links accordion">																			   
				 {% FOR menu %}
																								 {% FOR header6 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header6.links.URL}" {% IF menu.header6.links.TITLE %}title="{menu.header6.links.TITLE}"{% ENDIF %}>{menu.header6.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul>
				 </li>																   
</ul>

замените на:
<ul class="top-navbar-links accordion">
		 <li class="parent">
																				 <a href="#">Цветы</a>
																				<ul class="top-navbar-links accordion">										   <li><a href="#">Цветы</a>
					   <ul class="top-navbar-links accordion">																			  
				 {% FOR menu %}
																								 {% FOR header2 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul></li></ul>
				 </li>
																				 <li class="parent">
																				 <a href="#">Букеты</a>
					 <ul class="top-navbar-links accordion">										   <li><a href="#">Букеты</a>
																				 <ul class="top-navbar-links accordion">																			   
				 {% FOR menu %}
																								 {% FOR header3 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header3.links.URL}" {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul></li></ul>
				 </li>
				 <li class="parent">
																				 <a href="#">О нас</a>
																				 <ul class="top-navbar-links accordion">										   <li><a href="#">О нас</a>
																				 <ul class="top-navbar-links accordion">																			   
				 {% FOR menu %}
																								 {% FOR header4 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header4.links.URL}" {% IF menu.header4.links.TITLE %}title="{menu.header4.links.TITLE}"{% ENDIF %}>{menu.header4.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul></li></ul>
				 </li>
				 <li class="parent">
																				 <a href="#">Кому</a>
																				 <ul class="top-navbar-links accordion">										   <li><a href="#">Кому</a>
																				 <ul class="top-navbar-links accordion">																				
				 {% FOR menu %}
																								 {% FOR header5 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header5.links.URL}" {% IF menu.header5.links.TITLE %}title="{menu.header5.links.TITLE}"{% ENDIF %}>{menu.header5.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul></li></ul>
				 </li>
																				 <li class="parent">
																				 <a href="#">Повод</a>
																				 <ul class="top-navbar-links accordion">										   <li><a href="#">Повод</a>
																				 <ul class="top-navbar-links accordion">						  
				 {% FOR menu %}
																								 {% FOR header6 %}
																								 {% FOR links %}
																												 <li><a href="{menu.header6.links.URL}" {% IF menu.header6.links.TITLE %}title="{menu.header6.links.TITLE}"{% ENDIF %}>{menu.header6.links.NAME}</a></li>
																								 {% ENDFOR %}
																								 {% ENDFOR %}
																								 {% ENDFOR %}
				 </ul></li></ul>
				 </li>																  
</ul>

далее в main.css найдите:
.header-top .header-top-left .top-navbar-links {
		float: left;
		list-style: outside none none;
		overflow: hidden;
		height: 50px;
		padding-left: 0;
}
замените на:
.header-top .header-top-left .top-navbar-links {
		float: left;
		list-style: outside none none;
		overflow: hidden;
		padding-left: 0;
}

#43 Stas_Y

Stas_Y

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

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

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

Почти))

1) Нужно чтоб белое поле было во всю ширину
2) Как уменьшать, изменять цвет шрифта у подкатегорий? Как изменять расстояние между подкатегориями (междустрочное)

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

  • 2.jpg

#44 Vaccina

Vaccina

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

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

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

1.В main.css найдите:
.header-top .header-top-left {
	padding: 0px;
}
замените на:
.header-top .header-top-left {
	padding: 0px;
	position: inherit;
}

2. В main.css найдите:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li a {
	display: block;
	clear: both;
	margin: 0px;
	border: medium none;
	float: none;
	padding: 5px;
	font: 14px/20px Arial;
	text-transform: none;
}

изменяйте в нем необходимые стили и добавьте стиль цвета для ссылки, пример:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li a {
	display: block;
	clear: both;
	margin: 0px;
	border: medium none;
	float: none;
	padding: 2px 5px;
	font: 14px/14px Arial;
	text-transform: none;
	color: #34495E;
}

#45 Stas_Y

Stas_Y

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

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

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

Отлично!  А можно сделать чтобы они в две колонки писались? а то так длинно получается, как для категории цветы

#46 Vaccina

Vaccina

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

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

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

В main.css найдите:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	display: block;
	border: medium none;
	clear: both;
}

замените на:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	border: medium none;
	clear: both;
	display: inline-block;
	width: 200px;
}

#47 Stas_Y

Stas_Y

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

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

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

Отлично!) а отодвинуть от левого края?

#48 Danil

Danil

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

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

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

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

Отлично!) а отодвинуть от левого края?
В main.css найдите код
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul {
position: absolute;
left: 0px;
top: 50px;
background: rgb(255, 255, 255) none repeat scroll 0% 0%;
width: 100%;
display: none;
border: 1px solid #ccc;
}
и замените на
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul {
position: absolute;
left: 50px;
top: 50px;
background: rgb(255, 255, 255) none repeat scroll 0% 0%;
width: 50%;
display: none;
border: 1px solid #ccc;
}
ul.top-navbar-links.accordion li ul.top-navbar-links.accordion li ul.top-navbar-links.accordion {
width: 100%;
}
изменяйте значение у свойства left для регулировки отступа и width(где 50%) для увеличения/уменьшения ширины появляющегося меню.

#49 Stas_Y

Stas_Y

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

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

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

Нет так белое поле сократилось а мне нужно только колонку с записями передвинуть

Сделать вторую колонку строк ближе к первой))

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

  • 111.jpg

#50 Vaccina

Vaccina

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

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

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

В main.css найдите:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	border: medium none;
	clear: both;
	display: inline-block;
	width: 500px;
}

замените на:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	border: medium none;
	clear: both;
	display: inline-block;
	width: 45%;
}

далее найдите:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul {
	position: relative;
	display: block;
	left: 0px;
	top: 0px;
	border: medium none;
	float: none;
}

замените на:
.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul {
	position: relative;
	display: block;
	left: 0px;
	top: 0px;
	border: medium none;
	float: none;
	width: 50%;
}

#51 Stas_Y

Stas_Y

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

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

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

Четко!)) Как всегда!)
Обратно в Изменение общей стилистики


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

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

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