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


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

Автор 551, 28 дек. 2012 15:09

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

#21 emin808

emin808

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

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

Отправлено 23 Январь 2013 - 18:32

Мы уже один раз пытались установить выпадающее меню , но как то не вышло, меню само установилось отлично , но вот выпадающую функцию так и не получилось наладить :(

Тут описано как делать , может попытаться еще раз :huh:

#22 emin808

emin808

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

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

Отправлено 23 Январь 2013 - 18:53

вот еще как вариант, CSS3 Мега выпадающее меню v 4.0 , может это пойдет , в видео демке показано что вертикальный формат тоже есть


#23 551

551

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

  • Пользователи
  • PipPipPipPip
  • 650 сообщений
  • ГородМосква

Отправлено 23 Январь 2013 - 20:52

Просмотр сообщенияemin808 (23 Январь 2013 - 18:53) писал:

вот еще как вариант, CSS3 Мега выпадающее меню v 4.0 , может это пойдет , в видео демке показано что вертикальный формат тоже есть



вот это крутое меню

#24 emin808

emin808

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

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

Отправлено 23 Январь 2013 - 22:46

да, содержательное меню

вот здесь о нем еще есть информация , внизу

Крутое оно будет, когда работать будет :)



Меню такого типа в  Нашем понимании значительно расширяет возможности размещения информации и навигации пользователя

Помогите пожалуйста реализовать один из вариантов

Вариант 1  (попытка здесь)

Вариант 2

#25 emin808

emin808

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

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

Отправлено 25 Январь 2013 - 21:27

вот здесь подробное описание установки одного из меню ,

#26 tanch

tanch

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

  • Пользователи
  • PipPipPipPip
  • 300 сообщений
  • ГородНовосибирск

Отправлено 01 Февраль 2013 - 13:49

Хочу-хочу такое меню!!
выпадающее + еще есть информация, картинки, ссылки
помогите - как установить?
на приведенной ссылке - на английском и даже дело не в языке, а как тут, на Сторлэнде это реализовать?
мой сайт: larec-ledenec.ru/

#27 mikola

mikola

    Good soo good

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

Отправлено 01 Февраль 2013 - 20:45

Просмотр сообщенияtanch (01 Февраль 2013 - 13:49) писал:

Хочу-хочу такое меню!!
выпадающее + еще есть информация, картинки, ссылки
помогите - как установить?
на приведенной ссылке - на английском и даже дело не в языке, а как тут, на Сторлэнде это реализовать?
мой сайт: larec-ledenec.ru/
Думаю стоит почитать данную тему
http://forum.storela...еню/#entry27791

#28 optomizkitaya

optomizkitaya

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

  • Пользователи
  • PipPipPip
  • 119 сообщений
  • ГородSpb

Отправлено 02 Февраль 2013 - 23:51

буду признателен за инструкцию по меню как в бэбилуке
fishkinatachku.ru

#29 miyako

miyako

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

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

Отправлено 03 Февраль 2013 - 07:37

Просмотр сообщенияoptomizkitaya (02 Февраль 2013 - 23:51) писал:

буду признателен за инструкцию по меню как в бэбилуке
fishkinatachku.ru
Опишите пожалуйста подробнее какое именно меню вы хотели бы

#30 support 2.0

support 2.0

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

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

Отправлено 04 Февраль 2013 - 11:36

Просмотр сообщенияoptomizkitaya (02 Февраль 2013 - 23:51) писал:

буду признателен за инструкцию по меню как в бэбилуке
fishkinatachku.ru

Реализация данного меню была представлена в данной теме форума

#31 Flor@@

Flor@@

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

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

Отправлено 04 Март 2013 - 02:13

Просмотр сообщенияsupport 2.0 (28 Декабрь 2012 - 19:48) писал:

код для 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>

мне такое меню очень подходит, куда и вместо чего необходимо вставить данный код?

#32 Flor@@

Flor@@

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

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

Отправлено 04 Март 2013 - 03:40

