Meishin/MinimalistFlex
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Changed the appearance of menu, both desktop and mobile.

Browse Source 
On desktop, the navigation menu will display normally instead of being wrapped in a modal.
On mobile, the dialog has been refined to remove the widget areas to provide better accessibilty. A focus trap is also implemented to improve accessibility.
This commit is contained in:
Frank419
2024-08-27 17:43:11 +08:00
parent c524031003
commit e467a7032d
3 changed files with 181 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
header.php
+7 -19
View File
@@ -79,7 +79,7 @@ $label = get_theme_mod( 'minimalistflex_header_label' );
</header>
<?php endif; ?>
<nav class="minimalistflex-header">
<header class="minimalistflex-header">
<?php if ( has_custom_logo() ): ?>
<?php echo get_custom_logo(); ?>
<?php endif; ?>
@@ -89,32 +89,20 @@ $label = get_theme_mod( 'minimalistflex_header_label' );
</h1>
<?php endif; ?>
<div class="spacer"></div>
<?php if ( has_nav_menu( 'main-menu' ) || is_active_sidebar( 'menu' ) || is_active_sidebar( 'menu-2' ) ): ?>
<?php if ( has_nav_menu( 'main-menu' ) ): ?>
<button id="menu-toggle" aria-label="<?php esc_attr_e( 'Toggle navigation dropdown', 'minimalistflex' ) ?>">
<i id="menu-toggle-icon"></i>
</button>
<?php endif; ?>
<div class="minimalistflex-menu-container">
<div class="minimalistflex-menu">
<nav class="minimalistflex-menu">
<?php if ( has_nav_menu( 'main-menu' ) ): ?>
<div id="minimalistflex-menu-nav-menu">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
<a id="minimalistflex-menu-focus-hack" href="#minimalistflex-menu-focus-hack" aria-label="<?php esc_attr_e( 'This element sends you back to the close menu button.', 'crystal' ) ?>"></a>
</div>
<?php endif; ?>
<div class="custom-menu-2" id="custom-menu-2">
<a id="custom-menu-2-focus" href="#" aria-label="<?php esc_attr_e( 'Here goes the "Menu 2" widget area. This text does not trigger anything.', 'minimalistflex' ) ?>"></a>
<div class="custom-menu-2-menu">
<?php get_sidebar( 'menu-2' ) ?>
</div>
</div>
<?php if ( is_active_sidebar( 'menu' ) || user_can( get_current_user_id(), 'edit_theme_options' ) ): ?>
<div class="menu-custom" id="menu-custom">
<?php get_sidebar( 'menu' ) ?>
</div>
<?php endif; ?>
</div>
</div>
</nav>
</nav>
<?php endif; ?>
</header>
<main class="minimalistflex-master <?php echo 'minimalistflex-sidebar-layout-' . $sidebar ?>">