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


Выпадающее Меню

Автор Don Vinton, 27 сент. 2012 10:46

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

#221 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 27 Январь 2014 - 14:58

Просмотр сообщенияСake (25 Январь 2014 - 02:42) писал:

Ваше меню навигации использует только один уровень навигации без возможности отображения выпадающего списка. Вы хотите просто изменить его стиль, или же вы хотите так же изменить работу меню навигации? Для переноса стилей - вам необходимо сообщить исходные стили приведенного вами меню в виде его демо.
Поможете?

#222 Vaccina

Vaccina

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

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

Отправлено 28 Январь 2014 - 02:36 

<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
<ul class="menuHeader" >
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>		  
</ul>
{%ENDFOR%}
{%ENDIF%}
</div>
<!-- /Каталог товаров -->
замените на:

<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
<ul class="menuHeader" >
{%FOR catalog_full%}
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>		  
{%ENDFOR%}
</ul>
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

Далее код, что вы выше привели все #menu замените на #headermenu
Также все /images/ замените на {ASSETS_IMAGES_PATH}

Сам код, что вы привели вставьте в конце файла style.css
Не забудьте загрузить картинки от нового меню в раздел Редактор шаблонов

#223 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 28 Январь 2014 - 14:39

Просмотр сообщенияVaccina (28 Январь 2014 - 02:36) писал:

<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
<ul class="menuHeader" >
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>		
</ul>
{%ENDFOR%}
{%ENDIF%}
</div>
<!-- /Каталог товаров -->
замените на:

<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
<ul class="menuHeader" >
{%FOR catalog_full%}
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>		
{%ENDFOR%}
</ul>
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

Далее код, что вы выше привели все #menu замените на #headermenu
Также все /images/ замените на {ASSETS_IMAGES_PATH}

Сам код, что вы привели вставьте в конце файла style.css
Не забудьте загрузить картинки от нового меню в раздел Редактор шаблонов
Сделала все как написали, вот код css
#headermenu{
width:100%;
}
#headermenu ul{
list-style:none;
}
#headermenu li{
list-style:none;
display:block;
float:left;
}
#headermenu li a{
display:block;
float:left;
height:66px;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#headermenu li a span{
display:block;
float:left;
background:url({ASSETS_IMAGES_PATH}menu_right.jpg) no-repeat right;
height:66px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
}
#headermenu li a:hover{
display:block;
float:left;	
background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
height:66px;
}
#headermenu li a:hover span{
display:block;
float:left;	
background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
color:#fff;
height:66px;
}
#headermenu li a.current{
display:block;
float:left;
height:66px;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#headermenu li a.current span{	
display:block;
float:left;
background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
height:66px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
}
так же код html который тоже пробовала вставлять в в файл html
<div id="menu">
<ul>
<li><a href="#" class="current"><span>Главная</span></a></li>
<li><a href="#"><span>Регистрация</span></a></li>
<li><a href="#"><span>Поиск</span></a></li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>О нас</span></a></li>	
</ul>
</div>
Сейчас меню выглядит вот так (скрин), при наведении работает

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

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

#224 Stasya

Stasya

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

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

Отправлено 28 Январь 2014 - 20:48

В файле  style.css найдите блок 
#headermenu li a {
display: block;
float: left;
height: 66px;
color: #fff;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left;
line-height: 43px;
padding: 0 0 0 7px;
text-decoration: none;
}
и замените его на 
#headermenu li a {
display: block;
float: left;
height: 66px;
color: #000;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left;
line-height: 43px;
padding: 0 0 0 7px;
text-decoration: none;
}

#225 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 29 Январь 2014 - 20:43

Просмотр сообщенияStasya (28 Январь 2014 - 20:48) писал:

В файле  style.css найдите блок 
#headermenu li a {
display: block;
float: left;
height: 66px;
color: #fff;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left;
line-height: 43px;
padding: 0 0 0 7px;
text-decoration: none;
}
и замените его на 
#headermenu li a {
display: block;
float: left;
height: 66px;
color: #000;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
background: url(http://design.elif-shop.kz/menu_left.jpg) no-repeat left;
line-height: 43px;
padding: 0 0 0 7px;
text-decoration: none;
}
К сожалению не помогло... Единственное, это появились названия пунктов, но само меню по прежнему отсутствует...

