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>
Related
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?
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 currently using the horizontal nav-bar created by Superfish (http://users.tpg.com.au/j_birch/plugins/superfish/#sample4) on my website www.bonusrunner.net (Under construction :)
The .css and .js files can be downloaded here: http://users.tpg.com.au/j_birch/plugins/superfish/#download
I am struggling with some css adjustments. I want my menu to be rather identical to the one on http://www.oddsportal.com - Can anybody help me? First of all, how do I make my submenu visible permanently, and secondly I want the submenu background to have a width of 100%.
Best, Slynge
First, add the correct code from the example (#4) to your page:
$(document).ready(function(){
$("ul.sf-menu").superfish({
pathClass: 'current'
});
});
(You forgot the pathClass on your page).
Then the included superfish-navbar.css will take care of the rest.
UPDATE
<ul class="sf-menu sf-navbar sf-js-enabled sf-shadow">
<li class="current">
Bonusrunner<span class="sf-sub-indicator"> »</span>
<ul>
<li>
Anvend Bonusrunner
</li>
<li>Om Bonusrunner</li>
<li>Ludomani Test</li>
<li>Ansvarligt Spil</li>
</ul>
</li>
<li>
Casino<span class="sf-sub-indicator"> »</span>
<ul>
<li>
Casino Bonus
</li>
<li>Casino Guide</li>
<li>Casino Nyheder</li>
<li>No Deposit Casino</li>
</ul>
</li>
<li>
Betting<span class="sf-sub-indicator"> »</span>
<ul>
<li>
Betting Nyheder
</li>
<li>Betting Guide</li>
<li>Betting Ekspertråd</li>
</ul>
</li>
Note the class="current" on the menu that is supposed to be open on the load. Tried it on downloaded code from your site and works like a charm.
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.