Сообщений в теме: 145

[551]

Добрый день. Помогите разобраться с выпадающим меню. Перерыл уже весь интернет, не могу найти правильного решения. Сейчас на сайте есть выпадающее меню следующего вида (рис1). Хочу сделать следующее (рис2) из того, что имеется (вот здесь похожая реализация http://www.otto.ru/ , http://massup.ru/). Сложность заключается в том, что меню - это список. Я нашел решение, как разбить список на колонки, но оно не подходит, т.к. разбивает пункты без сортировки. Вот код имеющегося меню:

<li><a href="http://babylook.me/page/catalog-tovarov">Каталог товаров ▾</a>
<ul class="nav-sub">
<li><a href="http://babylook.me/catalog/Golovnyje-ubory-3">Головные уборы</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/Chobi">Chobi</a>
<ul class="nav-sub3">
<li><a href="http://babylook.me/catalog/osen-zima-2011-2">Осень-зима 2011-2012</a></li>
<li><a href="http://babylook.me/catalog/Vesna-leto">Весна-лето 2012</a>
<ul class="nav-sub4">
<li><a href="http://babylook.me/catalog/Mal-chiki-3">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-4">Девочки</a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/osen-zima-2012-2">Осень-зима 2012-2013</a>
<ul class="nav-sub4">
<li><a href="http://babylook.me/catalog/Mal-chiki-4">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-5">Девочки</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/Tavitta">Tavitta <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-10">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-11">Девочки</a></li>
</ul> 
</li>
<li><a href="http://babylook.me/catalog/Noble-People">Noble People</a></li>
<li><a href="http://babylook.me/catalog/Borelli-2">Borelli <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-5">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-6">Девочки</a></li>
</ul> 
</li>
</ul></li>
<li><a href="http://babylook.me/catalog/Verkhn-aja-odezhda-2">Верхняя одежда</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/Borelli-3">Borelli <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-6">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-7">Девочки</a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/To-Be-Too">To Be Too</a></li>
<li><a href="http://babylook.me/catalog/Silvian-Heach-2">Silvian Heach <span style="color:#f0ff00;"><em>new</em></span></a></li>
<li><a href="http://babylook.me/catalog/Fun-amp-Fun">Fun&Fun <span style="color:#f0ff00;"><em>new</em></span></a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/Povsednevnaja-odezhda">Повседневная одежда</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/To-Be-Too-2">To Be Too</a></li>
<li><a href="http://babylook.me/catalog/Artigli">Artigli</a></li>
<li><a href="http://babylook.me/catalog/Pelican">Pelican</a></li>
<li><a href="http://babylook.me/catalog/Silvian-Heach">Silvian Heach <span style="color:#f0ff00;"><em>new</em></span></a></li>
<li><a href="http://babylook.me/catalog/Fun-amp-Fun-2">Fun&Fun <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-8">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-9">Девочки</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/Nar-adnyje-plat-ja">Нарядные платья</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/Noble-People-2">Noble People</a></li>
<li><a href="http://babylook.me/catalog/Artigli-2">Artigli</a></li>
<li><a href="http://babylook.me/catalog/Gaialuna-2">Gaialuna</a></li>
</ul> 
</li>
<li><a href="http://babylook.me/catalog/detskoje-nizhneje-belje">Нижнее белье</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/detskoje-nizhneje-belje-malchiki">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/detskoje-nizhneje-belje-devochki">Девочки</a></li>
</ul></li>
<li><a href="http://babylook.me/catalog/aksessuary">Аксессуары</a></li>
</ul>
</li>

И CSS:

ul.nav-sub {
  visibility: hidden;
position: absolute;
padding:10px;
top: 38px;
left: 0;
z-index: 598;
background: #4db2ff url(http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg1.jpg) repeat-x left top;
border-top: 1px solid #4db2ff;
  border-right: 1px solid #4db2ff;
border-bottom: 1px solid #4db2ff;
border-left: 1px solid #4db2ff;
}

ul.nav-sub li {
list-style:none;
display:block;
padding: 0;
height: 28px;
float: none;
width:150px;
border-bottom: 1px solid #4db2ff;
background: none;
}
ul.nav-sub li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 25px;
float: none;
width:150px;
background: none;
  text-transform: none;
font: 12px Arial, Helvetica, sans-serif;
}

