I am new to making WordPress themes but I have managed to include the navigation menu list in my theme. I want to turn it into a horizontal drop-down menu using CSS but I am having all kinds of trouble figuring it out.
I have used this code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
To output this:
<div id="nav-container">
<div class="menu">
<ul>
<li class="current_page_item">Current Page</li>
<li class="page_item page-item-58">Menu Item #1
<ul class='children'>
<li class="page_item page-item-62">Child Item #1</li>
<li class="page_item page-item-60">Child Item #2</li>
</ul>
</li>
</ul>
</div>
</div>
Can someone please tell me, or point me in the right direction for turning this into a drop down menu? As a note I do not know how to change the way the nav list is output either :(.
I know this might be a big ask but any help would be greatly appreciated!
Thanks
Ben
Lots of docs and examples available: http://codex.wordpress.org/Navigation_Menus and http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus and http://codex.wordpress.org/Function_Reference/wp_nav_menu
Making dropdown menus in wordpress with their "menus" in the dashboard is extremely easy. You can simply make your menu and indent any of the items you would want inside a dropdown by simply dragging it a little bit to the right (it snaps into place) and wordpress by default will add the .dropdown class that you can then style with CSS however you want.
If you need help beyond that with the CSS then it's probably a good idea to learn how to make CSS dropdown menus so you can compliment it with this.
Cheers.
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.
I want a simple slide-down div-bar like on soundcloud, youtube, gmail
It is used in some really good websites with a menu dropdown, and I want to know how to do it using css or even jquery if needed. I can't post images yet, because i don't have enough reputaion yet... Here is the example on soundcloud
Check out this DEMO, it should help you for sure.
<nav id="main-nav">
<ul id="nav-primary">
<li>Menu 1
<ul class="subnav">
<li>beans
</li>
<li>pork chop
</li>
</ul>
</li>
</nav>
The css part is in the DEMO
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.
I want to create a horizontal submenu in wordpress with wp_nav_menu();
As it is now I output the whole menu with wp_nav_menu but since the children is outputted inside theire parents I cant make a submenu. Just a dropdown menu.
I want it to look some what like this. Home, articles, about and contact are pages and inspiration, technology and interview are categories.
Home Articles About Contact
Inspiration Technology Interview
(if I have pressed on Articles)
So this is what it looks like:
<ul class="mainmenu">
<li>Home</li>
<li>Articles
<ul class="submenu">
<li>Inspiration</li>
<li>Technology</li>
<li>Interview</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is what I want:
<ul class="mainmenu">
<li>Home</li>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="submenu">
<li>Inspiration</li>
<li>Technology</li>
<li>Interview</li>
</ul>
Someone got and idea? :) thx
Don't modify template code, you should do this with css.
Sample here : http://jsfiddle.net/2G9dQ/1/
What about using wp_list_pages() instead of wp_nav_menu() so you can have the main and sub menus with something like this:
<ul id="mainmenu">
<?php wp_list_pages("title_li=&depth=1"); ?>
</ul>
<ul id="submenu">
<?php wp_list_pages("title_li=&depth=1&child_of=".$post->post_parent ); ?>
</ul>
Sorry to post a second answer, but it is a completely different solution with jQuery (just one line of js though): http://jsfiddle.net/AFC2r/. The CSS there is obviously just to make it appear clearer.
$(function() {
$(".mainmenu .submenu").detach().insertAfter('.mainmenu');
});
Depending on your needs, soju's CSS-only solution could be better of course.
The easiest way is just create 2 separated menus, in wp-admin.