#226 Vaccina

Vaccina

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

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

Отправлено 30 Январь 2014 - 03:50

Немного структуру не досмотрела, в примере у нас span еще имеется, найдите в HTML:
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
замените на:
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a>

#227 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 30 Январь 2014 - 08:13

Просмотр сообщенияVaccina (30 Январь 2014 - 03:50) писал:

Немного структуру не досмотрела, в примере у нас span еще имеется, найдите в HTML:
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
замените на:
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a>
Сделала, не помогает.

#228 miyako

miyako

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

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

Отправлено 30 Январь 2014 - 09:16

Просмотр сообщенияElif (30 Январь 2014 - 08:13) писал:

Сделала, не помогает.

Пункты меню у Вас появились, посмотрите на скриншот.

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

  • меню.png

#229 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 30 Январь 2014 - 11:18

Просмотр сообщенияmiyako (30 Январь 2014 - 09:16) писал:

Пункты меню у Вас появились, посмотрите на скриншот.
Но дело не в пунктах, дело в том что меню должно выглядеть вот так, если я правильно понимаю не отображаются картинки menu_right_h.jpg и menu_right.jpg, наверное нужно что то поменять в кодах отвечающих за эти картинки?

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

  • gorizontalnoe_menu.PNG

#230 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 30 Январь 2014 - 12:08

Просмотр сообщенияElif (30 Январь 2014 - 11:18) писал:

Но дело не в пунктах, дело в том что меню должно выглядеть вот так, если я правильно понимаю не отображаются картинки menu_right_h.jpg и menu_right.jpg, наверное нужно что то поменять в кодах отвечающих за эти картинки?

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

#231 miyako

miyako

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

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

Отправлено 30 Январь 2014 - 13:19

В шаблоне HTML в самом конце удалите код - 
<div id="menu">
<ul>
  <li><a href="#" class="current"><span>Главная</span></a></li>
  <li><a href="#"><span>Регистрация</span></a></li>
  <li><a href="#"><span>Поиск</span></a></li>
  <li><a href="#"><span>Карта сайта</span></a></li>
  <li><a href="#"><span>О нас</span></a></li>	 
</ul>

Можете дать ссылку с работающим демо меню или с инструкцией? Возможно какие-то стили не добавлены.

#232 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 30 Январь 2014 - 17:33

Просмотр сообщенияmiyako (30 Январь 2014 - 13:19) писал:

В шаблоне HTML в самом конце удалите код -
<div id="menu">
<ul>
<li><a href="#" class="current"><span>Главная</span></a></li>
<li><a href="#"><span>Регистрация</span></a></li>
<li><a href="#"><span>Поиск</span></a></li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>О нас</span></a></li>	
</ul>

Можете дать ссылку с работающим демо меню или с инструкцией? Возможно какие-то стили не добавлены.
Вот здесь инструкция для меню

#233 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 30 Январь 2014 - 18:12

Просмотр сообщенияElif (30 Январь 2014 - 17:33) писал:

Вот здесь инструкция для меню

Здравствуйте, для того чтобы установить такое меню выполняем следующие инструкции.

Добавляем файлы изображения (см. в прикрепленных) через Редактор шаблонов Добавить файлы


Приступаем к редактированию шаблона HTML
Находим
<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
<ul class="menuHeader" >
{%FOR catalog_full%}
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>			
{%ENDFOR%}
</ul>
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

Заменяем на
<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
<ul>
{%FOR catalog_full%}
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a>
</li>			
{%ENDFOR%}
</ul>
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