ul.nav-sub2 {
  visibility: hidden;
  position: absolute;
  margin: 0 0 0 150px;
padding:10px;
top: 0px;
left: 0;
z-index: 598;
background: #4db2ff url(http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg1.jpg) repeat-x left top;
border-top: 1px solid #4db2ff;
  border-right: 1px solid #4db2ff;
border-bottom: 1px solid #4db2ff;
border-left: 1px solid #4db2ff;
}

ul.nav-sub2 li {
list-style:none;
display:block;
padding: 0;
height: 28px;
float: none;
width:110px;
border-bottom: 1px solid #4db2ff;
background: none;
}
ul.nav-sub2 li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 25px;
float: none;
width:110px;
background: none;
  text-transform: none;
font: 12px Arial, Helvetica, sans-serif;
}

ul.nav-sub3 {
  visibility: hidden;
  position: absolute;
  margin: 0 0 0 110px;
  padding:10px;
top: 0px;
left: 0;
z-index: 598;
background: #4db2ff url(http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg.jpg) repeat-x left top;
border-top: 1px solid #4db2ff;
  border-right: 1px solid #4db2ff;
border-bottom: 1px solid #4db2ff;
border-left: 1px solid #4db2ff;
}

ul.nav-sub3 li {
list-style:none;
display:block;
padding: 0;
height: 28px;
float: none;
width:150px;
border-bottom: 1px solid #4db2ff;
background: none;
}
ul.nav-sub3 li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 25px;
float: none;
width:150px;
background: none;
  text-transform: none;
font: 12px Arial, Helvetica, sans-serif;
}

ul.nav-sub4 {
  visibility: hidden;
  position: absolute;
  margin: 0 0 0 150px;
  padding:10px;
  top: 0px;
left: 0;
z-index: 598;
background: #4db2ff url(http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg.jpg) repeat-x left top;
border-top: 1px solid #4db2ff;
  border-right: 1px solid #4db2ff;
border-bottom: 1px solid #4db2ff;
border-left: 1px solid #4db2ff;
}

ul.nav-sub4 li {
list-style:none;
display:block;
padding: 0;
height: 28px;
float: none;
width:70px;
border-bottom: 1px solid #4db2ff;
background: none;
}
ul.nav-sub4 li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 25px;
float: none;
width:70px;
background: none;
  text-transform: none;
font: 12px Arial, Helvetica, sans-serif;
}
ul.nav-sub5 {
  visibility: hidden;
  position: absolute;
  margin: 0 0 0 110px;
  padding:10px;
  top: 0px;
  left: 0;
z-index: 598;
background: #4db2ff url(http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg.jpg) repeat-x left top;
border-top: 1px solid #4db2ff;
  border-right: 1px solid #4db2ff;
border-bottom: 1px solid #4db2ff;
border-left: 1px solid #4db2ff;
}

ul.nav-sub5 li {
list-style:none;
display:block;
padding: 0;
height: 28px;
float: none;
width:70px;
border-bottom: 1px solid #4db2ff;
background: none;
}
ul.nav-sub5 li a {
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 25px;
float: none;
width:70px;
background: none;
  text-transform: none;
font: 12px Arial, Helvetica, sans-serif;
}

Подскажите, как сделать?

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

• 
• 

[support 2.0]

551 (28 Декабрь 2012 - 15:09) писал:

Добрый день. Помогите разобраться с выпадающим меню. Перерыл уже весь интернет, не могу найти правильного решения. Сейчас на сайте есть выпадающее меню следующего вида (рис1). Хочу сделать следующее (рис2) из того, что имеется (вот здесь похожая реализация http://www.otto.ru/ , http://massup.ru/). Сложность заключается в том, что меню - это список. Я нашел решение, как разбить список на колонки, но оно не подходит, т.к. разбивает пункты без сортировки. Вот код имеющегося меню:


Подскажите, как сделать?

Могу предложить Вам такое меню, но оно требует еще коррекции. Главное - устраивает оно Вас или нет
код для main.css

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 0px 4px 0px;
margin-right:20px;
margin-top:7px;
border:none;
z-index:999;
}
#menu li:hover {
padding: 4px 0px 4px 0px;
}
#menu li a {
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#161616;
}
#menu li .drop {
padding-right:21px;
background: url("{ASSETS_IMAGES_PATH}drop.png") no-repeat right 8px;
z-index:999;
}
#menu li:hover .drop {
background: url("{ASSETS_IMAGES_PATH}drop.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin: 4px 0px 0px -7px;
float:left;
position:absolute;
left: -999em; /* Скрываем выпадающие пункты */
text-align:left;
padding: 10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
z-index:999;

/* Фон с градиентом */

background: #87CDFF; url(http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg1.jpg) repeat-x left top;
border-top: 1px solid #0891FA;

border-right: 1px solid #1190F1;
border-bottom: 1px solid #058EF7;
border-left: 1px solid #169AFF;
/* Скругленные углы */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 940px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width: 303px;}
.col_2 {width:570px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Скругленные углы */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color: rgb(56, 72, 75);
}
#menu li:hover div a:hover {
color: rgb(146, 173, 180);
}

