Я использую Materialize.css Framework в Wordpress с _с настроенной темой.
Главное меню имеет навигацию на рабочем столе с анимацией в .sub-menu.
Навигация создана nav.php.
Мобильная навигация жестко запрограммирована и не имеет отношения к этому вопросу.
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="container">
<a class="brand-logo left" href="<?php echo get_home_url(); ?>">
<img alt="DMA Logo" src="<?php echo get_template_directory_uri(); ?>/img/dma-logo.svg">
</a>
<a href="#" data-target="slide-out" class="sidenav-trigger hide-on-large" aria-controls="primary-menu" ><i class="material-icons"></i></a>
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
// 'menu_id' => 'primary-menu',
'menu_class' => 'right hide-on-med-and-down',
) );
?>
</div>
</nav>
</div>
<ul id="slide-out" class="sidenav">
<br><br><br><br><br>
<li>
<ul class="collapsible">
<li>
<div class="collapsible-header">What We Do <i class="material-icons"></i>
</div>
<div class="collapsible-body">
<ul>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/what-we-do/life-of-building-solutions">Life Of Building Solutions</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/what-we-do/engineering/">Engineering</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/what-we-do/facilities-maintanance/">Facilities & Maintanance</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/what-we-do/interiors-joinery/">Interiors & Joinery</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a class="bold" title="Where We Work" href="<?php echo get_home_url(); ?>/where-we-work/">
Where We Work
</a>
</li>
</ul>
</li>
<ul class="collapsible">
<li>
<div class="collapsible-header">How We Do It <i class="material-icons"></i></div>
<div class="collapsible-body">
<ul>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/how-we-do-it/as-one-team/">As One Team</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/how-we-do-it/using-technology/">Using Technology</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/how-we-do-it/with-24-7-customer-care/">With 24/7 Customer Care</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/how-we-do-it/with-24-7-customer-care/">Engineering</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/how-we-do-it/ensuring-compliance/">Ensuring Compliance</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/how-we-do-it/safely">Sefely</a></li>
</ul>
</div>
</li>
</ul>
<ul class="collapsible">
<li>
<div class="collapsible-header">Who We Are <i class="material-icons"></i></div>
<div class="collapsible-body">
<ul>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/about/about-dma/">About DMA</a></li>
<li><a class="waves-effect main-color" href="<?php echo get_home_url(); ?>/about/our-team/">Our Team</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
<a class="bold" href="<?php echo get_home_url(); ?>/why-dma">Why DMA?</a>
</li>
</ul>
<ul>
<li>
<a class="bold" href="<?php echo get_home_url(); ?>/casestudies">Case Studies</a>
</li>
</ul>
<ul>
<li>
<a class="bold" href="<?php echo get_home_url(); ?>/news">News</a>
</li>
</ul>
<ul>
<li>
<a class="bold" href="<?php echo get_home_url(); ?>/contact">Contact</a>
</li>
</ul>
</ul>
этот nav.php выводит код, который я создал здесь:
см. Рабочий пример: https://codepen.io/AUDesign/pen/VNYYrV
Структура является фиксированной навигацией (z-index 997 и относительная позиция по умолчанию)
но анимация, отображающая элементы .sub-menu при наведении, должна иметь более низкий z-индекс, чем контейнер.
.Sub-меню покрывает основную навигацию, поэтому, когда она анимируется, она скользит по верхней части ссылки, и ее нельзя использовать или приятно видеть.
Это была ссылка для анимации навигации:
https://www.travelclick.com/home-9-1-17.html но я использовал CSS только на этом этапе.
В моем случае это в основном работает правильно, за исключением z-index .sub-menu, который я пробовал часами, но он всегда появляется поверх # menu-main
Я думаю, что в самой структуре есть довольно сложная структура z-index и позиции (относительная / абсолютная). Поэтому мне интересно, есть ли простой шаблон для этого случая.
это пример структуры z-index, которую я пытаюсь заставить работать, но .sub-menu никогда не опускается ниже своего контейнера.
так как .sub-menu генерируется WP, у меня нет большого контроля над выводом.
Я пытался выработать некоторые дополнительные CSS, чтобы заставить z-индекс, но что бы я ни делал, оно не застревало в основной навигации.
Как я могу это исправить?!
nav {
z-index: 9999;
}
.navbar-fixed {
position: absolute;
z-index: 9999;
}
#menu-main {
position: relative;
}
nav ul li.menu-item-has-children .sub-menu {
position: absolute;
z-index: -9999;
}
.main-navigation a img {
z-index: 9999;
position: absolute;
}
ul.sub-menu li,
.sub-menu {
z-index: -999999999999999999999999999;
position: relative;
background: pink;
top: -5px;
}