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.
Related
I have a project developed using ASP.net.
I have placed the menu bar in the master page and I need to change the active menu bar item according to the loaded page.
Here is my code.
Site.Master
<div class="menu-bg">
<ul class="menu wrapper">
<li>Home page</li>
<li>Our Company</li>
<li>Our services</li>
<li>Our projects</li>
<li>Careers</li>
</ul>
</div>
For example, if I load Default.aspx page the Menu bar item "Home Page" should get a different color.
Is there any possible way to do this?
Please help me.
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 was just wondering what the general procedure is to style the tabs in the primary menu links. Where is the CSS that takes care of that? How can I change it? At the moment I have a Zen subtheme installed and I would like to completely restyle the tabs. The tabs' markup looks like this:
<div class="tabs">
<h2 class="element-invisible">Primary tabs</h2>
<ul class="tabs primary clearfix">
<li class="active"><a href="/drupal/user/1" class="active">
<span class="tab">View</span><span class="element-invisible">(active tab)</span></a>
</li>
<li><span class="tab">Venues</span></li>
<li><span class="tab">Events</span></li>
<li><span class="tab">Edit</span></li>
<li><span class="tab">Shortcuts</span></li>
<li><span class="tab">Devel</span></li>
</ul>
</div>
What I would like is to be able to change the background colour of the tabs as tehy are now (they are greyish). I've tried setting the background colour of the spans, li, and a elements but that didn't work.
Any ideas?
Thanks,
The answer is inside the tabs.css in the Zen theme - can't believe I didn't see it before!
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.