I have a menu structure I built in HTML+CSS that I would like to incorporate into a WordPress menu, but I am new to extending the Walker class and was wondering if someone could show me an example of how it might work. The code I would like to output is below:
<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
<li><a id="current" href="front-page.php">Current Page</a></li>
<li>Top Level Menu <span class="sf-sub-indicator"><i class="fa fa-angle-down"></i></span>
<ul>
<li>Child Link</li>
</ul>
</li>
<li>Another Link No Children</li>
</ul>
</nav>
<!-- Menu End -->
The nav and ul tags wrap the entire menu and do not need repeating.
The li for a single page without any child pages just needs an anchor tag inside of a bare li, except if the page is current, and add the appropriate id to the a tag.
If there is a parent item with children, display the parent link first with a "sf-with-ul" class on the a tag, then make another ul group with its li children have the same class as well.
Could anyone point me in the right direction here on how to accomplish this? Thank you.
Unfortunately I don't have a massive amount of time to write an example right now but I can send you the article that goes into decent detail on how to create walkers in WordPress.
How to add custom HTML to wp_nav_menu?
Using this as a guide it should be possible to add classes where you want to add them and structure your menu. If not I can try and whip an example up later.
Related
in my site i have menu and sub menu
my problem when i focus by tab to the menu, the menu opened like i hovered the menu by mouse.
but when i continued to the sub menu elements with tab the menu closed.
how can i keep the menu open if some of sub element is focused.
of course i can do it via javascript, but i want to know if i can do it with css only.
here is example (try go to links with 'tab' )
li.main{
float:left;
width:200px;
}
li .sub{
display:none;
}
li:hover .sub{
display:block
}
li.main:focus .sub{
display:block
}
<ul>
<li class="main" tabindex="0">
First menu
<div class='sub'>
<ul>
<li>First Link </li>
<li>Second Link </li>
</ul>
</div>
</li> <li class="main" tabindex="0">
Second menu
<div class='sub'>
<ul>
<li>Third Link </li>
<li>Forth Link </li>
</ul>
</div>
</li>
</ul>
With the current possibilities of CSS, you can't, as it was discussed in a lot of questions before (see accessible css dropdown menu for instance).
First of all, you can't use "display:none" in such approach because the link can't be accessed using the next link shortcut (tab key in most of the browsers implementation).
Solutions which work will imply solutions like positioning out of screen. It will restrict the view on screen to the current link as there is no parent() selector in CSS, or you might use a trick like in the above thread (which will work in some browsers and limit the width of the dropdown part).
But no matter the solution, it will not resolve the main problem : a dropdown menu is not the best way to achieve accessibility.
For instance, people with disabilities using eye tracking software will never benefit of a dropdown menu. Neither will people using tablet.
It is always something difficult to use, difficult to understand : What if I click on the category link? Does it open the category main page, or does it open the submenu?
If you really want an accessible menu, do not use a dropdown menu
I'm doing some code clean up / validation in a web site, and have run into an issue. The site have a main menu (menubar) where the current page should be indicated.
The menu structure as is:
<nav role="navigation">
<ul role="menubar">
<li role="menuitem" aria-selected="true">
Current page
</li>
<li role="menuitem">
Another page
</li>
</ul>
</nav>
According to the WAI-ARIA spec, the state aria-selected is not allowed on the role menuitem: http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected. Neither can I find any state for menuitem that seem to mark the menuitem as selected: http://www.w3.org/TR/wai-aria/roles#menuitem.
What would be the correct implementation of a selected menuitem/page in a menubar?
Update:
I found one answer suggesting to leave the anchor out on the current page in the menu, but not sure if that will give me what I want.
<li role="menuitem">Current page</li>
As laid out very nicely in the blog entry The Accessible Current Page Link Conundrum there seems to be an upcoming solution by introducing the attribute aria-current="true".
For now, you stay with
your finding of either leaving the anchor out on the current page menu item
or include an aria-described attribute, which is specified to attach descriptive information to one or more elements by referencing an ID. Example:
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<span id="a11y-desc-current">current page</span>
</nav>
I am creating a dynamic navigation list and I want to be able to highlight the page from that list that the user is currently browsing without having to explicitly add the style into a CSS document. For instance,
<div class="check-me">
<ul class="any-class">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
Essentially, I want to be able to replace the "any-class" with another class, one that appears on an LI element within the "any-class" UL.
<div class="check-me">
<ul class="shirts">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
I cannot append an "active" class to any LI due to limitations, so I wonder if this is possible using a wildcard CSS selector to use inside div.check-me to highlight anything that shares the same class with the UL. I hope I've been clear enough.
im using bootstrap pills as my navigation bar.problem is it is not showing the curent active pill with blue color background(like bootstrap)
here is my code
<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
<ul class="nav nav-pills">
<li class="active">
Home</li>
<li class="">Projects</li>
<li class="">Employee</li>
<li>Forum</li>
</ul>
</div>
the output is here
only the home pill is focused
Add this code inside script tags:
$(document).ready(function(){
$(".nav-pills li").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
DEMO
To give a full answer based on the comments, your JSFiddle works exactly as expected. The item with the .active class will have the blue background for the pill.
However what I believe you expect to happen is when you click on a link that the pill will automatically become active, this is not how it works.
You will need to generate the menu on the fly and assign the active class during generation or on each page use JS to assign the active class to the correct menu list item. For ease of use I would suggest assigning ID's to the list items so you can do the following:
So say you click on the second menu item, on the Projects.php page you could have the following jquery.
$('#project').addClass("active");
Assuming you gave the menu items IDs.
I need to insert empty <li> element just after first menu item so I can make use of borders and get desired effect.
How is this done in Wordpress?
Just to make sure it is all clear.. this is current menu structure that Wordpress generates:
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>
...
</ul>
What I need is:
<ul>
<li><a href='#'>item1</a></li>
<li class='empty-item'></li>
<li><a href='#'>item2</a></li>
...
</ul>
Thank you guys.
If your theme uses the WP Menu's you can go to Appearance>Menu's and add a "custom menu item". Just place a # for the URL and name it whatever you want. Click and to place it in the menu items listed and drag it just below the top menu item.