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

[tega4]

Доброго времени, подскажите как сделать открывающийся каталог из верхнего меню?
В меню добавила ссылку "каталог товаров", а как сделать чтобы при наведении на неё выпадало окошко и в нем были раскрытые категории? При этом не убирать список каталога из боковой колонки?
Пример на картинке.
SL-268427
[attachment=19350:меню.jpg]

[Vaccina]

Инструкция по реализации выпадающего меню:
http://forum.storela...ыпадающее-меню/

[tega4]

Vaccina (10 Апрель 2014 - 03:28) писал:

Инструкция по реализации выпадающего меню:
http://forum.storela...ыпадающее-меню/

сделала все как описано в инструкции, но это ник чему не привело,кроме того что поехала верстка...
подскажите что делаю не так?

[Vaccina]

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

<!-- Верхний блок навигации -->
<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="На главную">Инфа</a></li>
<li><a href="ссылка" title="На главную">О нас</a></li>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->

[tega4]

Vaccina (11 Апрель 2014 - 05:09) писал:

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

<!-- Верхний блок навигации -->
<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="На главную">Инфа</a></li>
<li><a href="ссылка" title="На главную">О нас</a></li>
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок навигации -->

спасибо,выпадающее меню появилось, но есть проблема без значения overflow: hidden;  едет верстка при наведении на пункт меню "каталог", если вернуть значение, то не показывается список....
да и вообще верстка едет

[MikDark]

tega4 (11 Апрель 2014 - 07:45) писал:

спасибо,выпадающее меню появилось, но есть проблема без значения overflow: hidden;  едет верстка при наведении на пункт меню "каталог", если вернуть значение, то не показывается список....
да и вообще верстка едет

Уточните, пожалуйста, каким браузером пользуетесь и желательно скрин того, где едет верстка.

[tega4]

MikDark (11 Апрель 2014 - 08:54) писал:

Уточните, пожалуйста, каким браузером пользуетесь и желательно скрин того, где едет верстка.

браузер хром[attachment=19442:оллои.JPG]
опера аналогична

[MikDark]

tega4 (11 Апрель 2014 - 11:04) писал:

браузер хром оллои.JPG
опера аналогична

В main.css у Вас есть код

.content_page {
background: #fff;
overflow: hidden;
padding-bottom: 2em;
}

уберите строчку overflow: hidden; У нас вроде все встает на места. Если будут ошибки, назад не меняйте, чтобы можно было посмотреть.

[tega4]

MikDark (11 Апрель 2014 - 11:15) писал:

В main.css у Вас есть код

.content_page {
background: #fff;
overflow: hidden;
padding-bottom: 2em;
}

уберите строчку overflow: hidden; У нас вроде все встает на места. Если будут ошибки, назад не меняйте, чтобы можно было посмотреть.

на главной странице и странице контактов все отображает правильно, как и в каталоге или карточке товара.
а вот на созданных страницах как "доставка" и "?" продолжается сбой.

[Vaccina]

В main.css найдите(ищите по первой строке):

#top-menu {
	background: url("http://f13872.storeland.net/menu.jpg") repeat scroll left center rgba(0, 0, 0, 0);
	border-radius: 10px 10px 0 0;
	height: 25px;
	margin-top: 20px;
	padding-bottom: 15px;
	width: 1000px;
}

добавьте в него стиль position:relative;

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

#mainmenu {
	position: relative;
}

замените на:

#mainmenu {
	left: 0;
	position: absolute;
	top: 0;
}

После данных изменений страница обретет свое старое корректное положение

[tega4]

Vaccina (12 Апрель 2014 - 04:38) писал:

В main.css найдите(ищите по первой строке):

#top-menu {
background: url("http://f13872.storeland.net/menu.jpg") repeat scroll left center rgba(0, 0, 0, 0);
border-radius: 10px 10px 0 0;
height: 25px;
margin-top: 20px;
padding-bottom: 15px;
width: 1000px;
}

добавьте в него стиль position:relative;

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

#mainmenu {
position: relative;
}

замените на:

#mainmenu {
left: 0;
position: absolute;
top: 0;
}

После данных изменений страница обретет свое старое корректное положение

спасибо Вам огромнейшее, выручаете просто безумно!)))

[tega4]

а как корректно внедрить каталог туда, попробовала сама. но не получается это сделать так, как показала на рисунке(

[Vaccina]

Каталог у вас на данный момент вставлен, в main.css найдите:

#mainmenu li a:hover {
	background: url("http://design.slastnicova.ru/menu-hover.jpg") repeat scroll left center rgba(0, 0, 0, 0);
	height: 45px;
	width: auto;
}

удалите height: 45px;

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

#nav1 li a:hover {
	background: #DCDCDC;
	border-left: 3px solid #000000;
	color: #333333;
	font-size: 24px;
	padding: 10px 10px 15px;
}
#nav1 li.over a, #nav1 li.active a {
	background: #DCDCDC;
	border-left: 3px solid #000000;
	color: #333333;
	font-size: 24px;
	padding: 10px 10px 15px;
}

