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.
Related
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 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.
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 would like to know how do I get subcategories to show 'under' their parent category on the side bar in wordpress? Ideally this would be a tree-like fashion.
I'm surprised this isn't standard. The html markup seems to not even have any css usable classes that i can style to distinguish between the levels of category. This is what I have:
<h3 class="widget-title">Categories</h3>
<ul>
<li class="cat-item cat-item-3">test parent </li>
<li class="cat-item cat-item-4">test sub 1 </li>
<li class="cat-item cat-item-1">Uncategorized </li>
</ul>
You need to check "show hierarchy" in the category widget's options.
Is there a way (or component i could use) to output a simple menu.
I just need it output as a list, like you would use for a simple superfish menu.
I've looked at the menu control and cssadapters (css friendly) which kind of works,
except there is a lot of styles and javascript output with the menu which is destroying the look.
If I can't find something that outputs a clean list, my next option is to craft some jquery to delete these styles. This is not my preferred option. If you have a better idea, please let me know.
Just something that looks like this:
<ul> Main Menu
<li> hi </li>
<li> second menu
<ul>
<li> in second menu </li>
<li> hi there </li>
</ul>
</li>
</ul>
Thanks.
You can use the Repeater server control. You are in control of all of the markup output to the screen.