.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow { /* Лучший стиль для легкого фона */
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Изображения прижимаются влево */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Скругленные углы */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Тень */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Скругленные углы */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

код для шаблона HTML, вставить вместо

<ul id="navigation" class="nav-main">
<li><a href="http://babylook.me/page/catalog-tovarov">Каталог товаров ▾</a>
<ul class="nav-sub">
<li><a href="http://babylook.me/catalog/Golovnyje-ubory-3">Головные уборы</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/Chobi">Chobi</a>
<ul class="nav-sub3">
<li><a href="http://babylook.me/catalog/osen-zima-2011-2">Осень-зима 2011-2012</a></li>
<li><a href="http://babylook.me/catalog/Vesna-leto">Весна-лето 2012</a>
<ul class="nav-sub4">
<li><a href="http://babylook.me/catalog/Mal-chiki-3">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-4">Девочки</a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/osen-zima-2012-2">Осень-зима 2012-2013</a>
<ul class="nav-sub4">
<li><a href="http://babylook.me/catalog/Mal-chiki-4">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-5">Девочки</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/Tavitta">Tavitta <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-10">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-11">Девочки</a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/Noble-People">Noble People</a></li>
<li><a href="http://babylook.me/catalog/Borelli-2">Borelli <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-5">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-6">Девочки</a></li>
</ul>
</li>
</ul></li>
<li><a href="http://babylook.me/catalog/Verkhn-aja-odezhda-2">Верхняя одежда</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/Borelli-3">Borelli <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-6">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-7">Девочки</a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/To-Be-Too">To Be Too</a></li>
<li><a href="http://babylook.me/catalog/Silvian-Heach-2">Silvian Heach <span style="color:#f0ff00;"><em>new</em></span></a></li>
<li><a href="http://babylook.me/catalog/Fun-amp-Fun">Fun&amp;Fun <span style="color:#f0ff00;"><em>new</em></span></a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/Povsednevnaja-odezhda">Повседневная одежда</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/To-Be-Too-2">To Be Too</a></li>
<li><a href="http://babylook.me/catalog/Artigli">Artigli</a></li>
<li><a href="http://babylook.me/catalog/Pelican">Pelican</a></li>
<li><a href="http://babylook.me/catalog/Silvian-Heach">Silvian Heach <span style="color:#f0ff00;"><em>new</em></span></a></li>
<li><a href="http://babylook.me/catalog/Fun-amp-Fun-2">Fun&amp;Fun <span style="color:#f0ff00;"><em>new</em></span></a>
<ul class="nav-sub5">
<li><a href="http://babylook.me/catalog/Mal-chiki-8">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/devochki-9">Девочки</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/Nar-adnyje-plat-ja">Нарядные платья</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/Noble-People-2">Noble People</a></li>
<li><a href="http://babylook.me/catalog/Artigli-2">Artigli</a></li>
<li><a href="http://babylook.me/catalog/Gaialuna-2">Gaialuna</a></li>
</ul>
</li>
<li><a href="http://babylook.me/catalog/detskoje-nizhneje-belje">Нижнее белье</a>
<ul class="nav-sub2">
<li><a href="http://babylook.me/catalog/detskoje-nizhneje-belje-malchiki">Мальчики</a></li>
<li><a href="http://babylook.me/catalog/detskoje-nizhneje-belje-devochki">Девочки</a></li>
</ul></li>
<li><a href="http://babylook.me/catalog/aksessuary">Аксессуары</a></li>
</ul>
</li>
<li><a href="http://babylook.me/page/Looks">Looks</a></li>
<li><a href="http://babylook.me/discount">Акции и скидки<div style="position: relative;"><span class="bubble" style="display: none;">3</span></div></a></li>
<li><a href="http://babylook.me/page/tablica_razmerov">Таблицы размеров</a></li>
<li><a href="http://babylook.me/page/dostavka">Доставка и оплата</a></li>
<li><a href="http://babylook.me/feedback">Контакты</a></li>
<a href="http://babylook.me/page/Instagram"><img style="padding-left:10px;" title="Волшебный мир BabyLook в Instagram" alt="Волшебный мир BabyLook в Instagram" src="http://babylook.me/web/upload/assets/images/43/42844/Instagram_logo14.png"></a>

	
	 </ul>

вот этот код

<ul id="menu">
<li><a href="href=" http:="" babylook.me="" page="" catalog-tovarov"="" class="drop">Каталог товаров </a>
<div class="dropdown_4columns nav-sub">
<div class="col_1">
<h3><a href="#">Головные уборы</a></h3>
<ul>
<li><a href="#">Chobi</a></li>
<ul style="margin-left:10px;"> <li style="margin-top:5px;"> <a href="#">Осень-зима 2011-2012</a> </li>
<li> <a href="#">Весна-лето 2012 </a></li>
<ul style="margin-left:10px;"> <li> <a href="#">Мальчики</a> </li>
<li> <a href="#">Девочки</a> </li> </ul>
<li> <a href="#">Осень-зима 2013</a> </li>
<ul style="margin-left:10px"> <li> <a href="#">Мальчики</a> </li>
<li> <a href="#">Девочки </a></li>
</ul> </ul>
<li><a href="#">Navitta</a></li>
<li><a href="#">Noble People</a></li><a href="#">
</a><li><a href="#"></a><a href="#">Borelli</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">Верхняя одежда</a></h3>
<ul>
<li><a href="#">Borelli</a></li>
<li><a href="#">To Be Too</a></li>
<li><a href="#">Silvian Heach</a></li>
<li><a href="#">Fun&amp;Fun</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">Повседневная одежда</a></h3>
<ul>
<li><a href="#">To Be Too</a></li>
<li><a href="#">Artigli</a></li>
<li><a href="#">Pelican</a></li>
<li><a href="#">Silvian Heach</a></li>
<li><a href="#">Fun&amp;Fun</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">Нарядные платья</a></h3>
<ul>
<li><a href="#">Noble People</a></li>
<li><a href="#">Artigli</a></li>
<li><a href="#">Gaialuna</a></li>


</ul>
</div>
<div class="col_1">
<h3><a href="#">Нижнее белье</a></h3>
<ul>
<li><a href="#">Мальчики</a></li>
<li><a href="#">Дечоки</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">Аксессуары</a></h3>
</div>
</div>
</li>
<li><a href="http://babylook.me/page/Looks">Looks</a></li>
<li><a href="http://babylook.me/discount">Акции и скидки<div style="position: relative;"><span class="bubble">3</span></div></a></li>
<li><a href="http://babylook.me/page/tablica_razmerov">Таблицы размеров</a></li>
<li><a href="http://babylook.me/page/dostavka">Доставка и оплата</a></li>
<li><a href="http://babylook.me/feedback">Контакты</a></li>
<li> <a href="http://babylook.me/page/Instagram"><img style="position: absolute;padding-left: 19px;top: -4px;" title="Волшебный мир BabyLook в Instagram" alt="Волшебный мир BabyLook в Instagram" src="http://babylook.me/web/upload/assets/images/43/42844/Instagram_logo14.png"></a> </li>
</ul>

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

• 

[551]

Да, такое и нужно. Но, чтобы оно выглядело, как то меню, которое сейчас есть (цвета, шрифты, подложки при наведении). Поэтому, я их хотел сделать его из того, что есть. Я попробовал понастраивать ваше меню, но я не понимаю, как его сделать похожим на старое.

Я сделал из старого вот такое http://babylook.me/page/test2 Но как сделать, чтобы оно выпадало? И подложки принаведении?

[Vaccina]

Попробуйте в файле стилей main.css найти

ul.nav-main li.hover, ul.nav-main li:hover {
	background: url("http://babylook.me/web/upload/assets/images/43/42844/dropdown-bg-hover.jpg") repeat-x scroll left top transparent;
	cursor: pointer;
	position: relative;
	z-index: 597;
}

и заменить на

ul.nav-main li.hover, ul.nav-main li:hover {
	background: url("http://babylook.me/web/upload/assets/images/43/42844/dropdown-bg-hover.jpg") repeat-x scroll left top transparent;
	cursor: pointer;
}

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

.nav-new {
	background: url("http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg2.jpg") repeat-x scroll left top #4DB2FF;
	border-color: #4DB2FF;
	border-style: solid;
	border-width: 1px;
	left: 0;
	padding: 0;
	position: absolute;
	top: 38px;
	z-index: 598;
}

и замените на

.nav-new {
	background: url("http://babylook.me/web/upload/assets/images/43/42844/dropdown-list-bg2.jpg") repeat-x scroll left top #4DB2FF;
	border-color: #4DB2FF;
	border-style: solid;
	border-width: 1px;
	display: none;
	left: 0;
	padding: 0;
	position: absolute;
	top: 38px;
	z-index: 598;
}

далее добавьте

#navigation > li:hover .nav-new {
	 display: block;
}

