Выделение родительского меню - проблема CSS и PHP

0

Я разрабатываю новый веб-сайт и имею некоторые проблемы с подсветкой родительской страницы, когда на дочерней странице. Я объясню, какую систему я использую, а затем то, что я пробовал.

Для одного элемента верхнего уровня я использую:

PHP:

<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>

в верхней части страницы, а затем:

<ul>
<?php echo "\n"; if ($currentPage == '#') { ?><li class="on">News</li><?php } else { ?><li class="off"><a href="#">News</a></li><?php } ?>
</ul>

И для падений:

<li><a href="#" class="none">About</a>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off"><a href="../club.php">Club</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off"><a href="../coaches.php">Coaches</a></li><?php } ?>    
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off"><a href="../officials.php">Officials</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off"><a href="../management.php">Management</a></li><?php } ?>
</ul>
</li>
</ul>

Стили:

CSS:

.nav {
width: 990px;
height: 60px;
}

.nav ul {
margin-left: 0px;
padding-left: 0px;
width: auto;
}

.nav ul li {
float: left;
list-style-type: none;
position: relative;
}

.nav ul li a {
color: #666;
font-size: 14px;
text-decoration: none;
background-color: #fff;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
padding-bottom: 0px;
}

a.none {
cursor: default;
}

.nav li:hover > a {
background-color: #181d63;
text-decoration: none;
color: #fff;
}

.nav ul ul {
position: absolute;
visibility: hidden;
display: block;

}

.nav li ul li a {
background-color: #e5e5e5;
color: #000;
top: 38px;
text-align: center;
font-size: 12px;
}   

.nav li ul li a:hover {
background-color: #CCC;
color: #000;
top: 38px;
text-align: center;
}

.nav li:hover ul {
visibility: visible;
background-color: #181d63;
}

.on { 
color: #fff;
font-size: 14px;
text-decoration: none;
background-color: #181d63;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
cursor: default;

}

.off { 

}

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

Я пытался:

PHP:

<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">About</li><?php } else { ?><li class="off"><a href="#" class="drop">About</a><?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off"><a href="../club.php">Club</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off"><a href="../coaches.php">Coaches</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off"><a href="../officials.php">Officials</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off"><a href="../management.php">Management</a></li><?php } ?>
</ul>
</li>
</ul>

И добавив следующее в css:

CSS:

a.drop {
}

a.drop:hover {
visibility: visible !important;
background-color: #181d63;
}

На данный момент я столкнулся с двумя вещами.

  1. На странице "club.php" теперь выделяется родитель.

Я не уверен, как добавить к php, чтобы включить все его дочерние страницы. ('page1', 'page2'), похоже, не работает.

  1. Хотя теперь выделен родительский элемент, этот пункт меню больше не падает.

Я думаю, мне нужно создать условие.onchild, которое при применении к родительскому уровню верхнего уровня по-прежнему позволяет вам опуститься, но я действительно зациклен на том, как это сделать, и, похоже, все больше отклоняется от исходного кода ! Я очень хочу сохранить все это в PHP и CSS, не прибегая к jQuery, если это возможно.

Теги:
drop-down-menu
menu

1 ответ

0

Почему бы не добавить ребенка в родительский "если"?

<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php' || $currentPage == 'coaches.php' || $currentPage == 'officials.php' || $currentPage == 'management.php') { ?><li class="on">About</li><?php } else { ?><li class="off"><a href="#" class="drop">About</a><?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off"><a href="../club.php">Club</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off"><a href="../coaches.php">Coaches</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off"><a href="../officials.php">Officials</a></li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off"><a href="../management.php">Management</a></li><?php } ?>
</ul>
</li>
</ul>

Изменение: Или вы можете использовать in_array

$array = array('club.php', 'coaches.php', 'etc');
if(in_array($currentPage, $array)) { /* do code */ }
  • 0
    Спасибо за ваш отзыв. Добавление массива работало отлично! Все страницы теперь выделяют родительский элемент меню, решая проблему 1. Проблема 2 остается. Когда на дочернем элементе родительского меню, при наведении на элемент меню не будет отображаться раскрывающийся список.
  • 0
    Меню отображается, но оно находится под другим меню. При создании выпадающих меню вы должны использовать эти CSS-коды, например nav> ul> li: hover> ul, в противном случае все ul или li будут иметь одинаковое свойство, или между стилями будет битва. Вот мой поспешный jsfiddle: jsfiddle.net/f6Lp2 Прокрутите до нижней части вкладки CSS, и последние 3 стиля будут моими

Ещё вопросы

Сообщество Overcoder
Наверх
Меню