Разработчикам

Графическое сложное двухровневое горизонтальное меню

RSS

Пользователь 301007

Заглянувший

Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014

16.12.2014 18:05:06

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

Должно выглядеть так:

[img]file:///C:/Users/%D0%90%D1%81%D1%8F/Desktop/%D0%9A%D0%B0%D0%BA%20%D0%B4%D0%BE%D0%BB%D0%B6%D0%BD%D0%BE.png[/img]

Выглядит так:

Теперь код PHP меню:

Код

<?if (!defined("B_PROLOG_INCLUDED" || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
 <div id="nav">    
                        <ul>

<?
$previousLevel = 0;
foreach($arResult as $arItem):?>

<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
<?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]);?>
<?endif?>

<?if ($arItem["IS_PARENT"]:?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li class="<?if ($arItem["SELECTED"]:?>active<?else:?><?endif?>"><span class="outer_active"><span><a href="<?=$arItem["LINK"]?>" ><?=$arItem["TEXT"]?><span class="bottom_text"></span></a><span class="outer"></span></span></span>
<ul><li class="toparrow"></li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">

<?else:?>
<li <?if ($arItem["SELECTED"]:?>class="active"<?endif?>><span class="outer_active"><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?><span class="bottom_text"></span></a><span class="outer"></span></span></span>
<ul><li class="toparrow"></li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
<?endif?>

<?else:?>

<?if ($arItem["PERMISSION"] > "D":?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li class="<?if ($arItem["SELECTED"]:?>active<?else:?><?endif?>"><span class="outer_active"><span><a href="<?=$arItem["LINK"]?>" ><?=$arItem["TEXT"]?></a><span class="outer"></span></span></span></li>
<?else:?>
<li <?if ($arItem["SELECTED"]:?> class="active"<?endif?>><span class="outer_active"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a><span class="outer"></span></span></span></li>
<?endif?>

<?else:?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li><span class="outer_active"><span><a href="" class="<?if ($arItem["SELECTED"]:?>active<?else:?><?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED"?>"><?=$arItem["TEXT"]?></a><span class="outer"></span></span></span></li>
<?else:?>
<li><span class="outer_active"><span><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED"?>"><?=$arItem["TEXT"]?></a><span class="outer"></span></span></span></li>
<?endif?>

<?endif?>

<?endif?>

<?$previousLevel = $arItem["DEPTH_LEVEL"];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>

</ul>
</div>

<?endif?>

Html код

Код

 <div class="active" id="nav">    

                        <ul>
                            <li class="active">
                                <span class="outer_active">
                                    <span>
                                        <a class="active" href="index.html">
                                            Главная
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a href="about.html">О нас<span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                            </li>
                            <li>
                                <span class="outer_active">
                                    <span>
                                        <a>
                                            Информация
                                            <span class="bottom_text"></span>
                                        </a>
                                        <span class="outer"></span>
                                    </span>
                                </span>
                                 <ul>
                                    <li class="toparrow"></li>
                                        <li class="noback">
                                            <span>
                                                <span class="span_nonactive">
                                                    <a class="sub" href="ioyo.html">
                                                      Общая информация об управляющей организации
                                                   </a>
                                                  </span>                                            
                                             </span>
                                         </li>
                                        <li class="menubottom"></li>
                                </ul>
                            </li>

Пользователь 134010

Эксперт

Сообщений: 359 Баллов: 63 Регистрация: 13.07.2012

17.12.2014 09:01:19

Давайте начнем с того, что вы приводите код компонента и не приводите код который получается при работе, так же нет CSS

Код
<li class="<?if ($arItem["SELECTED"]:?>active<?else:?><?endif?>">

на выходе будет

Код
<li class="active"> или <li class="">

не красиво ))

у вас два активных пункта, вложенное, основное меню не ссылается на те же пункты?

и еще вот это:

Код
<a> Информация <span class="bottom_text"></span> </a>

neosweb.ru

Пользователь 301007

Заглянувший

Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014

17.12.2014 11:13:52

Большое спасибо за помощь, меню начинает приобретать очертания, правда, не до конца:

Код

<?if (!defined("B_PROLOG_INCLUDED" || B_PROLOG_INCLUDED!==true)die();?>

 
<?if (!empty($arResult)):?>
 <div id="nav">    
                        <ul>

<?
$previousLevel = 0;
foreach($arResult as $arItem):?>

<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
<?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]);?>
<?endif?>

<?if ($arItem["IS_PARENT"]:?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li<?if ($arItem["SELECTED"]:?> class="active"<?else:?><?endif?>><span class="outer_active"><span><a href="<?=$arItem["LINK"]?>" ><?=$arItem["TEXT"]?></a><span class="outer"></span></span>
<ul>

<?else:?>
<li<?if ($arItem["SELECTED"]:?> class="active"<?else:?><?endif?>><span class="outer_active"><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a><span class="outer"></span></span>
<ul>
<?endif?>

<?else:?>

<?if ($arItem["PERMISSION"] > "D":?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li<?if ($arItem["SELECTED"]:?> class="active"<?else:?><?endif?>><span class="outer_active"><span><a href="<?=$arItem["LINK"]?>" ><?=$arItem["TEXT"]?></a><span class="outer"></span></span></li>
<?else:?>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></span></li>
<?endif?>

<?else:?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li<?if ($arItem["SELECTED"]:?> class="active"<?else:?><?endif?>><span class="outer_active"><span><a href="" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED"?>"><?=$arItem["TEXT"]?></a><span class="outer"></span></span></li>
<?else:?>
<li><span class="outer_active"><span><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED"?>"><?=$arItem["TEXT"]?></a><span class="outer"></span></span></li>
<?endif?>

<?endif?>

<?endif?>

<?$previousLevel = $arItem["DEPTH_LEVEL"];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>

</ul>
</div>
<?endif?>

Выводится так:

Код

<div id="nav"><ul>
<li class="active"><span class="outer_active"><span><a href="/" >Главная</a><span class="outer"></span></span></li>
<li><span class="outer_active"><span><a href="/o-nas/" >О нас</a><span class="outer"></span></span></li>
<li><span class="outer_active"><span><a href="/informatsiya/" >Информация</a><span class="outer"></span></span>
<ul>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="/informatsiya/obshchaya-informatsiya-ob-upravlyayushchey-organizatsii/">Общая информация об управляющей организации</a></span></span></li>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="/informatsiya/osnovnye-pokazateli-finansovo-khozyaystvennoy-deyatelnosti/">Показатели финансово-хозяйственной деятельности</a></span></span></li>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="/informatsiya/informatsiya-o-vypolnyaemykh-rabotakh/">Информация о выполняемых работах</a></span></span></li>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="/informatsiya/poryadok-i-usloviya-okazaniya-uslug/">Порядок и условия оказания услуг</a></span></span></li>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="/informatsiya/privlechenie-k-administrativnoy-otvetstvennosti/">Привлечение к административной ответственности</a></span></span></li>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="/informatsiya/informatsiya-o-stoimosti-rabot-i-uslug/">Информация о стоимости работ и услуг</a></span></span></li>
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="/informatsiya/informatsiya-o-tsenakh-na-kommunalnye-resursy/">Информация о ценах на коммунальные ресурсы</a></span></span></li>
</ul>
</li>
<li><span class="outer_active"><span><a href="/pasportnyy-stol/" >Паспортный стол</a><span class="outer"></span></span></li>
<li><span class="outer_active"><span><a href="/oplata-uslug/" >Оплата услуг</a><span class="outer"></span></span></li>
<li><span class="outer_active"><span><a href="/pribory-ucheta/" >Приборы учета</a><span class="outer"></span></span></li>
<li><span class="outer_active"><span><a href="/kapitalnyy-remont/" >Капитальный ремонт</a><span class="outer"></span></span></li>
<li><span class="outer_active"><span><a href="/kontakty/" >Контакты</a><span class="outer"></span></span></li>
</ul>
</div>

CSS:

Код

#nav ul li {margin-left:0px;
position: relative;}

#nav a {
color:#383838;
cursor:pointer;
display:block;
float:left;
font-size:14px;
font-weight:bold;
height:68px;
line-height:17px;
margin-left:25px;
margin-top:0;
overflow:hidden;
padding-left:0px;
padding-right:3px;
padding-top:25px;
text-decoration:none;
text-shadow:1px 1px #ffffff;}

#nav a span {
display:block;
color:#383838;
font-weight:normal;
font-size:11px;}

#nav li li a {
margin-left:0px;
line-height:35px;
margin-top:0px;
height: 30px;
background: none;
font-weight: normal;
padding: 0;
text-indent: 18px;}

#nav li li {
text-align: left;
width: 400px;
    float: left;
    padding: 0;
    background: none;
height:30px;
padding-top:0px;}

#nav ul li ul li a {
    font-size:12px; 
line-height:28px;
    font-weight: normal; 
margin-left:-2px;
width:400px; }

#nav ul li a {
    background: none; } 

#nav ul li ul li {
width:400px;
    background:transparent url(images/fusion_ddmenumidh.png) repeat-x scroll 0 -33px; }