Далее вам необходимо будет код каталога в шаблоне "HTML", а именно весь ul

<ul class="nav-sub">...</ul>

заменить на код вашего каталога страницы http://babylook.me/page/test2
а именно на весь блок

<div class="nav-new">...</div>

[551]

Спасибо, огромное, все получилось! Только появился еще вопрос: я хочу в это меню помимо категорий выводить еще и товарные предложения. Выводятся они также, как и пункты меню списком в <li>, и получается с тем же форматированием, как и у остальных ссылок (при наведении появляется подложка). Как убрать это форматирование у отдельных пунктов списка?

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

• 

[551]

Все, сам догадался:

<li style="border: none; background: none;">

Спасибо)

[emin808]

Добрый день, а подскажите пожалуйста , вертикальное меню такого рода можно сделать?!

http://asfn.storeland.ru/

[miyako]

emin808 (19 Январь 2013 - 11:02) писал:

Добрый день, а подскажите пожалуйста , вертикальное меню такого рода можно сделать?!

http://asfn.storeland.ru/

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

[emin808]

да, Нам желательно меню такого рода только вертикального формата на наш сайт http://asfn.storeland.ru/

[support 2.0]

emin808 (19 Январь 2013 - 12:53) писал:

да, Нам желательно меню такого рода только вертикального формата на наш сайт http://asfn.storeland.ru/