Далее добавляем данный код стилей в style.css
#headermenu{
width:100%;
}
#headermenu ul{
list-style:none;
}
#headermenu li{
list-style:none;
display:block;
float:left;
}
#headermenu li a{
	 display:block;
	 float:left;
	 height:66px;
	 color:#fff;
	 text-transform:uppercase;
	 font-size:11px;
	 font-weight:bold;
	 background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left;
	 line-height:43px;
	 padding:0 0 0 7px;
	 text-decoration:none;
}
#headermenu li a span{
	 display:block;
	 float:left;
	 background:url({ASSETS_IMAGES_PATH}menu_right.jpg) no-repeat right;
	 height:66px;
	 color:#fff;
	 line-height:43px;
	 padding:0 14px 0 6px;
}
	 #headermenu li a:hover{
	 display:block;
	 float:left;	
	 background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
	 height:66px;
	 }
	 #headermenu li a:hover span{
	 display:block;
	 float:left;	
	 background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
	 color:#fff;
	 height:66px;
	 }
#headermenu li a.current{
	 display:block;
	 float:left;
	 height:66px;
	 color:#fff;
	 text-transform:uppercase;
	 font-size:11px;
	 font-weight:bold;
	 background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
	 line-height:43px;
	 padding:0 0 0 7px;
	 text-decoration:none;
}
#headermenu li a.current span{	
	 display:block;
	 float:left;
	 background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
	 height:66px;
	 color:#fff;
	 line-height:43px;
	 padding:0 14px 0 6px;
}

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

  • menu_right.jpg
  • menu_right_h.jpg
  • menu_left.jpg
  • menu_left_h.jpg

#234 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 31 Январь 2014 - 00:52

Просмотр сообщенияCastiel (30 Январь 2014 - 18:12) писал:

Здравствуйте, для того чтобы установить такое меню выполняем следующие инструкции.

Добавляем файлы изображения (см. в прикрепленных) через Редактор шаблонов Добавить файлы


Приступаем к редактированию шаблона HTML
Находим
<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
<ul class="menuHeader" >
{%FOR catalog_full%}
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>			
{%ENDFOR%}
</ul>
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

Заменяем на
<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
<ul>
{%FOR catalog_full%}
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}current{% ELSEIF catalog_full.CURRENT_PARENT %}current{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}><span>{catalog_full.NAME}</span></a>
</li>			
{%ENDFOR%}
</ul>
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

Далее добавляем данный код стилей в style.css
#headermenu{
width:100%;
}
#headermenu ul{
list-style:none;
}
#headermenu li{
list-style:none;
display:block;
float:left;
}
#headermenu li a{
	 display:block;
	 float:left;
	 height:66px;
	 color:#fff;
	 text-transform:uppercase;
	 font-size:11px;
	 font-weight:bold;
	 background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left;
	 line-height:43px;
	 padding:0 0 0 7px;
	 text-decoration:none;
}
#headermenu li a span{
	 display:block;
	 float:left;
	 background:url({ASSETS_IMAGES_PATH}menu_right.jpg) no-repeat right;
	 height:66px;
	 color:#fff;
	 line-height:43px;
	 padding:0 14px 0 6px;
}
	 #headermenu li a:hover{
	 display:block;
	 float:left;	
	 background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
	 height:66px;
	 }
	 #headermenu li a:hover span{
	 display:block;
	 float:left;	
	 background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
	 color:#fff;
	 height:66px;
	 }
#headermenu li a.current{
	 display:block;
	 float:left;
	 height:66px;
	 color:#fff;
	 text-transform:uppercase;
	 font-size:11px;
	 font-weight:bold;
	 background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
	 line-height:43px;
	 padding:0 0 0 7px;
	 text-decoration:none;
}
#headermenu li a.current span{	
	 display:block;
	 float:left;
	 background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
	 height:66px;
	 color:#fff;
	 line-height:43px;
	 padding:0 14px 0 6px;
}
Спасибо большое, все получилось! Только меню отражающееся, поэтому слайдер съехал, помогите поправить. И подскажите, можно как нибудь сделать чтобы отражения этого меню не было видно - например слайдер наложить или еще как нибудь?

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

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

#235 Vaccina

Vaccina

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

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

Отправлено 31 Январь 2014 - 03:50