что необходимо исправить в коде (?):
<!-- Каталог -->
<a href="{CATALOG_URL}" class="indexPage">КАТАЛОГ ТОВАРОВ</a>
<ul id="menu">
<li><a href="href=" http:="" otdyh-i-son.ru="" page="" catalog"="" class="drop">Каталог товаров </a>
<div class="dropdown_4columns nav-sub">
<div class="col_1">
<h3><a href="#">МАТРАСЫ</a></h3>
<ul>
<li><a href="#">Матрасы взрослые</a></li>
<ul style="margin-left:10px;"> <li style="margin-top:5px;"><a href="#">Матрасы детские</a></li>
<li><a href="#">Матрасы боннель</a> </li>
<li> <a href="#">Матрасы S1000</a></li>
<ul style="margin-left:10px;"> <li>
<a href="#">Матрасы TFK</a> </li>
<li> <a href="#">Матрасы S2000, DS</a> </li> </ul>
<li> <a href="#">Матрасы беспружинные</a> </li>
<ul style="margin-left:10px"> <li>
<a href="#">Матрасы круглые</a> </li>
<li> <a href="#">Матрасы для больших людей </a></li>
</ul> </ul>
<li><a href="#">Матрасы для кроватей-машин</a></li>
<li><a href="#">Матрасы с латексом</a></li>
<a href="#"></a><li><a href="#"></a><a href="#">Матрасы с кокосом</a></li>
<li><a href="#">Матрасы многозональные</a></li>
<li><a href="#">Матрасы в скрутке</a></li>
<li><a href="#">Матрасы для диванов</a></li>
<li><a href="#">Матрасы тонкие, наматрасники</a></li>
</ul>
</div>
<div class="col_1">

</div>
<div class="col_1">
<h3><a href="#">МАТРАСЫ ПО ПРОИЗВОДИТЕЛЯМ</a></h3>
<ul>
<li><a href="#">DreamLine</a></li>
<li><a href="#">Magniflex</a></li>
<li><a href="#">Александрия</a></li>
<li><a href="#">Аннита</a></li>
<li><a href="#">Виртуоз</a></li>
<li><a href="#">Дримпром</a></li>
<li><a href="#">Лонакс</a></li>
<li><a href="#">Лонакс Премиум</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">КРОВАТИ</a></h3>
<ul>
<li><a href="#">Кровати все</a></li>
<li><a href="#">Кровати двуспальные</a></li>
<li><a href="#">Кровати односпальные и детские</a></li>
<li><a href="#">Кровати полуторные</a></li>
<li><a href="#">Кровати с подъемным основанием</a></li>
<li><a href="#">Кровати двухъярусные</a></li>
<li><a href="#">Кровати-чердаки</a></li>
<li><a href="#">Кровати с ковкой</a></li>
<li><a href="#">Кровати с кожаными вставками</a></li>
<li><a href="#">Круглые кровати</a></li>
<li><a href="#">Тахты</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">СПАЛЬНИ</a></h3>
<ul>
<li><a href="#">Александрия-2</a></li>
<li><a href="#">Глазовмебель</a></li>


</ul>
</div>
<div class="col_1">
<h3><a href="#">КРОВАТИ ПО ПРОИЗВОДИТЕЛЯМ</a></h3>
<ul>
<li><a href="#">Александрия</a></li>
<li><a href="#">Альянс</a></li>
<li><a href="#">Альфа</a></li>
<li><a href="#">Боровичи</a></li>
<li><a href="#">ВМК Шале</a></li>
<li><a href="#">Глазовмебель</a></li>
<li><a href="#">Малайзия</a></li>
<li><a href="#">Мебельторг</a></li>
<li><a href="#">Кровати скандмебель</a></li>
<li><a href="#">Кровати Dreamline</a></li>
<li><a href="#">Кровати Letta</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">ДЕТСКАЯ КОМНАТА</a></h3>
<ul>
<li><a href="#">Собери комнату</a></li>
<li><a href="#">Кровати-машины</a></li>
<li><a href="#">Орбита-корабли</a></li>
<li><a href="#">Спортивные комплексы Kampfer</a></li>
<li><a href="#">Milli Willi</a></li>
<li><a href="#">Red River</a></li>
<li><a href="#">Turbo</a></li>
<li><a href="#">Адвеста</a></li>
<li><a href="#">Ателье Детской мебели</a></li>
<li><a href="#">Боровичи</a></li>
<li><a href="#">Велар</a></li>
<li><a href="#">Грифон стайл</a></li>
<li><a href="#">Итальянские мотивы</a></li>
<li><a href="#">Карлсон</a></li>
<li><a href="#">Орбита мебель</a></li>
<li><a href="#">Легенда (Сказка)</a></li>
<li><a href="#">Сканд-мебель</a></li>
<li><a href="#">Формула мебели</a></li>
</ul>
</div>
<div class="col_1">
<h3><a href="#">АКСЕССУАРЫ И ПРОЧЕЕ</a></h3>
<ul>
<li><a href="#">Александрия</a></li>
<li><a href="#">Альянс</a></li>
<li><a href="#">Альфа</a></li>
<li><a href="#">Боровичи</a></li>
<li><a href="#">ВМК Шале</a></li>
</ul>
</div>
</div>
</li>
</ul>
<!-- /Каталог товаров -->



