如何解决如何在wordpress的父项下对齐下拉菜单
我为我的自定义 wordpress 主题创建了一个下拉菜单。要自定义它，我正在使用自定义步行者，但我不知道如何对齐左侧和父级“课程”下方的下拉列表。
我对 start_el 和 start_lvl 函数有点困惑。
目前下拉菜单似乎是在父级之外构建的，因此我无法将其相对于它定位。
custom_nav.php
<?php
/**
* Nav Menu API: Walker_Nav_Menu class
*
* @package WordPress
* @subpackage Nav_Menus
* @since 4.6.0
*/
/**
* Core class used to implement an HTML list of nav menu items.
*
* @since 3.0.0
*
* @see Walker
*/
class my_nav_walker extends Walker {
private $curItem;
/**
* What the class handles.
*
* @since 3.0.0
* @var string
*
* @see Walker::$tree_type
*/
public $tree_type = array( 'post_type','taxonomy','custom' );
/**
* Database fields to use.
*
* @since 3.0.0
* @todo Decouple this.
* @var array
*
* @see Walker::$db_fields
*/
public $db_fields = array(
'parent' => 'menu_item_parent','id' => 'db_id',);
/**
* Starts the list before the elements are added.
*
* @since 3.0.0
*
* @see Walker::start_lvl()
*
* @param string $output Used to append additional content (passed by reference).
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function start_lvl( &$output,$depth = 0,$args = null ) {
//var_dump($this->curItem);
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t,$depth );
// Default class.
$classes = array( 'my-dropdown' );
array_push($classes,strval($curItem->title));
$my_id = '';
if ($args->walker->has_children == true) {
//var_dump($args->walker->curItem->ID);
$my_id = $args->walker->curItem->ID;
}
/**
* Filters the CSS class(es) applied to a menu list element.
*
* @since 4.8.0
*
* @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
* @param stdClass $args An object of `wp_nav_menu()` arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
//var_dump($args);
$class_names = implode( ' ',apply_filters( 'nav_menu_submenu_css_class',$classes,$args,$depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$output .= "{$n}{$indent}<div$class_names><button class=\"dropbtn\" onclick=\"toggleDropdown(".$my_id.")\"><img src=\"" . get_template_directory_uri() . "'/assets/images/chevron-down.svg'\"></button><div class=\"dropdown-content dropdown-content-".$my_id."\">{$n}";
}
/**
* Ends the list of after the elements are added.
*
* @since 3.0.0
*
* @see Walker::end_lvl()
*
* @param string $output Used to append additional content (passed by reference).
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function end_lvl( &$output,$args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t,$depth );
$output .= "$indent</div></div>{$n}";
}
/**
* Starts the element output.
*
* @since 3.0.0
* @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
*
* @see Walker::start_el()
*
* @param string $output Used to append additional content (passed by reference).
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $id Current item ID.
*/
public function start_el( &$output,$item,$args = null,$id = 0 ) {
$this->curItem = $item;
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = ( $depth ) ? str_repeat( $t,$depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
/**
* Filters the arguments for a single nav menu item.
*
* @since 4.4.0
*
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
*/
$args = apply_filters( 'nav_menu_item_args',$depth );
/**
* Filters the CSS classes applied to a menu item's list item element.
*
* @since 3.0.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string[] $classes Array of the CSS classes that are applied to the menu item's `<li>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = implode( ' ',apply_filters( 'nav_menu_css_class',array_filter( $classes ),$depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
/**
* Filters the ID applied to a menu item's list item element.
*
* @since 3.0.1
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string $menu_id The ID that is applied to the menu item's `<li>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$id = apply_filters( 'nav_menu_item_id','menu-item-' . $item->ID,$depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
//$output .= $indent . '<li' . $id . $class_names . '>';
$output .= $indent . '';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
if ( '_blank' === $item->target && empty( $item->xfn ) ) {
$atts['rel'] = 'noopener';
} else {
$atts['rel'] = $item->xfn;
}
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['aria-current'] = $item->current ? 'page' : '';
/**
* Filters the HTML attributes applied to a menu item's anchor element.
*
* @since 3.6.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $atts {
* The HTML attributes applied to the menu item's `<a>` element,empty strings are ignored.
*
* @type string $title Title attribute.
* @type string $target Target attribute.
* @type string $rel The rel attribute.
* @type string $href The href attribute.
* @type string $aria_current The aria-current attribute.
* }
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$atts = apply_filters( 'nav_menu_link_attributes',$atts,$depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
/** This filter is documented in wp-includes/post-template.php */
$title = apply_filters( 'the_title',$item->title,$item->ID );
/**
* Filters a menu item's title.
*
* @since 4.4.0
*
* @param string $title The menu item's title.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$title = apply_filters( 'nav_menu_item_title',$title,$depth );
$item_output = $args->before;
if ($args->walker->has_children == true) {
//var_dump($item);
$item_output .= '<a' . $attributes . ' class="' . $item->ID . '" onclick="toggleDropdown('.$item->ID.')">';
} else {
$item_output .= '<a' . $attributes . '>';
}
$item_output .= $args->link_before . $title . $args->link_after;
if ($args->walker->has_children == true) {
$item_output .= "<button class=\"dropbtn\" onclick=\"toggleDropdown(".$item->ID.")\"><img src=\"" . get_template_directory_uri() . "'/assets/images/chevron-down.svg'\"></button></a>";
} else {
$item_output .= '</a>';
}
$item_output .= $args->after;
/**
* Filters a menu item's starting output.
*
* The menu item's starting output only includes `$args->before`,the opening `<a>`,* the menu item's title,the closing `</a>`,and `$args->after`. Currently,there is
* no filter for modifying the opening and closing `<li>` for a menu item.
*
* @since 3.0.0
*
* @param string $item_output The menu item's starting HTML output.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
$output .= apply_filters( 'walker_nav_menu_start_el',$item_output,$depth,$args );
}
/**
* Ends the element output,if needed.
*
* @since 3.0.0
*
* @see Walker::end_el()
*
* @param string $output Used to append additional content (passed by reference).
* @param WP_Post $item Page data object. Not used.
* @param int $depth Depth of page. Not Used.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function end_el( &$output,$args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$output .= "{$n}";
//$output .= "</li>{$n}";
}
}
?>
my-scripts.js
function toggleDropdown(id,close) {
console.log(id);
setTimeout(function() {
var myTopnav = document.getElementById("myTopnav");
var dropdown = myTopnav.getElementsByClassName("dropdown-content-" + id)[0];
console.log(dropdown);
if (dropdown) {
console.log(dropdown.className);
if (dropdown.className.search(" show-dropdown") === -1 && close != true) {
dropdown.className += " show-dropdown";
} else {
dropdown.className = dropdown.className.replace(" show-dropdown","");
}
}
},0)
}
style.css
/*
Theme Name: XXX
*/
a:hover {
opacity:0.5;
transition:0.35s opacity;
}
.topnav-container img,.topnav-top-subcontainer img {
height:20px;
}
.topnav-container img:not(:first-child),.topnav-top-subcontainer img:not(:first-child) {
height:22px;
}
.topnav-container a:not(:first-child),.topnav-top-subcontainer a:not(:first-child) {
margin-left:10px;
}
.navbar-toggler {
margin-bottom:10px;
@media (max-width: 768px) {
nav {
width:100%;
}
nav .container-fluid {
padding:0;
}
.nav-item {
text-align:center;
background-color:lightgray;
}
.dropdown-menu {
text-align:center;
}
}
/* nav */
.navbar-icon {
padding:20px;
}
.navbar-icon img {
width:40px;
}
.navbar-icon .icon {
width: 40px;
height: 40px;
background: url('./assets/images/menu.svg');
transition:0.35s opacity;
}
.navbar-icon .icon.open {
background: url('./assets/images/close.svg');
background-size: 40px;
}
/* Add a black background color to the top navigation */
.topnav {
/*background-color: #333;*/
overflow: hidden;
width:100%;
transition:0.35s height;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #888;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
/*border-bottom:1px solid transparent;*/
transition:0.35s color;
}
/* Add an active class to highlight the current page */
.active {
/*background-color: #333;*/
/*border-bottom-color:#333 !important;*/
color: #333 !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.my-dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.my-dropdown .dropbtn,.dropbtn {
font-size: 17px;
border: none;
outline: none;
color: #888;
/*padding: 14px 16px;*/
background-color: inherit;
font-family: inherit;
margin: 0;
transition:0.35s color;
}
.my-dropdown img {
width:12px;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: #888;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,.my-dropdown:hover .dropbtn {
/*background-color: #555;*/
color: #333;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
/*
.my-dropdown:hover .dropdown-content {
display: block;
}
*/
.my-dropdown .show-dropdown {
display: block;
}
.collapsing {
height: 0;
}
/* When the screen is less than 600 pixels wide,hide all links,except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
.topnav-container {
padding-left:0 !important;
padding-right:0 !important;
}
.my-dropdown {
float: none;
}
.dropdown-content {
background-color:#efefef;
}
.topnav a,.my-dropdown .dropbtn,.dropbtn {
display: none;
}
.topnav a {
float: none;
text-align: center;
}
.topnav a.active {
background-color:#333;
color:#fff !important;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.topnav.responsive .my-dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .my-dropdown .dropbtn,.dropbtn {
display: block;
width: 100%;
text-align: center;
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
