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


Нужна помощь с двумя горизонтальными меню на странице...

Автор Dick_ow, Jul 02 2014 03:44 PM

  • Вы не можете ответить в тему
Сообщений в теме: 4

#1 Dick_ow

    Новичок

  • Download User
  • Pip
  • 3 сообщений
Репутация: 0
Начинающий

Отправлено 02 July 2014 - 03:44 PM

Всем доброе время суток. Пытаюсь реализовать на странице два меню. Верхнее - это навигационное меню, а второе - это горизонтальный каталог. Вроде все работает... но никак не могу решить проблему наложения выпадающего подменю верхнего навигационного меню и текста во втором горизонтальном каталоге. Уже заколебался играть с Z-Index. Ничего не помогает... короче никак не "воткнусь"!
Стиль Первого меню (верхнее) описан в основном файле style.css, а горизонтальный каталог прописан в отдельном файле css.
Громко не ругайте... может и ошибка простая... но я только учусь.
Выглядит проблема визуально так:Прикрепленный файл  screen.jpg   74.17К   13 Количество загрузок:
Стили верхнего меню:
/*main menu*/
a.cartico {
background: url('cart1.png');
display: block;
width: 32px;
height: 32px
}

a.cartico:hover {
background: url('cart2.png')
}

#menu_cart {
	 border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
  background: #88f28f;
}

*#menu {
	 box-sizing: border-box;
  position: relative;
  float: left;
  margin: 0;
  width: 100%;
  padding: 0px 0px 0px 10px;
}
	#menu:after{
  content: "";
  display: block;
  clear: both;
  height: 0;
}
#menu, #menu ul {
  list-style: none;
}
#menu > li {
  float: left;
  position: relative;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 0 rgba(255,255,255,.25);
  perspective: 1000px;
}
#menu > li:first-child {
  border-left: 1px solid rgba(255,255,255,.25);
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}
#menu a {
  display: block;
  position: relative;
  z-index: 90;
  padding: 13px 40px 13px 40px;
  text-decoration: none;
  color: rgba(0,0,0,1);
  line-height: 1;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -.001em;
  background: transparent;
  text-shadow: 0 1px 1px rgba(255,255,255,.9);
  transition: all .25s ease-in-out;
}
#menu > li:hover > a {
  background: #ffffff;
  color: rgba(0,223,252,1);
  text-shadow: none;
}
#menu li ul  {
  position: absolute;
  left: 0;
  z-index: 89;
  padding-left: 0px;
  width: 200px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  transform-origin: 50% 0%;
}
#menu li:hover ul {
  box-sizing: border-box;
  z-index: 89;
  padding: 15px 0;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);
  animation-name: swingdown;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }
  30% {  
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }
  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }
  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
}
#menu li li a {
  padding-left: 15px;
  text-align: left;
  font-weight: 600;
  color: #000000;
  text-shadow: none;
  border-top: dotted 1px transparent;
  border-bottom: dotted 1px transparent;
  transition: all .15s linear;
}
#menu li li a:hover {
  color: rgba(136,242,143,1);
  border-top: dotted 1px rgba(0,0,0,.15);
  border-bottom: dotted 1px rgba(0,0,0,.15);
  background: rgba(0,0,0,.02);
}

Стили горизонтального каталога:
#catalog_container {
-moz-border-radius: 0px 0px 6px 6px;
-webkit-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;

background: #446991;
background: -moz-linear-gradient(top, #446991, #446992);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#446991), to(#446992));

-moz-box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 1px 1px 3px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 1px 1px 3px rgba(0,0,0,.5);
box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 1px 1px 3px rgba(0,0,0,.5)
}

*#catalog {
 float: left;
 list-style:none;
 margin:0px 0px 0px 0px;
 height:100%;
 padding:0px 0px 10px 10px;
 }

#catalog:after{
content: "";
display: block;
clear: both;
height: 0;
}

#catalog li {
z-index:8;
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:10px;
margin-top:10px;
border:none;
}

#catalog li:hover {
 box-sizing: border-box;
 z-index:9;
 padding: 4px 10px 4px 10px;
 background: #ffffff;
 -moz-border-radius: 0px 0px 0px 0px;
 -webkit-border-radius: 0px 0px 0px 0px; 
 border-radius: 0px 0px 0px 0px;
 }

#catalog li a {
 font-size:14px;
 color: #EEEEEE; 
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
 }

#catalog li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
 }

#catalog li .drop {
 padding-right:21px; 
 background:url("img/drop.png") no-repeat right 8px;
}

 #catalog li:hover .drop {
 background:url("img/drop.png") no-repeat right 7px;
 }

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
box-sizing: border-box;
z-index:9;
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
/*border:1px solid #777777;*/
border-top:none;

/* Gradient background */
background:#ffffff;
/*background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));*/