НА ЧТО ЗАМЕНИТЬ ССЫЛКУ: background: #87CDFF; url(http://babylook.me/w...wn-list-bg1.jpg) repeat-x left top;
border-top: 1px solid #0891FA;


Что изменить здесь:

#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: #49892a;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#000000;
}
#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/w...wn-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: 170px;}
.dropdown_2columns {width: 340px;}
.dropdown_3columns {width: 510px;}
.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:16px;
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:14px;
color: black;
}
#menu li:hover div a:hover {
color: #1a4780;
font-weight:bold;
}

.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:150px;
}
#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;
}

#33 Flor@@

Flor@@

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

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

Отправлено 04 Март 2013 - 03:52

вот еще вопросы на скрине:
Изображение

#34 support 2.0

support 2.0

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

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

Отправлено 04 Март 2013 - 15:49

Просмотр сообщенияotdyh-i-son.ru (04 Март 2013 - 03:52) писал:

вот еще вопросы на скрине:
Изображение

Для начала в шаблоне HTML измените строчки
<!-- Каталог -->
<a href="{CATALOG_URL}" class="indexPage">КАТАЛОГ ТОВАРОВ</a>
<ul id="menu">
<li><a href="href=" http:="" otdyh-i-son.ru="" page="" catalog"="" class="drop">Каталог товаров </a>
<div class="dropdown_4columns nav-sub">

на
<!-- Каталог --><ul id="menu">
<li><a href="{CATALOG_URL}" class="indexPage">КАТАЛОГ ТОВАРОВ</a>
<div class="dropdown_4columns nav-sub">

теперь измените в шаблоне HTML строчки
<ul style="margin-left:10px;">

на 
<ul>

теперь в main.css найдите блок
.col_1 {
width: 303px;
}

измените на
.col_1 {
width: 123px;
}

и также найдите блок
#menu h3 {
font-size: 16px;
margin: 7px 0 14px 0;
padding-bottom: 7px;
border-bottom: 1px solid #888888;
}

измените на
#menu h3 {
font-size: 16px;
margin: 7px 15px 14px -11px;
padding-bottom: 7px;
border-bottom: 1px solid #888888;
height:42px;
}

также найдите строчку
#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 {
font-size: 12px;
line-height: 24px;
position: relative;
text-shadow: 1px 1px 1px #ffffff;
padding: 0;
margin: 0;
float: none;
text-align: left;
width: 120px;
}

и наконец строчку в main.css
background: #87CDFF; url(http://babylook.me/w...wn-list-bg1.jpg) repeat-x left top;

замените просто на
background: #87CDFF;

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

  • ScreenShot 173.png

#35 Flor@@

Flor@@

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

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

Отправлено 05 Март 2013 - 03:51

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

у меня на сайте остался дубль каталога старого обернутого в <div> дубля top-menu:

<!-- Дубль верхнего блока навигации, каталог -->
<div class="containerin" id="top-menu2">
<ul>
{%IFNOT catalog_empty %}
<select name="brand" onchange="javascript:if(this.value!=-1&amp;&amp;this.value){window.location=this.value;}">
<option value="-1"> Выберите бренд</option>
{% FOR catalog_full %}
{% IF catalog_full.HIDE %}
<option style="width: 145px; font-size:14px" value="{catalog_full.URL}">{catalog_full.NAME}</option>
{% ENDIF %}
{% ENDFOR %}
</select>
{% ENDIF %}
</li>
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
{% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
<li class="
level{catalog_full.LEVEL}
nav-{catalog_full.index}
{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
{% IF catalog_full.HIDE %}hide{% ENDIF %}
">
<a href="{catalog_full.URL}">
<span style="display: inline;">{catalog_full.NAME}</span>
{% IF catalog_full.NAME=Матрасы тонкие и наматрасники%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Все детские матрасы%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Лонакс%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Magniflex%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Александрия%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Виртуоз%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы DreamLine%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Аннита%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Лонакс Премиум%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Дримпром%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Мебель Интер-М%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Спальни%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Кровати Letta%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Детские комнаты по производителям%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Детские диваны%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Тахты%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Глазовмебель%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=ДАЧНАЯ МЕБЕЛЬ%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=РАСПРОДАЖА И АКЦИИ%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...idka2.gif?3944" />{% ENDIF %}
{% IF catalog_full.NAME=РАСПРОДАЖА И АКЦИИ%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
</a>
<!--{% IF catalog_full.GOODS_COUNT>0 %}
({catalog_full.GOODS_COUNT})
{% ENDIF %}-->
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
{%ENDFOR%}
{%ENDIF%}

</li>

&lt;script language="JavaScript">
function createBookmark(name) {
we = window.external;
if (!we) {
return true;
} else {
we.addFavorite('http://otdyh-i-son.ru, матрасы и кровати от производителя);
return false;
}
}
</script>
</ul>

<div class="clr"></div>
</div>
<!-- end Дубль верхнего блока навигации, каталог -->
Я так понимаю, я его удаляю?

но перед удалением хотела бы сказать, что хочу видеть новое меню именно в виде дубля top menu, то есть в виде второй строки меню, расположенной под основным верхним меню как на выше приведенной ссылке в начале данного сообщения,во-первых для того чтобы нормально были бы реализованы подменю (=подкатегории).
Возникние проблемы:
1. исчезла иерархия по категориям и подкатегориям - невозможно войти ни в одну подкатегорию. То естьподкатегории на данный момент не работают и это ужасно!!!!!
2. как добавить горизонтальные разделительные линии на выпадающем меню, они есть и в примеденно мной примере и на сайте топикстартера.
3. пропала сортировка по бренду, которая осуществлялась при помощи скрытых меню каталога в папке "Другое".
4. при реализации меню в виде верхнего меню необходимо строчки меню сделать шире, чтобы сдвоенные названия категорий и подкатегорий проходили по ширине.
Нужно что-то типа этого:
Изображение

Сообщение отредактировал otdyh-i-son.ru: 05 Март 2013 - 05:47

#36 support 2.0

support 2.0

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

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

Отправлено 05 Март 2013 - 11:56

Просмотр сообщенияotdyh-i-son.ru (05 Март 2013 - 03:51) писал:

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

у меня на сайте остался дубль каталога старого обернутого в <div> дубля top-menu:

<!-- Дубль верхнего блока навигации, каталог -->
<div class="containerin" id="top-menu2">
<ul>
{%IFNOT catalog_empty %}
<select name="brand" onchange="javascript:if(this.value!=-1&amp;&amp;this.value){window.location=this.value;}">
<option value="-1"> Выберите бренд</option>
{% FOR catalog_full %}
{% IF catalog_full.HIDE %}
<option style="width: 145px; font-size:14px" value="{catalog_full.URL}">{catalog_full.NAME}</option>
{% ENDIF %}
{% ENDFOR %}
</select>
{% ENDIF %}
</li>
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
{% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
<li class="
level{catalog_full.LEVEL}
nav-{catalog_full.index}
{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
{% IF catalog_full.HIDE %}hide{% ENDIF %}
">
<a href="{catalog_full.URL}">
<span style="display: inline;">{catalog_full.NAME}</span>
{% IF catalog_full.NAME=Матрасы тонкие и наматрасники%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Все детские матрасы%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Лонакс%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Magniflex%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Александрия%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Виртуоз%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы DreamLine%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Аннита%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Лонакс Премиум%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Матрасы Дримпром%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Мебель Интер-М%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Спальни%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Кровати Letta%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Детские комнаты по производителям%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...трелка11-1.gif" />{% ENDIF %}
{% IF catalog_full.NAME=Детские диваны%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Тахты%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=Глазовмебель%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=ДАЧНАЯ МЕБЕЛЬ%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
{% IF catalog_full.NAME=РАСПРОДАЖА И АКЦИИ%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...idka2.gif?3944" />{% ENDIF %}
{% IF catalog_full.NAME=РАСПРОДАЖА И АКЦИИ%}<img style="vertical-align: middle;" src="http://otdyh-i-son.r...категориям.jpg" />{% ENDIF %}
</a>
<!--{% IF catalog_full.GOODS_COUNT>0 %}
({catalog_full.GOODS_COUNT})
{% ENDIF %}-->
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
{%ENDFOR%}
{%ENDIF%}

</li>

&lt;script language="JavaScript">
function createBookmark(name) {
we = window.external;
if (!we) {
return true;
} else {
we.addFavorite('http://otdyh-i-son.ru, матрасы и кровати от производителя);
return false;
}
}
</script>
</ul>

<div class="clr"></div>
</div>
<!-- end Дубль верхнего блока навигации, каталог -->
Я так понимаю, я его удаляю?

но перед удалением хотела бы сказать, что хочу видеть новое меню именно в виде дубля top menu, то есть в виде второй строки меню, расположенной под основным верхним меню как на выше приведенной ссылке в начале данного сообщения,во-первых для того чтобы нормально были бы реализованы подменю (=подкатегории).
Возникние проблемы:
1. исчезла иерархия по категориям и подкатегориям - невозможно войти ни в одну подкатегорию. То естьподкатегории на данный момент не работают и это ужасно!!!!!
2. как добавить горизонтальные разделительные линии на выпадающем меню, они есть и в примеденно мной примере и на сайте топикстартера.
3. пропала сортировка по бренду, которая осуществлялась при помощи скрытых меню каталога в папке "Другое".
4. при реализации меню в виде верхнего меню необходимо строчки меню сделать шире, чтобы сдвоенные названия категорий и подкатегорий проходили по ширине.
Нужно что-то типа этого:
Изображение

Для начала Вам нужно создать 7 меню в разделе Сайт -> меню
1)  список для пункта Матрасы
2) для пункта Матрасы по производителям
3) для пункта кровати
4) для пункта спальни
5) для пункта кровати по производителям
6) для пункта Детская комната
7) для пункта Аксессуары и прочее

Далее в шаблон HTML сразу после строчки
<div class="content_page">

вставьте
	 <!-- end Верхний блок навигации -->
<div class="containerin" id="top-menu">
<ul class="pad-box cont620" id="mainmenu2">
	 <li><a href="#" title="МАТРАСЫ">МАТРАСЫ</a>
		 <ul>
			 {% FOR menu %}
				 {% FOR header1 %}
					 {% FOR links %}
						 <li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
					 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
		 </ul>
	 </li>
	 <li><a href="#" title="МАТРАСЫ ПО ПРОИЗВОДИТЕЛЯМ">МАТРАСЫ ПО ПРОИЗВОДИТЕЛЯМ</a>
		 <ul>
			 {% FOR menu %}
				 {% FOR header %}
					 {% FOR links %}
						 <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
					 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
		 </ul>
	 </li>
	 <li><a href="#" title="КРОВАТИ">КРОВАТИ</a>
		 <ul>
			 {% FOR menu %}
				 {% FOR header %}
					 {% FOR links %}
						 <li><a href="{menu.header3.links.URL}" {% IF menu.header3.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header3.links.TITLE %}title="{menu.header3.links.TITLE}"{% ENDIF %}>{menu.header3.links.NAME}</a></li>
					 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
		 </ul>
	 </li>
	 <li><a href="#" title="СПАЛЬНИ">СПАЛЬНИ</a>
		 <ul>
			 {% FOR menu %}
				 {% FOR header %}
					 {% FOR links %}
						 <li><a href="{menu.header4.links.URL}" {% IF menu.header4.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header4.links.TITLE %}title="{menu.header4.links.TITLE}"{% ENDIF %}>{menu.header4.links.NAME}</a></li>
					 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
		 </ul>
	 </li>
<li><a href="#" title="КРОВАТИ ПО ПРОИЗВОДИТЕЛЯМ">КРОВАТИ ПО ПРОИЗВОДИТЕЛЯМ</a>
		 <ul>
			 {% FOR menu %}
				 {% FOR header %}
					 {% FOR links %}
						 <li><a href="{menu.header5.links.URL}" {% IF menu.header5.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header5.links.TITLE %}title="{menu.header5.links.TITLE}"{% ENDIF %}>{menu.header5.links.NAME}</a></li>
					 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
		 </ul>
	 </li>
<li><a href="#" title="ДЕТСКАЯ КОМНАТА">ДЕТСКАЯ КОМНАТА</a>
		 <ul>
			 {% FOR menu %}
				 {% FOR header %}
					 {% FOR links %}
						 <li><a href="{menu.header6.links.URL}" {% IF menu.header6.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header6.links.TITLE %}title="{menu.header6.links.TITLE}"{% ENDIF %}>{menu.header6.links.NAME}</a></li>
					 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
		 </ul>
	 </li>
<li><a href="#" title="АКСЕССУАРЫ И ПРОЧЕЕ">АКСЕССУАРЫ И ПРОЧЕЕ</a>
		 <ul>
			 {% FOR menu %}
				 {% FOR header %}
					 {% FOR links %}
						 <li><a href="{menu.header7.links.URL}" {% IF menu.header7.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header7.links.TITLE %}title="{menu.header7.links.TITLE}"{% ENDIF %}>{menu.header7.links.NAME}</a></li>
					 {% ENDFOR %}
				 {% ENDFOR %}
			 {% ENDFOR %}
		 </ul>
	 </li>


</ul>
<div class="clr"></div>
<hr>
</div>

далее в файле main.css сразу после
#mainmenu li:hover ul {
display: block;
}

вставьте
/* каталог меню */
#mainmenu2 li a {
color: black;
display: block;
float: left;
font: bold 12px/30px Helvetica,Tahoma,Arial,sans-serif;
margin: 2px;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
text-transform: uppercase;
}

#mainmenu2 li a:hover {
background: none repeat-x scroll center bottom #AFEEEE;
border: 2px solid grey;
border-radius: 15px 15px 15px 15px;
margin: 0;
}

#mainmenu2 li a.home {}
}
#mainmenu2 {
width: 100%;
}
#mainmenu2 li {
display: block;
float: left;
}
#mainmenu2 li ul {
background: none repeat scroll 0 0 #AFEEEE;
border-radius: 20px 20px 20px 20px;
display: none;
position: absolute;
top: 40px;
width: 300px;
z-index: 2;
}
#mainmenu2 li ul li {
display: block;
float: none;
}
#mainmenu2 li ul li a {
width: 92%;
font: 13.5px/20px Helvetica,Tahoma,Arial,sans-serif;
color: #181818;
}
#mainmenu2 li:hover ul {
display: block;
}
/* END каталог меню */

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

  • ScreenShot 174.png