Найдите:
#headermenu li a span {
background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
float: left;
height: 66px;
line-height: 43px;
padding: 0 14px 0 6px;
}
замените на:
#headermenu li a span {
background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
float: left;
height: 45px;
line-height: 43px;
padding: 0 14px 0 6px;
}
далее найдите:
#headermenu li a {
background: url("http://design.elif-shop.kz/menu_left.jpg") no-repeat scroll left center rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
float: left;
font-size: 11px;
font-weight: bold;
height: 66px;
line-height: 43px;
padding: 0 0 0 7px;
text-decoration: none;
text-transform: uppercase;
}

#headermenu li a:hover {
	background: url("http://design.elif-shop.kz/menu_left_h.jpg") no-repeat scroll left center rgba(0, 0, 0, 0);
	display: block;
	float: left;
	height: 66px;
}

#headermenu li a:hover span {
	background: url("http://design.elif-shop.kz/menu_right_h.jpg") no-repeat scroll right center rgba(0, 0, 0, 0);
	color: #FFFFFF;
	display: block;
	float: left;
	height: 66px;
}
замените на:
#headermenu li a {
background: url("http://design.elif-shop.kz/menu_left.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
float: left;
font-size: 11px;
font-weight: bold;
height: 45px;
line-height: 43px;
padding: 0 0 0 7px;
text-decoration: none;
text-transform: uppercase;
}

#headermenu li a:hover {
	background: url("http://design.elif-shop.kz/menu_left_h.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
	display: block;
	float: left;
	height: 45px;
}

#headermenu li a:hover span {
	background: url("http://design.elif-shop.kz/menu_right_h.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
	color: #FFFFFF;
	display: block;
	float: left;
	height: 45px;
}
далее
#headermenu {
height: 20px;
padding: 10px;
width: 100%;
}
замените на:
#headermenu {
height: 45px;
padding: 10px;
width: 100%;
}

#236 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 31 Январь 2014 - 09:03

Здравствуйте, вот этот код поменяла 
#headermenu li a span {
background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right center rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
float: left;
height: 66px;
line-height: 43px;
padding: 0 14px 0 6px;
}
А вот этих кодов в том же порядке как вы привели у меня нет 
#headermenu li a {
background: url("http://design.elif-shop.kz/menu_left.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
float: left;
font-size: 11px;
font-weight: bold;
height: 45px;
line-height: 43px;
padding: 0 0 0 7px;
text-decoration: none;
text-transform: uppercase;
}
#headermenu li a:hover {
		background: url("http://design.elif-shop.kz/menu_left_h.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
		display: block;
		float: left;
		height: 45px;
}
#headermenu li a:hover span {
		background: url("http://design.elif-shop.kz/menu_right_h.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
		color: #FFFFFF;
		display: block;
		float: left;
		height: 45px;
}

#headermenu {
height: 20px;
padding: 10px;
width: 100%;
}
На данный момент код этого меню выглядит так:
#headermenu{
width:100%;
}
#headermenu ul{
list-style:none;
}
#headermenu li{
list-style:none;
display:block;
float:left;
}
#headermenu li a{
		 display:block;
		 float:left;
		 height:66px;
		 color:#fff;
		 text-transform:uppercase;
		 font-size:11px;
		 font-weight:bold;
		 background:url({ASSETS_IMAGES_PATH}menu_left.jpg) no-repeat left;
		 line-height:43px;
		 padding:0 0 0 7px;
		 text-decoration:none;
}
#headermenu li a span {
background: url("http://design.elif-shop.kz/menu_right.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
float: left;
height: 45px;
line-height: 43px;
padding: 0 14px 0 6px;
}
		 #headermenu li a:hover{
		 display:block;
		 float:left;   
		 background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
		 height:66px;
		 }
		 #headermenu li a:hover span{
		 display:block;
		 float:left;   
		 background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
		 color:#fff;
		 height:66px;
		 }
