Навигация Меню
#1
Отправлено 04 Февраль 2013 - 17:53
#2
Отправлено 04 Февраль 2013 - 18:02
Infiniti (04 Февраль 2013 - 17:53) писал:
http://forum.storela...егорию-товаров/
#3
Отправлено 06 Февраль 2013 - 07:46
#5
Отправлено 06 Февраль 2013 - 12:35
#6
Отправлено 06 Февраль 2013 - 13:23
Infiniti (06 Февраль 2013 - 12:35) писал:
Что у вас конкретно не получилось? Приложите скриншот с тем, как у вас получилось в результате
#7
Отправлено 07 Февраль 2013 - 11:01
support 2.0 (06 Февраль 2013 - 13:23) писал:
Сегодня попробовала 2-ой раз. Вот что получилось. Подскажите, пожалуйста, что я не так делаю. Уже 3-й день бьюсь с этим меню и все никак не могу разобраться. Спасибо!
#8
Отправлено 07 Февраль 2013 - 11:23
Home------------Чистая кожа вместе с Clariconic-------Приемущества от Sonic-------------Магазин------------FAQ---------Доставка и оплата-------Вход в лич.каб
(новости) - 4 подраздела в этом разделе - 2 подраздела
я создала 6 дополнительных меню как вы говорили
прописала код
<!-- Верхний блок навигации -->
<div class="containerin" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
<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="На главную">Чистая кожа вместе с Clarisonic</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="На главную">Преимущества от Sonic</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="На главную">FAQ</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>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->
затем прописала стили main.css
/*menu*/
/*main menu*/
#top-menu {height: 40px;} #mainmenu li, #langmenu li { display:inline;}
#mainmenu {
width: 100%;
}
#mainmenu li {
display: block;
float: left;
}
#mainmenu li ul {
background: none repeat scroll 0 0 #FF9933;
position: absolute;
top: 185px;
z-index: 2;
display: none;
}
#mainmenu li ul li {
display: block;
float: none;
}
#mainmenu li ul li a {
width: 92%;
}
#mainmenu li:hover ul {
display: block;
}
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}
/* Все уровни */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; font-weight:bold; color:#CDCDCD; line-height:normal;}
#nav li a:hover { color:#333333; }
#nav li.over a,
#nav li.active a { color:#333333; }
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
#nav ul li { float:none; border-bottom:1px solid #FFF; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
#nav ul li a:hover { color:#FFF !important; background:#333333; }
#nav ul li.active a,
#nav ul li.over a { color:#FFF !important; background:#333333; }
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }
/* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
/********** Navigation > */
Подскажите, что не так и что куда вставить или заменить. Спасибо.
#9
Отправлено 07 Февраль 2013 - 12:36
Infiniti (07 Февраль 2013 - 11:23) писал:
Home------------Чистая кожа вместе с Clariconic-------Приемущества от Sonic-------------Магазин------------FAQ---------Доставка и оплата-------Вход в лич.каб
(новости) - 4 подраздела в этом разделе - 2 подраздела
я создала 6 дополнительных меню как вы говорили
прописала код
<!-- Верхний блок навигации -->
<div class="containerin" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
<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="На главную">Чистая кожа вместе с Clarisonic</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="На главную">Преимущества от Sonic</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="На главную">FAQ</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>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->
затем прописала стили main.css
/*menu*/
/*main menu*/
#top-menu {height: 40px;} #mainmenu li, #langmenu li { display:inline;}
#mainmenu {
width: 100%;
}
#mainmenu li {
display: block;
float: left;
}
#mainmenu li ul {
background: none repeat scroll 0 0 #FF9933;
position: absolute;
top: 185px;
z-index: 2;
display: none;
}
#mainmenu li ul li {
display: block;
float: none;
}
#mainmenu li ul li a {
width: 92%;
}
#mainmenu li:hover ul {
display: block;
}
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}
/* Все уровни */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; font-weight:bold; color:#CDCDCD; line-height:normal;}
#nav li a:hover { color:#333333; }
#nav li.over a,
#nav li.active a { color:#333333; }
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
#nav ul li { float:none; border-bottom:1px solid #FFF; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
#nav ul li a:hover { color:#FFF !important; background:#333333; }
#nav ul li.active a,
#nav ul li.over a { color:#FFF !important; background:#333333; }
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }
/* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
/********** Navigation > */
Подскажите, что не так и что куда вставить или заменить. Спасибо.
Данная тема рассматривалась на темах форума:
http://forum.storela...подающее-меню/
http://forum.storela...е-меню-на-css3/
#10
Отправлено 07 Февраль 2013 - 14:11
miyako (07 Февраль 2013 - 12:36) писал:
http://forum.storela...подающее-меню/
http://forum.storela...е-меню-на-css3/
Мне Ваши ссылки не о чем не говорят. У каждого сайта, свое меню и рассматривается конкретный случай. Я Вас просто попросила мне объяснить, что я делаю не так, а не кидать ссылки на другие темы в форуме. Я и так 2 дня подряд сижу и изучаю каждую из вышепредложенных ссылок, прописываю каждый случай, а ошибки так и не могу найти, что делаю не так.
#11
Отправлено 07 Февраль 2013 - 22:39
{% FOR header1 %}
внутри как и правильно указаны везде данное направление
{menu.header1.links.URL}
т.е используется menu.header1.
ниже у вас уже идет
{% FOR header %}
а внутри вы почему-то прописали
{menu.header2.links.URL}
далее идет
{menu.header3.links.URL}
полный пример
{% 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 %}
должно быть
{% FOR menu %} {% FOR header4 %} {% 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 %}
вероятно вы при копировании и замене допустили ошибку. Так же проверьте что создали меню в разделе Сайт -> Меню с такими идентификаторами как header1, header2, header3, header4
#12
Отправлено 08 Февраль 2013 - 07:49
Vaccina (07 Февраль 2013 - 22:39) писал:
{% FOR header1 %}
внутри как и правильно указаны везде данное направление
{menu.header1.links.URL}
т.е используется menu.header1.
ниже у вас уже идет
{% FOR header %}
а внутри вы почему-то прописали
{menu.header2.links.URL}
далее идет
{menu.header3.links.URL}
полный пример
{% 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 %}
должно быть
{% FOR menu %} {% FOR header4 %} {% 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 %}
вероятно вы при копировании и замене допустили ошибку. Так же проверьте что создали меню в разделе Сайт -> Меню с такими идентификаторами как header1, header2, header3, header4
Спасибо огромное!
Исправила, но вот снова получилось на сайте вот такое. Значит где-то я снова допустила ошибку, хотя я все исправила как Вы мне говорили Помогите мне, пожалуйста, очень прошу Вас! У меня уже кругом голова от этих тегов и скриптов.
#13
Отправлено 08 Февраль 2013 - 08:43
Infiniti (08 Февраль 2013 - 07:49) писал:
Исправила, но вот снова получилось на сайте вот такое. Значит где-то я снова допустила ошибку, хотя я все исправила как Вы мне говорили Безымянный1.jpg Безымянный2.jpg Помогите мне, пожалуйста, очень прошу Вас! У меня уже кругом голова от этих тегов и скриптов.
Чтобы ссылка отображала действительную информацию, а не всегда "На главную", то в вашем коде нужно изменить такую строку:
title="На главную"В зависимости от того какую информацию содержит меню. Например, если это ссылка "Доставка и Оплата", то вместо:
title="На главную"нужно вставить:
title="Доставка и Оплата"
Вам нужно вставить в файл main.js код:
$(document).ready(function(){ // Действие при наведении на меню категорий, для возможности отображения вложенного подменю $('#nav li').hover( function () { $(this).addClass('over'); }, function () { $(this).removeClass('over'); } ); });
#14
Отправлено 08 Февраль 2013 - 09:33
miyako (08 Февраль 2013 - 08:43) писал:
title="На главную"В зависимости от того какую информацию содержит меню. Например, если это ссылка "Доставка и Оплата", то вместо:
title="На главную"нужно вставить:
title="Доставка и Оплата"
Вам нужно вставить в файл main.js код:
$(document).ready(function(){ // Действие при наведении на меню категорий, для возможности отображения вложенного подменю $('#nav li').hover( function () { $(this).addClass('over'); }, function () { $(this).removeClass('over'); } ); });
Пишу о том что я продела. И получилось вообще не то что хотелось. Помогите!!! Просто крик помощи у меня. ПОЖАЛУЙСТА!
1 шаг: Заменила блог навигации на
<!-- Верхний блок навигации -->
<div class="containerin" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
<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="Чистая кожа вместе с Clarisonic">Чистая кожа вместе с Clarisonic</a>
<ul>
{% FOR menu %}
{% FOR header2 %}
{% 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="Преимущества от Sonic">Преимущества от Sonic</a>
<ul>
{% FOR menu %}
{% FOR header3 %}
{% 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 header4 %}
{% 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="FAQ">FAQ</a>
<ul>
{% FOR menu %}
{% FOR header5 %}
{% 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 header6 %}
{% 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>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->
2 шаг: вставила в файл main.js код:
$(document).ready(function(){
// Действие при наведении на меню категорий, для возможности отображения вложенного подменю
$('#nav li').hover(
function () {
$(this).addClass('over');
},
function () {
$(this).removeClass('over');
}
);
});
3 шаг: добавила стили в main.css
/*menu*/
/*main menu*/
#top-menu {height: 40px;} #mainmenu li, #langmenu li { display:inline;}
#mainmenu {
width: 100%;
}
#mainmenu li {
display: block;
float: left;
}
#mainmenu li ul {
background: none repeat scroll 0 0 #FF9933;
position: absolute;
top: 185px;
z-index: 2;
display: none;
}
#mainmenu li ul li {
display: block;
float: none;
}
#mainmenu li ul li a {
width: 92%;
}
#mainmenu li:hover ul {
display: block;
}
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}
/* Все уровни */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; font-weight:bold; color:#CDCDCD; line-height:normal;}
#nav li a:hover { color:#333333; }
#nav li.over a,
#nav li.active a { color:#333333; }
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
#nav ul li { float:none; border-bottom:1px solid #FFF; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
#nav ul li a:hover { color:#FFF !important; background:#333333; }
#nav ul li.active a,
#nav ul li.over a { color:#FFF !important; background:#333333; }
/* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
/********** Navigation > */
#15
Отправлено 08 Февраль 2013 - 14:54
#17
Отправлено 08 Февраль 2013 - 17:08
#19
Отправлено 08 Февраль 2013 - 17:53
Infiniti (08 Февраль 2013 - 14:54) писал:
Итак, вот инструкция для конкретно Вашего меню. Однако Вам придется вернуть все изменения обратно (по умолчанию)
Создайте меню (Сайт -> Меню) 2 меню для раздела Чистая кожа вместе с Clarisonic (имя переменной задайте header1) и для раздела Преимущества от Sonic (имя переменной header2)
В разделе Сайт -> Редактор тем -> шаблон HTML для меню был код:
<!-- Верхний блок навигации --> <div class="containerin" id="top-menu"> <ul class="pad-box cont620" id="mainmenu"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> <div class="clr"></div> </div> <!-- end Верхний блок навигации -->
его нужно заменить на этот
<!-- Верхний блок навигации --> <div class="containerin" id="top-menu"> <ul class="pad-box cont620" id="mainmenu"> <li><a href="http://{NET_DOMAIN}/" title="На главную">Главная</a> </li> <li><a href="/page/Чистая-кожа-вместе-с-Clarisonic" title="Чистая кожа вместе с Clarisonic">Чистая кожа вместе с Clarisonic</a> <ul class="podmenu1"> {% FOR menu %} {% FOR header1 %} {% FOR links %} <li class="podmenu11"><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="/page/Чистая-кожа-вместе-с-Clarisonic" title="Преимущества от Sonic">Преимущества от Sonic</a> <ul class="podmenu2"> {% FOR menu %} {% FOR header2 %} {% FOR links %} <li class="podmenu22"><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="{CATALOG_URL}" title="Магазин">Магазин</a> </li> <li><a href="/page/FAQ-Вопросы-и-ответы" title="FAQ - Вопросы и ответы">FAQ</a> </li> <li><a href="/page/Доставка" title="Доставка и оплата">Доставка и оплата</a> </li> {% IF ORDER_FORM_CONTACT_WANT_REGISTER %}<li><a href="/user/settings" title="Личный кабинет">Личный кабинет</a> </li> {% ENDIF %} {% IFNOT ORDER_FORM_CONTACT_WANT_REGISTER %}<li><a href="/user/login" title="Войти в ЛК">Войти в ЛК</a> </li> {% ENDIF %} {% IF ORDER_FORM_CONTACT_WANT_REGISTER %}<li><a href="/user/logout" title="Выйти в ЛК">Выход</a> </li> {% ENDIF %} </ul> <div class="clr"></div> </div> <!-- end Верхний блок навигации -->
далее в конце файла main.css добавьте блок
#mainmenu{ position:relative; } #mainmenu li{ display: block !important; float: left; } .podmenu1 { display: none; left: 0; width:200px; position: absolute; top: 39px; z-index:99; } .podmenu2 { display: none; left: 306px; width:200px; position: absolute; top: 39px; z-index:99; } #mainmenu li:hover ul{display:block;} .podmenu11{ width:214px; padding:10px; border-bottom:1px solid #000; background: rgb(39, 37, 37); margin-left: 71px; } .podmenu22{ width: 151px; padding:10px; border-bottom:1px solid #000; background:rgb(39, 37, 37); } #mainmenu li ul li a{ font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif; padding: 0px; background:none; } #mainmenu li ul li a:hover{ background:none; color:rgb(205, 226, 236); }
блок, который отвечает за фон и цвет ссылок в подменю при наведении:
#mainmenu li ul li a:hover{ background:none; color:rgb(205, 226, 236); }
блоки, которые отвечают за первый под блок меню и второй под блок меню:
.podmenu11{ width:214px; padding:10px; border-bottom:1px solid #000; background: rgb(39, 37, 37); margin-left: 71px; } .podmenu22{ width: 151px; padding:10px; border-bottom:1px solid #000; background:rgb(39, 37, 37); }Здесь Вы сможете изменить цвет фона этих блоков
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных