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 ^_^
Related
Nested Link is not routing it as forwarding to parent one always, here is sample code as.. seems like angular 2/4 don't support this approach or might be something wrong with my tag, with href is it working.
<ul>
<li> <a [routerLink]=['about']> </a>
<ul>
<li <a [routerLink]=['about/test']> </a> </li>
</ul>
</li>
</ul>
To use anchor tags in angular 2 you need to use fragment.
Like this.
<a [routerLink]=['about'] fragment='test'> </a>
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 created a wizard using bootstrap and some custom styling
fiddle here
All I want to do now is add a couple of dashes (-) between the tabs
[One]----[2]----[3]
Can someone please help me out here.
Thanks,
Add them after your <a> tag
Like this:
<li class="active"><span id="t1" class="textColor">1</span>-----------
</li>
<li><span class="textColor">2</span>-------
</li>
<li><span class="textColor">3</span>----
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 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.