[Помогите] неактивные пункты главного меню

sonicking · 1 авг 2014

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

NinoZombie · 1 авг 2014

Отправьте сюда ссылку на Ваш сайт и содержимое файла catalog/view/theme/ВАШАТЕМА/common/header.tpl
В теории там просто при формировании меню нужно убрать href для родительских узлов

sonicking · 1 авг 2014

сайт sonic39.ru
файл здесь

NinoZombie · 1 авг 2014

sonicking сказал(а): ↑

сайт sonic39.ru
файл здесь
Нажмите, чтобы раскрыть...

Замените в файле
Код:
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
на
Код:
<li><?php echo $category['name']; ?>

sonicking · 1 авг 2014

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

sonicking · 2 авг 2014

вернусь к теме
после деактивации ссылок на родительские категории в главном меню не получается привести к требуемому виду меню (вроде покопался в стилях, но всё не то)

то что надо

то что сейчас

я так понимаю, что этот кусок CSS надо править

Спойлер

/* menu */
#menu {
font-family: Arial, sans-serif;
background: #156e84 url('../image/menubg.png') repeat-x;
height: 50px;
margin-bottom: 30px;
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #666;
padding: 0px;
border-bottom:3px solid #153659;
text-align:center;
}
#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
margin-bottom:-4px;
text-align:left;
}
#menu > ul > li {
position: relative;
cursor: pointer;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
font-size: 12px;
font-weight: bold;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 13px 13px 20px 13px;
margin-bottom: 0px;
z-index: 6;
position: relative;
text-transform: uppercase;
text-shadow:1px 1px 1px #000;
}
#menu > ul > li:hover > a {

}
#menu > ul > li:hover {
background:#1b1b1d url('../image/menubghover.png') repeat-x;
height:40px;
}
#menu > ul > li > div {
display: none;
background: #084b5c;
border-top:3px solid #2d97b2;
position: absolute;
z-index: 5;
padding: 5px;
margin-top:0px;

}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
text-shadow:1px 1px 1px #000;
}
#menu > ul > li ul > li > a:hover {
background: #2b94ae;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
text-shadow:1px 1px 1px #000;

NinoZombie · 3 авг 2014

sonicking сказал(а): ↑

вернусь к теме
после деактивации ссылок на родительские категории в главном меню не получается привести к требуемому виду меню (вроде покопался в стилях, но всё не то)

то что надо

то что сейчас

я так понимаю, что этот кусок CSS надо править

Спойлер

/* menu */
#menu {
font-family: Arial, sans-serif;
background: #156e84 url('../image/menubg.png') repeat-x;
height: 50px;
margin-bottom: 30px;
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #666;
padding: 0px;
border-bottom:3px solid #153659;
text-align:center;
}
#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
margin-bottom:-4px;
text-align:left;
}
#menu > ul > li {
position: relative;
cursor: pointer;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
font-size: 12px;
font-weight: bold;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 13px 13px 20px 13px;
margin-bottom: 0px;
z-index: 6;
position: relative;
text-transform: uppercase;
text-shadow:1px 1px 1px #000;
}
#menu > ul > li:hover > a {

}
#menu > ul > li:hover {
background:#1b1b1d url('../image/menubghover.png') repeat-x;
height:40px;
}
#menu > ul > li > div {
display: none;
background: #084b5c;
border-top:3px solid #2d97b2;
position: absolute;
z-index: 5;
padding: 5px;
margin-top:0px;

}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
text-shadow:1px 1px 1px #000;
}
#menu > ul > li ul > li > a:hover {
background: #2b94ae;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
text-shadow:1px 1px 1px #000;

Нажмите, чтобы раскрыть...

Нужно убрать "a" из инструкций CSS, чтобы они применялись не к ссылкам (<a>), а к обычному тексту

Спойлер

/* menu */
#menu {
font-family: Arial, sans-serif;
background: #156e84 url('../image/menubg.png') repeat-x;
height: 50px;
margin-bottom: 30px;
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #666;
padding: 0px;
border-bottom:3px solid #153659;
text-align:center;
}
#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
margin-bottom:-4px;
text-align:left;
}
#menu > ul > li {
position: relative;
cursor: pointer;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li {
font-size: 12px;
font-weight: bold;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 13px 13px 20px 13px;
margin-bottom: 0px;
z-index: 6;
position: relative;
text-transform: uppercase;
text-shadow:1px 1px 1px #000;
}
#menu > ul > li:hover {

}
#menu > ul > li:hover {
background:#1b1b1d url('../image/menubghover.png') repeat-x;
height:40px;
}
#menu > ul > li > div {
display: none;
background: #084b5c;
border-top:3px solid #2d97b2;
position: absolute;
z-index: 5;
padding: 5px;
margin-top:0px;

}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
text-shadow:1px 1px 1px #000;
}
#menu > ul > li ul > li:hover {
background: #2b94ae;
}
#menu > ul > li > div > ul > li {
color: #FFFFFF;
text-shadow:1px 1px 1px #000;

sonicking · 14 авг 2014

сделал как вы посоветовали
все пункты и подпункты меню теперь с толстым шрифтом и в верхнем регистре
а надо чтоб только главные пункты (родительские) были в таком оформлении

немного разверну проблему:

как сделать не активными (не кликабельными) ссылки на категории в главном (горизонтальном) меню и неактивными ссылки на подкатегории в которых есть ещё подкатегории
как пример:

категория 1
-подкатегория 1.1
-подкатегория 1.2
--подподкатегория 1.2.1
--подподкатегория 1.2.2
-подкатегория 1.3
-подкатегория 1.4
-подкатегория 1.5
--подподкатегория 1.5.1
--подподкатегория 1.5.2

т.е. ссылка на "категория 1" должна быть не активна, а просто при наведении должно разворачиваться подменю с подкатегориями 1,2,3,4,5
в свою очередь, подкатегории 1.1; 1.3 и 1.4 должны быть кликабельны, а подкатегории 1.2 и 1.5 нет и в них тоже должно при наведении разворачиваться подменю с подподкатегориями

чтоб избавится от кликабельности ссылок по "категория 1" в файле header.tpl (от темы) удалил выделенное красным.

Спойлер

<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>

а как убрать ссылки в подкатегориях в которых есть ещё категории не пойму

P.S. для организации многоуровневого меню использую модуль "2 Level Catagory dropdown menu"

может всё можно решить по другому?

Fiable · 16 авг 2014

sonicking сказал(а): ↑

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

Создай свое меню в шаблоне без категории, и в пунктах меню пропиши свои категории,под-категории которые надо.(указывай ссылки которые тебе нужны)