I'm having a dropdown menu based on pureCss. This menu can contain 20 or more entries:
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Menu
<ul class="pure-menu-children">
<li class="pure-menu-item">Entry</li>
<li class="pure-menu-item">Entry</li>
[... many more entries ...]
<li class="pure-menu-item">Entry</li>
</ul>
</li>
</ul>
</div>
See this codepen
On smaller screens this quickly leads to the user needing to scroll down to reach the bottom entries - which can be really painful/impossible without a mousewheel, as the hovering is often lost.
Is there a way to modify the CSS so that the entries automatically get wrapped into a second or even third column before the bottom is reached?
Related
I'm trying to wrap a standard list item format in an Angular directive, and then use it with ng-repeat inside various list types. The problem is, the directive seems to lose the class of the parent, so the list doesn't render the way it should. Here's an example:
<ul class="nav nav-pills nav-stacked affix">
<div ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</div>
</ul>
Renders exactly like:
<ul class="nav navbar-nav navbar-right">
<div ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</div>
</ul>
So, both of these renders exactly the same, neither the way I want them to. How do I make my list item directive aware of its parent's class?
Edit:
<ul class="nav nav-pills nav-stacked affix">
<li ng-repeat="item in items">
<my-list-item item="item"></my-list-item>
</li>
</ul>
The my-list-item directive looks something like this:
<a class="myClass" href="{{item.target}}"><span ng-bind-html="item.text"></span></a>
<div> isn't a valid child of <ul> in the first place. Really the only valid child is <li>
The bootstrap css won't expect it either. Use markup that matches bootstrap suggested markup and apply any appropriate classes that are used in the docs.
As for what gets rendered in <my-list-item> you would need to show what that html looks like if it is also problematic
Reference W3C <UL> Specs
Permitted contents
zero or more li elements
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 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.
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!