/* Rounded Corners */
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;

-moz-box-shadow: 1px 1px 7px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 7px rgba(0,0,0,.5);
box-shadow: 1px 1px 7px rgba(0,0,0,.5)
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#catalog li:hover .dropdown_1column,
#catalog li:hover .dropdown_2columns,
#catalog li:hover .dropdown_3columns,
#catalog li:hover .dropdown_4columns,
#catalog li:hover .dropdown_5columns {
left:0px;
	top:auto;
}

/* Columns */

.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:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#catalog .catalog_right {
float:right;
margin-right:0px;
}
#catalog li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
	-webkit-border-radius: 5px 0px 5px 5px;
	border-radius: 5px 0px 5px 5px;
}
#catalog li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}

/* Drop Down Content Stylings */

#catalog p, #catalog h2, #catalog h3, #catalog ul li {
/*font-family:Arial, Helvetica, sans-serif;*/
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#catalog h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#catalog h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#catalog p {
line-height:18px;
margin:0 0 10px 0;
}

#catalog li:hover div a {
font-size:12px;
color:#015b86;
}
#catalog li:hover div a:hover {
color:#029feb;
}
.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 { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#catalog li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#catalog li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#catalog 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;
}
#catalog li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#catalog li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#catalog li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

И собственно сам код страницы:
{*Main Menu*}
<!--div id="container_menu"></div-->
<nav>
<table cellspacing="0" cellpadding="0" width="98%" valign="top" align="center" id="menu_cart">
<tr>
<td valign="top" align="left" width="81%">
  <ul id="menu">
	<li><a href="{$smarty.const.CONF_FULL_SHOP_URL}">Главная</a>
  <!--ul>
   <li><a href="#">Контакты</a></li>
   <li><a href="#">Материалы</a></li>
   <li><a href="#">Презентации</a></li>
  </ul-->
</li>
<li><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}news.html{else}index.php?news=yes{/if}">Новости</a>

</li>
<li><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}price.html{else}index.php?show_price=yes{/if}">Прайс-лист</a>

</li>
<li><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}page_1.html{else}index.php?show_aux_page=1{/if}">О магазине</a>
  <ul>
   <li><a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}feedback.html{else}index.php?feedback=yes{/if}">Контакты</a></li>
   <li><a href="index.php?links_exchange=yes">Ссылки</a></li>
   <li><a href="#">Как нас найти</a></li>
  </ul>
</li>
<li><a href="{if $smarty.const.CONF_OPEN_SHOPPING_CART_IN_NEW_WINDOW eq 1}javascript:open_window('index.php?do=cart',500,300);{else}{if $smarty.const.CONF_MOD_REWRITE eq 1}cart.html{else}index.php?shopping_cart=yes{/if}{/if}">Корзина</a></li>
  </ul>
</td>
<td align="left" width="19%">
<table><tr>
<td><a href="{if $smarty.const.CONF_OPEN_SHOPPING_CART_IN_NEW_WINDOW eq 1}javascript:open_window('index.php?do=cart',500,300);{else}{if $smarty.const.CONF_MOD_REWRITE eq 1}cart.html{else}index.php?shopping_cart=yes{/if}{/if}" class="cartico"></a></td>
<td width="100%" align="center" id="cartmenu">
  {if $smarty.const.CONF_SHOW_ADD2CART == '1'}
  {if $shopping_cart_value} {$shopping_cart_items} {$smarty.const.CART_CONTENT_NOT_EMPTY}
  <b>{$smarty.const.STRING_CUR_PR}:</b>&nbsp;&nbsp;{$shopping_cart_value_shown|replace:'"':'&quot;'}
  {else}{$smarty.const.STRING_CART_PR} {$smarty.const.CART_CONTENT_EMPTY}{/if}
  {/if}
</td>
</tr></table>
</td>
</tr>
</table>
</nav>




{* горизонтальный каталог*}
<nav>
<table cellspacing="0" cellpadding="0" width="100%" valign="top" align="center" id="catalog_container">
  <tr>
   <td valign="top" align="left">
   <ul id="catalog">
	{if $big_categories_tree && $big_categories_tree_count>0}
	{section name=h loop=$big_categories_tree}
	{if $big_categories_tree[h].parent == 1}
	<li class="{if $big_categories_tree[h].subcount > 0}drop {/if}{if $categoryID == $big_categories_tree[h].categoryID}active {/if}">
	<a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}" {if $categoryID == $big_categories_tree[h].categoryID}class="bf"{/if}>{$big_categories_tree[h].name}</a>
	{if $big_categories_tree[h].subcount > 0}
	<div class="dropdown_3columns">
	<div class="col_1">
	 <ul>
	  {assign var="tmp" value=0}
	  {section name=h1 loop=$big_categories_tree}
	  {if $big_categories_tree[h1].parent == $big_categories_tree[h].categoryID}
	  {assign var="tmp" value=`$tmp+1`}
	  <li>
	   <a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h1].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h1].categoryID}{/if}" {if $categoryID == $big_categories_tree[h1].categoryID}class="bf"{/if}>{$big_categories_tree[h1].name}</a>
	  </li>
	  {if $tmp is div by 3 && !$smarty.section.h1.last}
	 </ul>
	</div>
	<div class="col_1">
	 <ul>{assign var="tmp" value=0}{/if}
	 {/if}
	 {/section}
	 </ul>
	</div>
	</div>
	{/if}
	</li>
	{/if}
	{/section}
	{else}
	<div align="center">{$smarty.const.STRING_NO_CATEGORIES}</div>
	{/if}
   </ul>
   </td>
  </tr>