замените на:

#nav1 li a:hover {
	background: #DCDCDC;
	border-left: 3px solid #000000;
	color: #333333;
}
#nav1 li.over a, #nav1 li.active a {
	background: #DCDCDC;
	border-left: 3px solid #000000;
	color: #333333;
}

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

далее находим:

#nav1 li.over ul {
	left: 150px;
}

меняем на:

#nav1 li.over ul {
	left: 245px;
}

[tega4]

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

[Vaccina]

Цитата

открывающийся каталог из верхнего меню

Цитата

нужен просто раскрытый каталог

это немного два разных понятия

Цитата

все равно ошибки

поэтому я продолжаю вам писать инструкции по их устранению.

В шаблоне HTML найдите:

<ul class="pad-box cont620" id="mainmenu">
			  <li><a href="ссылка" title="На главную">каталог</a>
<ul class="nav1-1">
<li>{%IFNOT catalog_full_empty%}
		 {%FOR catalog_full%}
				 {% IF catalog_full.FIRST %}<ul id="nav1">{% 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 %}
				 ">
				 <a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></a>
				 {% 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>
</ul>
</li>

замените на:

<ul class="pad-box cont620" id="mainmenu">
			  <li><a href="ссылка" title="На главную">каталог</a>
{%IFNOT catalog_full_empty%}
		 {%FOR catalog_full%}
				 {% IF catalog_full.FIRST %}<ul id="nav1">{% 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 %}
				 ">
				 <a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></a>
				 {% 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>
</ul>

далее в main.css найдите:

/*ВЫПАДАЮЩИЙ КАТАЛОГ*/
#nav{padding:0px 0px 2px 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; background:url("{ASSETS_IMAGES_PATH}razdel-menu.png")repeat-x left bottom;}
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{font-weight:normal; color:#000; line-height:normal;padding:10px 10px 15px 10px; font-size:24px; background: #fff;}
#nav li a:hover { color:#333333; font-size:24px; background:#dcdcdc; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
#nav li.over a,
#nav li.active a { color:#333333; font-size:24px; background:#dcdcdc; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
/* 2й уровень вложенности */
#nav ul { position:absolute; width:187px; top:-60px; left:-10000px; /*border:3px solid #000;*/ padding:0; background:#fff; font-size:12px;}
#nav ul li { float:none; text-align:center;background:#fff;margin-left:-25px;}
#nav ul li.last { border-bottom:0; background:#fff;}
#nav ul li a { float:none; padding:10px 10px 15px 10px; font-weight:normal; color:#050505 !important; border:1px solid #F8F8FF;background:#fff;}
#nav ul li a:hover { color:#000 !important; background:#fff; border-left: 3px solid #000;padding:10px 10px 15px 10px;}
#nav ul li.active a,
#nav ul li.over a { color:#000 !important; background:#fff; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:-35px; margin-left:-25px; width:187px;}
#nav ul ul li a:hover { color:#333333; font-size:24px; background:#dcdcdc; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
#nav ul ul li.over a,
#nav ul ul li.active a { color:#333333; font-size:24px; background:#dcdcdc; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
/* Видимое меню */
#nav li.over ul { left:150px; }
#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 > */


#mainmenu {
		left: 0;
		position: absolute;
		top: 0;
}
#mainmenu li{
display: block !important;
float: left;
}
#mainmenu li ul {
display: none;
left: 0;
width:200px;
position: absolute;
top: 39px;
z-index:9999;
}
#mainmenu li:hover ul{display:block;z-index:9999;}
#mainmenu li ul li{
width:200px;
padding:10px;
border-bottom:1px solid #000;
background:#999;
z-index:9999;
}
#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;
}

.moi {
  margin-top:-20px;
}
.knopci {
  position: absolute;
  float:left;
  margin-left:200px !important;
  margin-top:-50px;
}
/*ВЫПАДАЮЩИЙ КАТАЛОГ*/
.nav1-1 {width:500px; height:500px; background:#000;
 
}
#nav1{padding:0px 0px 2px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav1 li { text-align:left; position:relative; }
#nav1 li.over { z-index:999; }
#nav1 li.parent {}
#nav1 li a { display:block; text-decoration:none;}
#nav1 li a:hover { text-decoration:none;}
#nav1 li a span { display:block; white-space:nowrap; cursor:pointer; background:url("{ASSETS_IMAGES_PATH}razdel-menu.png")repeat-x left bottom;}
#nav1 li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav1 li {}
#nav1 li a{font-weight:normal; color:#000; line-height:normal;padding:10px 10px 15px 10px; font-size:24px; background: #fff;}
#nav1 li a:hover {
		background: #DCDCDC;
		border-left: 3px solid #000000;
		color: #333333;
}
#nav1 li.over a, #nav1 li.active a {
		background: #DCDCDC;
		border-left: 3px solid #000000;
		color: #333333;
}
/* 2й уровень вложенности */
#nav1 ul { position:absolute; width:187px; top:-60px; left:-10000px; /*border:3px solid #000;*/ padding:0; background:#fff; font-size:12px;}
#nav1 ul li { float:none; text-align:center;background:#fff;margin-left:-25px;}
#nav1 ul li.last { border-bottom:0; background:#fff;}
#nav1 ul li a { float:none; padding:10px 10px 15px 10px; font-weight:normal; color:#050505 !important; border:1px solid #F8F8FF;background:#fff;}
#nav1 ul li a:hover { color:#000 !important; background:#fff; border-left: 3px solid #000;padding:10px 10px 15px 10px;}
#nav1 ul li.active a,
#nav1 ul li.over a { color:#000 !important; background:#fff; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav1 ul ul { top:-35px; margin-left:-25px; width:187px;}
#nav1 ul ul li a:hover { color:#333333; font-size:24px; background:#dcdcdc; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
#nav1 ul ul li.over a,
#nav1 ul ul li.active a { color:#333333; font-size:24px; background:#dcdcdc; padding:10px 10px 15px 10px;border-left: 3px solid #000;}
/* Видимое меню */
#nav1 li.over ul { left:245px; }
#nav1 li.over ul li.over ul { left:15em; }
#nav1 li.over ul ul { left:-10000px; }
#nav1 li.over .indent-class{margin-left:230px;}
/********** Navigation > */

