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


Навигация Меню


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

#1 Infiniti

Infiniti

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

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

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

На сайте http://my-mia.ru/ в меню в разделе Преимущества от Sonic я хотела бы сделать 2 подраздела. Подскажите, пожалуйста, как нужно правильно это сделать. Я в этом деле чайник. Заранее спасибо!

#2 mikola

mikola

    Good soo good

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

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

 Infiniti (04 Февраль 2013 - 17:53) писал:

На сайте http://my-mia.ru/ в меню в разделе Преимущества от Sonic я хотела бы сделать 2 подраздела. Подскажите, пожалуйста, как нужно правильно это сделать. Я в этом деле чайник. Заранее спасибо!
думаю стоит почитать в этой теме
http://forum.storela...егорию-товаров/

#3 Infiniti

Infiniti

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

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

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

Спасибо за ответ! Но Вы меня немного не поняли. Мне в главном горизонтальном меню необходимо сделать по несколько подразделов выпадающего меню. А не в меню каталога. Чтобы курсор мышки наводился на раздел главного горизонтального меню и на выбор предлагалось несколько подразделов тем,т.е. страница имела еще 2-3 подстраницы. Я пробовала то что Вы мне посоветовали, но такое меню отдельно создается для товаров в каталоге, а мне нужна просто дополнительная информация в горизонтальном разделе меню. Заранее спасибо!

#4 Koderhan

Koderhan

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

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

Отправлено 06 Февраль 2013 - 08:06

http://forum.storela...ыпадающее-меню/

#5 Infiniti

Infiniti

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

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

Отправлено 06 Февраль 2013 - 12:35

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

#6 support 2.0

support 2.0

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

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

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

 Infiniti (06 Февраль 2013 - 12:35) писал:

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

Что у вас конкретно не получилось? Приложите скриншот с тем, как у вас получилось в результате

#7 Infiniti

Infiniti

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

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

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

 support 2.0 (06 Февраль 2013 - 13:23) писал:

Что у вас конкретно не получилось? Приложите скриншот с тем, как у вас получилось в результате

Сегодня попробовала 2-ой раз. Вот что получилось. Подскажите, пожалуйста, что я не так делаю. Уже 3-й день бьюсь с этим меню и все никак не могу разобраться. Спасибо!

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

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


#8 Infiniti

Infiniti

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

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

Отправлено 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 miyako

miyako

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

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

Отправлено 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 Infiniti

Infiniti

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

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

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

 miyako (07 Февраль 2013 - 12:36) писал:

Данная тема рассматривалась на темах форума:
http://forum.storela...подающее-меню/
http://forum.storela...е-меню-на-css3/

Мне Ваши ссылки не о чем не говорят. У каждого сайта, свое меню и рассматривается конкретный случай. Я Вас просто попросила мне объяснить, что я делаю не так, а не кидать ссылки на другие темы в форуме. Я и так 2 дня подряд сижу и изучаю каждую из вышепредложенных ссылок, прописываю каждый случай, а ошибки так и не могу найти, что делаю не так.

#11 Vaccina

Vaccina

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

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

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

У вас присутствует не корректный код в шаблоне "HTML". Вы указали меню

{% 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 Infiniti

Infiniti

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

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

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

 Vaccina (07 Февраль 2013 - 22:39) писал:

У вас присутствует не корректный код в шаблоне "HTML". Вы указали меню

{% 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


Спасибо огромное!  
Исправила, но вот снова получилось на сайте вот такое. Значит где-то я снова допустила ошибку, хотя я все исправила как Вы мне говорили Безымянный1.jpg Безымянный2.jpg Помогите мне, пожалуйста, очень прошу Вас! У меня уже кругом голова от этих тегов и скриптов.

#13 miyako

miyako

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

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

Отправлено 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 Infiniti

Infiniti

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

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

Отправлено 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 Infiniti

Infiniti

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

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

Отправлено 08 Февраль 2013 - 14:54

Помогите мне, пожалуйста! Не доходит до меня как все сделать правильно.

#16 Infiniti

Infiniti

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

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

Отправлено 08 Февраль 2013 - 16:41

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

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

  • Безымянный4.jpg
  • Безымянный5.jpg


#17 Koderhan

Koderhan

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

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

Отправлено 08 Февраль 2013 - 17:08

Пожалуйста, не могли бы сообщить адрес магазина или номер аккаунта.

#18 Infiniti

Infiniti

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

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

Отправлено 08 Февраль 2013 - 17:42

 Koderhan (08 Февраль 2013 - 17:08) писал:

Пожалуйста, не могли бы сообщить адрес магазина или номер аккаунта.

Аккаунт SL-171620

#19 support 2.0

support 2.0

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

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

Отправлено 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);
}
Здесь Вы сможете изменить цвет фона этих блоков

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

  • ScreenShot 123.png
  • ScreenShot 124.png


#20 Infiniti

Infiniti

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

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

Отправлено 08 Февраль 2013 - 18:35

Спасибо огромное за помощь! Но у меня вылезла ошибка когда прописала и сохранила код в HTML

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

  • Безымянный7.jpg





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

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