OK I have come up with something (on my localhost) this is quite basic, so might need a bit of tweaking.
So add a menu – this could be made using a simple shortcode function in your child theme’s functions.php or a plugin, or just put the markup in the page
<ul class="alphabetmenu">
<li><a href="#alink">a</a></li>
<li><a href="#blink">b</a></li>
<li><a href="#clink">c</a></li>
<li><a href="#dlink">d</a></li>
<li><a href="#elink">e</a></li>
<li><a href="#flink">f</a></li>
</ul>
Add some css to the child theme’s sylesheet to style it as a horizontal menu
.alphabetmenu {
clear: both;
list-style: none;
width: 100%;
padding: 4px;
position: fixed;
top: 20px;
left: 50%;
}
.alphabetmenu li {
display: block;
float: left;
}
.alphabetmenu li a {
color: #fff;
background-color: #900;
color: #fff;
padding: 10px;
margin: 0 2px;
width: 40px;
text-align: center;
}
.alphabetmenu li.active a {
background-color: #009;
}
.alphabetmenu li a:hover {
color: #fff;
background-color: #090;
}
Make a folder called js in your child theme and create a new file inside that called alphabetmenu.js
Add the following code into that file:
jQuery(document).ready(function($) {
$('.alphabetmenu li').on('click', function(){
$(this).addClass('active').siblings().removeClass('active');
});
});
Add the following code into the child theme’s functions.php to register & enqueue the script
//* Register and Enqueue alphabet menu script
function alphabetmenu_script() {
wp_register_script( 'alphabetmenu', get_stylesheet_directory_uri() . '/js/alphabetmenu.js', array( 'jquery' ), '1.0.0', false );
wp_enqueue_script( 'alphabetmenu' );
}
add_action('wp_enqueue_scripts', 'alphabetmenu_script');
What this should do is add a new class called ‘active’ to a menu item when it is clicked. Then when one of the other menu items is clicked it will remove the class and apply it to the latest menu item to have been clicked.