#nav ul li ul li:hover {
    background:transparent url(images/fusion_ddmenumidh.png) repeat-y 0px 0px; }   
 
#nav {
position:relative;
z-index:2;
height: 30px;}
#nav, #nav ul {
list-style: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}

#nav ul {
float:left;
padding: 0;
margin: 0;
margin:-3px 0 0;}

#nav ul ul a {
display: block;
text-decoration: none;
width: 400px;
text-transform: none;}

#nav li {
    float: left;
    padding: 0;
margin-right:0px;
    background: none;
    height: 51px;}

#nav li ul {
top: 59px;
position: absolute;
left: -999em;
height: auto;
width:  400px;
border-width: 0;
margin: 0;
padding: 0;
margin-left:16px;
    z-index: 4;}

#nav li ul a {
font-weight: bold;
color:#FFFFFF;}
#nav li ul ul {
width:400px;
margin: -70px 0 0 227px;}

* html #nav li ul ul {
margin: -74px 0 0 227px;}

#nav li:hover ul ul, 
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{
left: -999em;}

#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul{
left: 0;
    position: absolute;}


#nav li:hover ul {
left: 0;
background-position: 0 0;}


#nav ul li:hover {
background:transparent;
color:#000000;}

#nav li:hover span a{
color:#ffffff;}