</table>
</nav>

  • 0

#2 badisoft

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

  • Assistent vsupport.club
  • PipPipPip
  • 5075 сообщений
Репутация: 786
Мастер

Отправлено 02 July 2014 - 04:37 PM

Врядли кто-то будет внимательно изучать эти простыни и разбираться с Вашей проблемой. Нажмите в FireFox правой кнопкой "исследовать элемент" и ищите в живом коде, почему элементы проступают поверх невзирая на z-index. Например, если Вы используете для нижнего горизонтального меню библиотеку dropdown-check-list, то она по умолчанию проставляет своим элементам z-index на единицу больший, чем есть на странице. Т.е. можно в верхнем меню ставить хоть z-index=9999, у нижнего будет 10000 :).

Лечится параметром при инициализации, zIndex=xx
Например:
$("select[id^='efparam_']").dropdownchecklist({
  icon: { placement: 'right',
		  toOpen:  'ui-icon-arrowthick-1-s',
		  toClose: 'ui-icon-arrowthick-1-n' },
  width: 150,
  maxDropHeight: 150,
  emptyText: 'не важно',
  zIndex: 6,
  firstItemChecksAll: true
  });

PS. Это просто пример, что дело может быть вовсе не в приведенном Вами коде.
  • 0
http://cpu.badisoft.ru (тестовый сайт), http://badisoft.ru (модули)

#3 Dick_ow

    Новичок

  • Download User
  • Pip
  • 3 сообщений
Репутация: 0
Начинающий

Отправлено 03 July 2014 - 06:32 AM

Врядли кто-то будет внимательно изучать эти простыни и разбираться с Вашей проблемой. Нажмите в FireFox правой кнопкой "исследовать элемент" и ищите в живом коде, почему элементы проступают поверх невзирая на z-index. Например, если Вы используете для нижнего горизонтального меню библиотеку dropdown-check-list, то она по умолчанию проставляет своим элементам z-index на единицу больший, чем есть на странице. Т.е. можно в верхнем меню ставить хоть z-index=9999, у нижнего будет 10000 :).

Лечится параметром при инициализации, zIndex=xx
Например:

$("select[id^='efparam_']").dropdownchecklist({
  icon: { placement: 'right',
		  toOpen:  'ui-icon-arrowthick-1-s',
		  toClose: 'ui-icon-arrowthick-1-n' },
  width: 150,
  maxDropHeight: 150,
  emptyText: 'не важно',
  zIndex: 6,
  firstItemChecksAll: true
  });

PS. Это просто пример, что дело может быть вовсе не в приведенном Вами коде.


Все равно спасибо.
Я понимаю, что "спасение утопающих, дело рук самих утопающих".
Но если я Вас правильно понял - dropdownchecklist, это JQuery... оба меню только на CSS.

Чувствую подвох где то в css...Буду разбираться.
  • 0

#4 idal

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

  • Assistent vsupport.club
  • PipPipPip
  • 243 сообщений
Репутация: 7
Начинающий
  • ГородКиев

Отправлено 03 July 2014 - 08:45 AM

#menu {
box-sizing: border-box;
position: relative;
float: left;
margin: 0;
width: 100%;
padding: 0px 0px 0px 10px;
z-index:9999;
}
  • 0

#5 Dick_ow

    Новичок

  • Download User
  • Pip
  • 3 сообщений
Репутация: 0
Начинающий

Отправлено 03 July 2014 - 01:03 PM

#menu {
box-sizing: border-box;
position: relative;
float: left;
margin: 0;
width: 100%;
padding: 0px 0px 0px 10px;
z-index:9999;
}

Огромное спасибо!!!
Так и знал, что ошибка дурацкая.
Даже и не догадался всему верхнему списку присвоить индекс.
  • 0
Обратно в Поддержка ShopCMS


  1. ShopCMS, DataLife Engine, XenForo и другие CMS - помощь и поддержка
  2. → Техническая поддержка
  3. → ShopCMS
  4. → Поддержка ShopCMS