замените на:

#mainmenu {
		left: 0;
		position: absolute;
		top: 0;
}
#mainmenu li{
display: block !important;
float: left;
}
#mainmenu li ul {
	display: none;
	left: -7px;
	position: absolute;
	top: 39px;
	width: 200px;
	z-index: 99;
}
#mainmenu>li:hover>ul, #mainmenu li ul li:hover>ul{
	display: block;
	z-index: 99;
}
#mainmenu li ul li:hover>ul{
  left:212px; top:0;								 
}
#mainmenu li ul li{
width:200px;
padding:10px;
position: relative;
border-bottom:1px solid #000;
background:#50999F;
z-index:99;
}
#mainmenu li ul li a{
display: block;
font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
padding: 0;
width: 100%;
color:#fff;
background:none;
}
#mainmenu li ul li a:hover{
background:none;
}

.moi {
  margin-top:-20px;
}
.knopci {
  position: absolute;
  float:left;
  margin-left:200px !important;
  margin-top:-50px;
}
/*ВЫПАДАЮЩИЙ КАТАЛОГ*/
.nav1-1 {width:500px; height:500px; background:#000;
 
}
#nav1{padding:0px 0px 2px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav1 li { text-align:left; position:relative; }
#nav1 li.over { z-index:999; }
#nav1 li.parent {}
#nav1 li a { display:block; text-decoration:none;}
#nav1 li a:hover { text-decoration:none;}
#nav1 li a span { display:block; white-space:nowrap; cursor:pointer; background:url("{ASSETS_IMAGES_PATH}razdel-menu.png")repeat-x left bottom;}
#nav1 li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav1 li {}
#nav1 li a{font-weight:normal; color:#000; line-height:normal;padding:10px 10px 15px 10px; font-size:24px; background: #fff;}
#nav1 li a:hover {
		background: #DCDCDC;
		border-left: 3px solid #000000;
		color: #333333;
}
#nav1 li.over a, #nav1 li.active a {
		background: #DCDCDC;
		border-left: 3px solid #000000;
		color: #333333;
}
#nav1 li.over ul { left:245px; }
#nav1 li.over ul li.over ul { left:15em; }
#nav1 li.over ul ul { left:-10000px; }
#nav1 li.over .indent-class{margin-left:230px;}
/********** Navigation > */

[tega4]

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

[Vaccina]

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

[tega4]

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

[Vaccina]

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

замените на:

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

Не было открывающего тега у обычного меню от чего полетела стилистика и структура.

Теперь перейдем к выпадающему меню, найдите:

#nav1 {
	font-size: 20px;
	margin: 0;
	padding: 0 0 2px 7px;
}

замените на:

#nav1 {
	font-size: 20px;
	margin: 0;
	padding: 0 0 2px 7px;
	width: 990px !important;
   background: #50999F;
}

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

#mainmenu li {
	display: block !important;
	float: left;
}

замените на:

#mainmenu li {
	display: inline-block !important;
	vertical-align: top;
}

найдите:

#mainmenu li ul li {
	background: #50999F;
	border-bottom: 1px solid #000000;
	padding: 10px;
	position: relative;
	width: 200px;
	z-index: 99;
}

замените на:

#mainmenu li ul li {
	padding: 10px;
	position: relative;
	width: 200px;
	z-index: 99;
}

и в самый низ добавьте:

#mainmenu li ul li ul {
	display: block;
	float: left;
	left: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	top: 0;
	width: 200px !important;
}
#mainmenu li ul li ul li {
	border: medium none;
	display: block !important;
	float: none;
	height: 20px;
	padding: 0;
	width: 200px;
}
#mainmenu li ul li ul li a {
	font: bold 10px Arial;
}
#mainmenu li ul li ul li a span {
	background: none;
}

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

[tega4]

Цитата

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

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