#headermenu li a.current{
		 display:block;
		 float:left;
		 height:66px;
		 color:#fff;
		 text-transform:uppercase;
		 font-size:11px;
		 font-weight:bold;
		 background:url({ASSETS_IMAGES_PATH}menu_left_h.jpg) no-repeat left;
		 line-height:43px;
		 padding:0 0 0 7px;
		 text-decoration:none;
}
#headermenu li a.current span{ 
		 display:block;
		 float:left;
		 background:url({ASSETS_IMAGES_PATH}menu_right_h.jpg) no-repeat right;
		 height:66px;
		 color:#fff;
		 line-height:43px;
		 padding:0 14px 0 6px;
}

#237 miyako

miyako

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

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

Отправлено 31 Январь 2014 - 10:10

Затем найдите код - 
#headermenu {
width: 100%;
}
и замените на -
#headermenu {
width: 100%;
height: 66px;
}

далее найдите код -
#headermenu ul{
list-style:none;
}
и замените на -
#headermenu ul{
list-style:none;
text-align: center;
}
Затем найдите код -
#headermenu li{
list-style:none;
display:block;
float:left;
}
и замените на -
#headermenu li{
list-style:none;
display:inline-block;
*display:inline;
zoom:1;
}


В самый конец style.css добавьте -
#headermenu li:first-child, li.first-child {
margin: 0; /* убираем отступ у первого элемента, чтобы было дейсвительно по середине */
}
* html #headermenu li {
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */
)
}
#headermenu li a,#headermenu li a span, #headermenu li a:hover, #headermenu li a:hover span, #headermenu li a.current, #headermenu li a.current span{
float:none;
display:inline-block;
*display:inline;
zoom:1;
}
Результат на скриншоте -

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

  • меню через список по середине.png

#238 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 02 Февраль 2014 - 20:33

Просмотр сообщенияmiyako (31 Январь 2014 - 10:10) писал:

Затем найдите код -
#headermenu {
width: 100%;
}
и замените на -
#headermenu {
width: 100%;
height: 66px;
}

далее найдите код -
#headermenu ul{
list-style:none;
}
и замените на -
#headermenu ul{
list-style:none;
text-align: center;
}
Затем найдите код -
#headermenu li{
list-style:none;
display:block;
float:left;
}
и замените на -
#headermenu li{
list-style:none;
display:inline-block;
*display:inline;
zoom:1;
}


В самый конец style.css добавьте -
#headermenu li:first-child, li.first-child {
margin: 0; /* убираем отступ у первого элемента, чтобы было дейсвительно по середине */
}
* html #headermenu li {
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */
)
}
#headermenu li a,#headermenu li a span, #headermenu li a:hover, #headermenu li a:hover span, #headermenu li a.current, #headermenu li a.current span{
float:none;
display:inline-block;
*display:inline;
zoom:1;
}
Результат на скриншоте -
Спасибо большое, все получилось, только маленькие штрихи остались, помогите пожалуйста:
1)немного отцентрировать меню, а то слева отступ, а справа оно выезжает так, что появился горизонтальный бегунок прокрутки страницы
2) убрать отражающиеся блоки

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

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

#239 empty9228

empty9228

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

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

Отправлено 03 Февраль 2014 - 10:57

Здравствуйте,
2. у вас это из того что в стиле загружается такое изображение(menu_right_h.jpg), с отражением, вам нужно сохранить его к себе на компьютер, удалить ту часть, которая является отражением и загрузить обратно.
Ту же процедуру проделать с файлом menu_right.jpg

#240 ne_yana

ne_yana

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

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

Отправлено 03 Февраль 2014 - 12:49

Просмотр сообщенияempty9228 (03 Февраль 2014 - 10:57) писал:

Здравствуйте,
2. у вас это из того что в стиле загружается такое изображение(menu_right_h.jpg), с отражением, вам нужно сохранить его к себе на компьютер, удалить ту часть, которая является отражением и загрузить обратно.
Ту же процедуру проделать с файлом menu_right.jpg
Здравствуйте,
1. В файле style.css замените
#headermenu {
width: 100%;
height: 66px;
}
на
#headermenu {
height: 66px;
}


#headermenu {
width: 100%;
height: 20px;
padding: 10px;
}
на
#headermenu {
height: 20px;
padding: 10px;
}

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


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

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

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