Is it possible to change the wp_nav_menu(); output from:
<ul>
<li>Home</li>
<li>Browse</li>
</ul>
to this:
<ul>
<li>Home</li>
<li>Browse</li>
</ul>
-Thanks
Yes. It is possible. You'll have to Using a custom Walker class to achieve that. Anyway, may I ask why you're trying to implement this?
Related
I want to implement a dropdown menu in a wordpress theme. <ul> function is not working properly because there are in both files CSS theme and menu. Maybe there is a conflict between these two CSS files for <ul> function. How can i make to work separate from each other the <ul> function.
Thanks.
use
<ul id="firstul">
<li></li>
</ul>
<ul id="secondul">
<li></li>
</ul>
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
The code:
<nav class='secondary-nav container'>
<ul>
<li>Customer Care</li>
<li class='dropdown'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
Google
</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</nav>
I have jQuery, bootstrap-dropdown.js, and bootstrap.css incuded. jQuery is included before everything.
The dropdown menu is appearing by default before a mouse click or hover on the list element.
screenshot - http://cl.ly/image/41122D2Z3R38
Anyone know why?
Thanks!
Try This :
$('.dropdown-toggle').dropdown();
The thing without your css code we can not understand your problem.
But as I can see, you data attribute is correctly used, but are you linking you javascript files correctly?
"bootsrtap.js" and "Your jquery File"
The second thing look out on your javascript applying code.
The applying code of the nav menu of bootsrtap is :
$('.dropdown-toggle').dropdown();
try to revise your file codes and I think this will help you ^_^
I am building a menu with css from a nested ordered list. What I am trying to achieve - without success yet - is that each nesting level is placed in a seperate row. I created a test case on codepen and I would appreciate any help solving this issue. Here's the pen: http://codepen.io/peterschmidler/pen/CkzpF
Thanks a lot in advance!
Peter
Edit: Thanks for the hint to the correct nesting of the list. But I still could't solve the main issue: How to render the list in seperate rows for each active level. I updated the code to clarify the issue: http://codepen.io/anon/pen/lzHda
I would highly appreciate any help, that solves the problem with pure CSS.
Thanks.
You did not nest your lists properly. <ol> can only contain <li>. You should put your nested <ol> inside an <li>. Something like this:
<ol>
<li>main1</li>
<li>main2
<ol>
<li>sub1</li>
<li>sub2
<ol>
<li>subsub1</li>
</ol>
</li> <!-- closing sub 2 -->
<li>sub3</li>
</ol>
</li> <!-- closing main 2 -->
<li>main3</li>
</ol>
This shouild put you back on track...
Each new <ol> in a nested list should be put under <li>.
In your case, try to nest this part of your code:
<ol>
<li>
Team
</li>
<ol>
<li>
Peter
</li>
<li>
Schmidler
</li>
</ol>
</ol>
in an <li>. Like this:
<li>
Team
<ol>
<li>Peter</li>
<li>Schmidler</li>
</ol>
</li>
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.