Is there a way (or component i could use) to output a simple menu.
I just need it output as a list, like you would use for a simple superfish menu.
I've looked at the menu control and cssadapters (css friendly) which kind of works,
except there is a lot of styles and javascript output with the menu which is destroying the look.
If I can't find something that outputs a clean list, my next option is to craft some jquery to delete these styles. This is not my preferred option. If you have a better idea, please let me know.
Just something that looks like this:
<ul> Main Menu
<li> hi </li>
<li> second menu
<ul>
<li> in second menu </li>
<li> hi there </li>
</ul>
</li>
</ul>
Thanks.
You can use the Repeater server control. You are in control of all of the markup output to the screen.
Related
in my site i have menu and sub menu
my problem when i focus by tab to the menu, the menu opened like i hovered the menu by mouse.
but when i continued to the sub menu elements with tab the menu closed.
how can i keep the menu open if some of sub element is focused.
of course i can do it via javascript, but i want to know if i can do it with css only.
here is example (try go to links with 'tab' )
li.main{
float:left;
width:200px;
}
li .sub{
display:none;
}
li:hover .sub{
display:block
}
li.main:focus .sub{
display:block
}
<ul>
<li class="main" tabindex="0">
First menu
<div class='sub'>
<ul>
<li>First Link </li>
<li>Second Link </li>
</ul>
</div>
</li> <li class="main" tabindex="0">
Second menu
<div class='sub'>
<ul>
<li>Third Link </li>
<li>Forth Link </li>
</ul>
</div>
</li>
</ul>
With the current possibilities of CSS, you can't, as it was discussed in a lot of questions before (see accessible css dropdown menu for instance).
First of all, you can't use "display:none" in such approach because the link can't be accessed using the next link shortcut (tab key in most of the browsers implementation).
Solutions which work will imply solutions like positioning out of screen. It will restrict the view on screen to the current link as there is no parent() selector in CSS, or you might use a trick like in the above thread (which will work in some browsers and limit the width of the dropdown part).
But no matter the solution, it will not resolve the main problem : a dropdown menu is not the best way to achieve accessibility.
For instance, people with disabilities using eye tracking software will never benefit of a dropdown menu. Neither will people using tablet.
It is always something difficult to use, difficult to understand : What if I click on the category link? Does it open the category main page, or does it open the submenu?
If you really want an accessible menu, do not use a dropdown menu
I'm building Bootstrap menu in Kentico 6 using "Universal viewer" webpart and hierarchical transformations. So far I got the structure done, but I'm not able to figure out how to add "dropdown-menu" class to a link when his parent <li> has children.
This is the code I'm generating now:
<ul class="nav navbar-nav">
<li>
Some link
<ul>...</ul>
</li>
</ul>
And I'm trying to achieve this:
<ul class="nav navbar-nav">
<li>
Some link
<ul>...</ul>
</li>
</ul>
Class and data should be added only if parent <li> has <ul> embedded inside.
Should I use macro transformation or is there a way to achieve this with ascx transformation?
If there always is a dropdown in case of some child nodes you could use NodeChildNodesCount value.
<a href="#" <%# ((int)Eval("NodeChildNodesCount") > 0) ? "class=\"dropdown-toggle\" data-toggle=\"dropdown\"" : "" %>>Some link</a>
If there are some additional conditions like document type, you need to retrieve number of child nodes for that specific conditions. You can achieve it through document API, in a helper class or directly in ASCX transformation. Look for TreeProvider class. Note that this may be performance intensive operation. I would also consider adding that those dropdown classes on the client side by javascript.
UA: Mozilla Firefox 28.0;
AT: JAWS 14.0.1534 and NVDA 2014.1;
OS: MS Windows 7 Professional SP1
Given the following simple ARIA-enhanced menu widget, why is the associated 'Where to go' label never read? It's been my understanding that labels associated with focusable elements should be announced when focus is received. Instead, only the menu item's text is read.
<div role="application">
<ul id="main-menu" role="menu" aria-label="Where to go" aria-activedescendant="item-1" tabindex="0">
<li id="item-1" role="menuitem">First page</li>
<li id="item-2" role="menuitem">Second page</li>
<li id="item-3" role="menuitem">Third page</li>
</ul>
</div>
Is it some kind of "optimization" as to prevent excessive information to be read to the user everytime the menu received focus? Like, the contents of the "menuitem" would be prioritized over the labelling of the containing menu widget. Of course, this is just a wild guess. Does anybody have more details that could help clarify the above situation?
A related question based on the same code sample: I've found out that doing away with the containing div (the one with the role="application" attribute) changes absolutely nothing regarding the behavior of the widget (there's Javascript code for controlling keyboard interaction and updating the UL's aria-activedescendant attribute). When do you actually need a container with role="application"?
Based on the example, it doesn't look like something that should be a menu.
The menu role is intended for application style menus which pop-up sub-menus. See this menubar example.
Upon tabbing to the menu, you then use arrow keys to navigate, not tab.
What you've got (so far at least) is simple navigation, and on a website the most appropriate mechanism is standard links.
<nav aria-label="Where to go">
<ul id="main-menu">
<li>First page</li>
<li>Second page</li>
<li>Third page</li>
</ul>
</nav>
The aria-label may or may not be read out by a screenreader (in a brief test NVDA did not, VoiceOver did), if that is important hide an off-screen heading above the menu. However, that label is used if the user navigates by "landmark".
If you do go for a full menu, I'd try the accessible Adobe mega-menu.
I understand how to create a fixed nav menu. The one I am designing has links to various anchor points on the page. What I do not understand is how to I have the menu items automatically indicate where I am on the page? Can this be done without JS?
This effect is found on many 1-page designs. For instance:
http://www.thirdculturestudios.com/
http://kevinmheineman.com/
Any help would be appreciated.
You can do the jump using <a name="resourceName" id="resourceName"> anchor tags. But the smooth scrolling to the item needs javascript.
You just use Text to just jump to it (non js world).
Edit: clarified grammar since I tried rereading it and realized it would be confusing the way I wrote it
I'm not aware of a way to do that in CSS. Both of the pages you link to involve adding/removing classes dynamically based on the click event. CSS has no way of dynamically adding classes.
If you're interested, here's how you could do the link highlighting depending on if it's clicked simply in jQuery:
<div id="container">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 2</li>
</ul>
</div>
var a = $('#container a');
a.click(function() {
a.removeClass('active');
$(this).addClass('active');
});
http://jsfiddle.net/H5rNM/
You cannot do this without JavaScript, because CSS... well... cascades. The way those pages work is that each menu item has a class .active or similar, that is added when the item is clicked.
EDIT: I believe you're looking for jQuery's scroll() (see here) , where you can specify a function that takes place when the user scrolls. In this case, the function would check the scrollTop value and compare it to the offset of page sections, then add a class to the appropriate menu item.
A quick Google search of these terms will point you in the right direction.
No can't be done without Javascript.
I'm following this tutorial here http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery on adding a menu with jquery.
I've created my menu, but I'm having trouble adding it to wordpress. I opened up the header.php file since I want it to appear below the banner, and I paste it in it's own div, but it always "pushes" everything below it to the right.
How do I stop it from doing this?
Here's the code:
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
Hard to say without looking at the whole, but based on knowing very little of your problem, the only thing I can recommend you to try is this CSS property:
ul#nav {
position: absolute;
}
This way, it will not push other elements away. It might have other consequences tough, depending on other elements you might have.
Looks like you're missing a closing </ul>? You can also use The W3C Markup Validation Service to tack down errant tags.