#nav ul li:hover ul li span span a{
color:#ffffff;}

#nav ul li ul li:hover ul li span span a{
color:#ffffff;}

#nav ul li ul li ul li:hover ul li span span a{
color:#ffffff;}

#nav ul li ul li:hover span span a{
color:#ffffff;}

#nav ul li ul li ul li:hover span span a{
color:#ffffff;}

#nav ul li ul li ul li ul li:hover span span a{
color:#ffffff;}

#nav ul li.active a {
background:transparent url(images/fusion_mmiddle.png) repeat-x scroll left 1pt;
    color:#ffffff;
text-shadow:1px 1px #000000;}

#nav ul li:hover a{
background: transparent url(images/fusion_mmiddle.png) repeat-x scroll left 1pt;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
}

#nav ul li:hover ul li a{
background:transparent; 
    color:#ffffff;}

#nav ul li ul li:hover a{
    color:#ffffff;
width:400px;}

#nav li.active span.outer_active, #nav span.outer_active:hover, #nav ul li:hover span.outer_active {
background:transparent url(images/fusion_mleft.png) no-repeat scroll 0 1pt;
height:68px;}

#nav ul li span.outer {
height:68px;
width:12px;
float:left;}

#nav ul li:hover span.outer, #nav ul li a.active:hover span.span_active, #nav ul li.active span.outer  {
height:68px;
width:23px;
float:left;
background:transparent url(images/fusion_mright.png) no-repeat scroll 0 1pt;}

#nav ul li span.outer, #nav ul li a.active span.span_active, #nav ul li.active span.outer  {
height:68px;
width:23px;}

#nav ul li ul li:hover span.span_active {
background:none;}

#nav span.span_active, #nav span.span_active:hover {
height:53px;
width:6px;
float:left;
background:transparent url(images/fusion_mright.png) no-repeat scroll 0 1pt;
}

#nav ul li ul li span.span_active, #nav ul li ul li span.span_active:hover {
height:29px;}

.outer_active {
display:block;
height:32px;
float:left;}
 
#nav a span:hover, #nav li:hover a span, #nav li.active span, #nav li.over a span{
color:#cccccc;
} 

#nav ul li li:hover span{
background:none;
color:#FFFFFF;}

#nav ul li li span.span_active {
background:none;} 

/* Rounded bottoms */
#nav ul li.toparrow, #nav ul li.toparrow:hover {
height:16px;
line-height:25px;
width:400px;
background:transparent url(images/fusion_ddmenutop.png) no-repeat scroll 0 0;}