#37 Flor@@

Flor@@

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

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

Отправлено 05 Март 2013 - 13:53

огромное спасибо, все заработало, теперь очень хотелось бы уточнить:

1. Как выделить фон для данного "меню" цветом, полосой например зеленого цвета, задать меню backgraund? Как удлинить само созданное меню.

2. вернуть=добавить заново иерархию по категориям и подкатегориям - пока что удалось реализовать категории, а подкатегории не работают.

3. Подскажите, пожалуйста, в каком конкретно блоке main.CSS можно покрутить показатели: цвет, шрифт и т.п., чтобы наладить дизайн выпадающего меню каталога? НАШЛА ВРОДЕ!!

4. восстановить сортировку по бренду, которая успешно осуществлялась ранее при помощи скрытых меню каталога в папке "Другое".

5. Как удалить лишние, устаревшие теперь коды меню, не нарушив общего кода?

Хотелось бы как на скрине.

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

  • вид сайта 20.jpg

Сообщение отредактировал otdyh-i-son.ru: 05 Март 2013 - 14:36

#38 Flor@@

Flor@@

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

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

Отправлено 05 Март 2013 - 14:16

не то.

#39 miyako

miyako

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

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

Отправлено 05 Март 2013 - 14:17

Просмотр сообщенияotdyh-i-son.ru (05 Март 2013 - 13:53) писал:

огромное спасибо, все заработало, теперь очень хотелось бы уточнить:

1. Как задать для данного меню дизайн отдельный, отличный от главного вверхнего меню. Хотя бы выделить данное "меню" полосой например зеленого цвета, задать меню backgraund? Как удлинить само созданное меню.

2. вернуть=добавить заново иерархию по категориям и подкатегориям - пока что удалось реализовать категории, а подкатегории не работают.

3. В каком блоке main.CSS можно покрутить показатели: цвет, шрифт и т.п., чтобы наладить дизайн выпадающего меню каталога?

4. восстановить сортировку по бренду, которая успешно осуществлялась ранее при помощи скрытых меню каталога в папке "Другое".

5. Как удалить лишние, устаревшие теперь коды меню, не нарушив общего кода?

Хотелось бы как на скрине.

Шрифт, цвет здесь:
#menu li:hover div a {
font-size: 14px;
color: black;
}
попробуйте заменить на:
#menu li:hover div a {
font-size: 14px;
color: red;
font-family: arial;
}

#40 support 2.0

support 2.0

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

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

Отправлено 05 Март 2013 - 14:46

Просмотр сообщенияotdyh-i-son.ru (05 Март 2013 - 13:53) писал:

огромное спасибо, все заработало, теперь очень хотелось бы уточнить:

1. Как задать для данного меню дизайн отдельный, отличный от главного вверхнего меню. Хотя бы выделить данное "меню" полосой например зеленого цвета, задать меню backgraund? Как удлинить само созданное меню.

2. вернуть=добавить заново иерархию по категориям и подкатегориям - пока что удалось реализовать категории, а подкатегории не работают.

3. В каком блоке main.CSS можно покрутить показатели: цвет, шрифт и т.п., чтобы наладить дизайн выпадающего меню каталога?

4. восстановить сортировку по бренду, которая успешно осуществлялась ранее при помощи скрытых меню каталога в папке "Другое".

5. Как удалить лишние, устаревшие теперь коды меню, не нарушив общего кода?

Хотелось бы как на скрине.

1. в шаблоне html найдите <hr> и уберите его
в файле main.css найдите блок
#mainmenu2 li a {
	color: black;
	display: block;
	float: left;
	font: bold 12px/30px Tahoma,Arial,sans-serif;
	margin: 2px;
	padding-left: 3px;
	padding-right: 3px;
	text-decoration: none;
	text-transform: uppercase;
}

замените на
#mainmenu2 li a {
	color: black;
	display: block;
	float: left;
	font: bold 11px/30px Tahoma,Arial,sans-serif;
	padding-left: 3px;
	padding-right: 3px;
	text-decoration: none;
	text-transform: uppercase;
}

далее для того, чтобы фон у меню стал другой, перед блоком
#mainmenu2 li {
	display: block;
	float: left;
}

вставьте
#mainmenu2 {
	background: green;
	-moz-border-radius: 20px; /* Для Firefox 3 */
	-webkit-border-radius: 20px; /* Для Safari 4 и Chrome */
	border-radius: 20px; /* Для современных браузеров */
}

green естественно можете поменять на любой другой
Если фон вам не нужен, этот блок просто не ставите. Для того, чтобы поменять вид кнопок при наведении, найдите блок
#mainmenu2 li a:hover {
	background: none repeat-x scroll center bottom #AFEEEE;
	border: 2px solid grey;
	border-radius: 15px 15px 15px 15px;
	margin: 0;
}
#AFEEEE - фон кнопок при наведении
grey - рамка вокруг

для меню второго уровня
#mainmenu2 li ul {
	background: none repeat scroll 0 0 #AFEEEE;
	border-radius: 20px 20px 20px 20px;
	display: none;
	position: absolute;
	top: 40px;
	width: 300px;
	z-index: 2;
}
#AFEEEE - фон

и блок
#mainmenu2 li ul li a {
	color: #181818;
	font: 13.5px/20px Helvetica,Tahoma,Arial,sans-serif;
	width: 92%;
}
#181818; - цвет текста меню второго уровня

для удаления кода меню пришлите код шаблона HTML
Обратно в Общие вопросы


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

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

  1. Форум владельцев интернет-магазинов
  2. → Повышение продаж, продвижение
  3. → Общие вопросы
  4. Privacy Policy