Напишите, пожалуйста куда Вы бы его хотели бы поставить. В каком месте на Вашем сайте Вы хотите это реализовать?

[emin808]

Благодарю за отклик, вот вертикально , чтоб и на товары и на разделы сайта можно было влиять

[miyako]

emin808 (20 Январь 2013 - 10:21) писал:

Благодарю за отклик, вот вертикально , чтоб и на товары и на разделы сайта можно было влиять

Эта идея рассматривалась в следующей теме - http://forum.storela...аталогом-места/
как я понимаю, вы хотели бы сделать меню такого типа - http://www.mvideo.ru/?

[emin808]

да, получается так, но в пример Я приводил как здесь , реализация описана выше, только там горизантаотное меню, а у нас вертикальное.
нам видится , чтоб картинки в меню можно было вставлять

[emin808]

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

[551]

Добрый день. Помогите решить проблему отображения меню в разных браузерах. В хроме и ФФ меню отображается более менее правильно:



Но хотелось бы убрать отступ картинки от нижнего края меню:



А в опере и ИЕ, картинка вообще уходит в другой столбец:



Как исправить?

[Vaccina]

Вам необходимо вставить ваше изображение "banner_menu6.png" в список li 4го блока div, так же как вставлено изображение "rozovaja-shapochka-tavitta-afacdb.jpg" в li 2го блока div

[551]

Vaccina (22 Январь 2013 - 23:26) писал:

Вам необходимо вставить ваше изображение "banner_menu6.png" в список li 4го блока div, так же как вставлено изображение "rozovaja-shapochka-tavitta-afacdb.jpg" в li 2го блока div

Спасибо большое. Как сам не догадался)

[emin808]

miyako (20 Январь 2013 - 12:57) писал:

Эта идея рассматривалась в следующей теме - http://forum.storela...аталогом-места/
как я понимаю, вы хотели бы сделать меню такого типа - http://www.mvideo.ru/?

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

Да , совершенно верно , мы видим ,что нам необходимо меню такого типа http://www.mvideo.ru/? , но тут оно сделано только под товары, нам бы желательно чтоб это меню еще и в режиме  разделы сайта.

[Koderhan]

Данный вариант меню требует большого количества изменений в верстке сайта и требует профессиональных навыков верстки и javascript программирования.

[emin808]

BabyLook здесь реализовано каким то образом , нам то только вертикально надо , а не горизонтально .