#nav ul li.menubottom, #nav ul li.menubottom:hover {
background:transparent url(images/fusion_ddmenubot.png) no-repeat scroll 0 0;
height:17px;
line-height:25px;
width:400px;}

Как видно из изначального HTML кода у вложенного меню есть особенность:
1-й пункт списка получает такую строчку:<li class="toparrow"></li>
Последний пункт списка получает такую строчку:<li class="menubottom"></li>
Теперь вопрос: каким образом это реализовать через PHP?

Пользователь 134010

Эксперт

Сообщений: 359 Баллов: 63 Регистрация: 13.07.2012

17.12.2014 11:47:24

1. Постройте структуру CSS правильно, что бы было видно наглядно что и где, пусть даже без оптимизации, зато сразу будет понятно что и где происходит (оптимизировать можно потом):
#nav
#nav ul
#nav ul li
#nav ul li a
и т.д.
2. Да можно отредактировать шаблон меню.
способов много, можно просто перестроить массив и вывод реализовать как нужно, либо в текущем формировании банально посчитать количество пунктов меню верхнего уровня и по условию к последнему применить нужное.

neosweb.ru

Пользователь 301007 Заглянувший Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014	#5 17.12.2014 12:03:59 Я, честно говоря, в PHP мало, что понимаю, нельзя ли поконкретнее про подсчет и условие ? Я имею ввиду код для примера и куда мне его прописать? P.S. Прошу прощения за мою непросветную тупость.

Пользователь 134010

Эксперт

Сообщений: 359 Баллов: 63 Регистрация: 13.07.2012

17.12.2014 12:37:38

Просто пример решения с подсчетом

Код
<? $i = 0; $col = count($arResult); ................ foreach($arResult as $arItem): $i++; .............. if($i == $col) echo ' class="end"'; ?>

neosweb.ru

Пользователь 301007 Заглянувший Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014	#7 17.12.2014 12:42:28 Спасибо большое, буду пробовать.

Пользователь 301007

Заглянувший

Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014

17.12.2014 14:11:27

Ситуация просто идиотская, но похоже, я подсчет этот не осилю.

Просто объясню, как я себе это представляю: если порядковый номер ВЛОЖЕННОГО меню=1, то элемент списка выглядит так:

Код
<li class="toparrow"></li><li class="noback"><span><span class="span_nonactive"><a class="sub" href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></span></li>

если порядковый номер ВЛОЖЕННОГО меню=2/3/4/5/6 , то элемент списка выглядит так:

Код
<li class="noback"><span><span class="span_nonactive"><a class="sub" href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></span></li>

если порядковый номер ВЛОЖЕННОГО меню=7 (последний элемент), то элемент списка выглядит так:

Код
<li class="noback"><span><span class="span_nonactive"><a class="sub" href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></span></li><li class="menubottom"></li>

Такое возможно реализовать?

Пользователь 134010

Эксперт

Сообщений: 359 Баллов: 63 Регистрация: 13.07.2012

17.12.2014 14:40:51

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

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

Средствами php вы можете модифицировать $arResult и все что в нем содержится в удобный для вас вид, остальное дело техники.
Даже можно построить меню на div и т.д., на что воображения хватит

структуру $arResult можно глянуть, например так

Код
<pre> <? print_r($arResult); ?> </pre>

neosweb.ru

Пользователь 301007 Заглянувший Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014	#10 17.12.2014 14:51:12 Согласна, оно сложное, но это же меню у меня реализовано на простом html и все работает, а тут битрикс (бррр...)

Пользователь 301007 Заглянувший Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014	#11 17.12.2014 14:55:21 То есть, вместо <span> обернуть все вложенное меню в <div> и применить к нему background?

Пользователь 134010

Эксперт

Сообщений: 359 Баллов: 63 Регистрация: 13.07.2012

#12

17.12.2014 15:25:54

Цитата
Алина Балаева написал: То есть, вместо обернуть все вложенное меню в и применить к нему background?

Зачем? я просто приводил пример.

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

neosweb.ru

Пользователь 301007 Заглянувший Сообщений: 20 Баллов: 1 Регистрация: 16.12.2014	#13 17.12.2014 17:33:35 Проблема решена добавлением параметров для первого и последнего пункта списка.

Графическое сложное двухровневое горизонтальное меню

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером