Since many years a GUI-standard are the menu-bars of applications with menus popping up, if you click or hover an entry in the menu-bar. Some websites implement this feature too, but they are using Javascript, as far as I can see. For different reasons Javascript can be a problem, so the question: Is this possible to implement without Javascript, only using HTML and CSS?
I've done something like this before, and it's a trick pulled off by placing the menu items in anchor tags, with submenus in hidden divs INSIDE those anchor tags. The CSS trick is to make the inner div appear during the a:hover event.
It looks something like:
<style>
A DIV { display: none; }
A:hover DIV { display: block; }
</style>
<a href="blah.htm">
Top Level Menu Text
<div><ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul></div>
</a>
Your mileage may vary...
EDIT: Internet Explorer 6 and lower do NOT support the :hover pseudo-class on other elements besides A. In more 'modern' browsers, it is accepted to be able to use this trick with LI, TD, DIV, SPAN, and most any tag.
Have a look at CSS Menu Maker.
Best known technique is the suckerfish menus. Searching for that will result in a lot of interesting menu's. It only needs javascript in IE6 and lower.
Here's a list of the sons of the suckerfish menus.
Consider using the CSS methods as a backup for when JavaScript is unavailable. JavaScript can* provide a better user experience for drop-down menus because you can add some delay factors to stop menus immediately disappearing if the mouse briefly leaves their hover area. Pure-CSS menus can sometimes be a bit finicky to use, especially if the hover targets are small.
*: of course, not all menu scripts actually bother to do this...
You can use the pseudoclass :hover to get an hover effect.
a:link {
color: blue;
}
a:hover {
color: red;
}
I can give a more extensive example but not right now (need to get the kids to the dentist).
There's also Eric Meyer's original article on pure CSS menus.
There are bound to be much more robust and modern takes out there now mentioned by others, but I thought I'd mention it for posterity. :)
Related
Opening this simple jsfiddle in Firefox renders differently than in Chrome and other browsers.
CHROME
FIREFOX
I have actually been trying to make it look like Firefox in other browsers, i.e the bullet position follows the alignment of the text. Note that i'd also want the next list items to be centered, i.e not aligned based on the bullet position of the first one, see screenshot example. Anyone know a way?
I have seen answers using list-style-position: inside, but can't live with the side effect of the difference in the gap between the bullet and the text.
<ul>
<li style="text-align: center;">Hello I'm Centered</li>
</ul>
You could try using a pseudo element like :before instead to get the desired effect across all browsers. By setting the margin-right you can choose the spacing yourself too.
li{
text-align:center;
list-style:none;
}
li:before{
content:'•';
margin-right:7px
}
What's happening is that list-style:none hides the default bullet and by using :before you're able to add it back in as an inline pseudo element.
Traditionally browsers are rather free what exactly to do with the dot in lists. I can easily imagine situations, where Firefox’ solution results in a better rendering.
If the <li> makes trouble, move the text alignment one element farther down, i.e., add a helper element:
<ul>
<li><div style="text-align: center;">Hello I'm Centered</div></li>
</ul>
Disadvantage is, that you introduce an element solely for reasons of styling, but in my experience pragmatism beats purism in such an isolated case.
I have tried without success to make a dropdown list without the content are getting pushed down under the dropdown, i can't get it to work, i have tried with float and display wont work :s
Anyone have any suggestions?
It really doesn't seem like you have come a long way at all, so I'd be hesitant to just write a long answer to explain how dropdowns work, and instead suggest that you look up tutorials. You are probably going to need to use javascript to make the dropdown "clickable" to open and close it.
But I'll try to start you off in the right direction!
To avoid making the dropdown move other elements, it needs to have the css attribute "position:absolute;" and the parent element (the element the menu is inside) has to have the attribute "position:relative;"
<style>
.menuButton{
position:relative;
}
.dropDown{
position:absolute;
bottom:0;
}
</style>
<div class="menuButton">
<p>Click me!</p>
<div class="dropDown">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
Though further, I'd suggest you use javascript to toggle the ".dropDown" class' attribute "display:none" on and off. You will most likely learn better by googling, because I dont think I have teach you, and people are probably not going to give you a lot of help here on such a basic question
(navigation layout picture)
I have the navigation-layout of tabs and sub-tabs, which i want to make accessible via text-reader/lynx. It consists of the main pages "Startseite", "Über", "Interessant", "Orte", as well as the sub-pages "Linköping", "München" and "Baustelle". The logical structure would thus be:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
But since I use a layout of several div-tags, it only yields this in lynx:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
The questions (or solutions I don't know how to implement yet) now are:
(1) how do I improve my layout to make it accessible via text-reader/lynx
... or
(2) how do I adjust a layout of unorderd lists and sub-lists (see code) too look like my current tabbed navigation-layout?
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</li>
<li>Orte</li>
</ul>
</nav>
keep in mind that my main tasks is making it text-reader/lynx accessible. I though of using a layout like this, since it is easily styled with #some_ul_id {display: inline-block}:
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant</li>
<li>Orte</li>
</ul>
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</nav>
My third question is:
(3) Is this good practice? Should I do it?
It is the easiest way, though solution (2) would be nicer, since it is more logical.
From an accessibility perspective, the way to markup the solution so that it semantically represents what you are trying to achieve is to use the WAI-ARIA menubar, menu and the various menuitem roles. You should also use the aria-haspopup="true" attribute to show sub-menus and the aria-expanded attribute to track when the menu is expanded. In order to achieve the semantic markup of the hierarchy, you will want to have hierarchical lists as this is the easiest way to represent the hierarchy in an understandable way.
Here is a link to a full dynamic ARIA menu example http://dylanb.github.io/bower_components/a11yfy/examples/menu.html
You will need to ensure that each menu item is keyboard focusable using an href attribute on an anchor tag will do this for you as long as you look for the 'click' event and don't do anything funky with mousedown/mouseup etc.
One way to achieve this could be to absolutely position the sub-menu – of course that requires that you know beforehand that there’ll be enough space, so that items don’t go over multiple lines (resp. you have an alternative at hand for smaller screens via media queries).
So you would position the outer ul (or the nav itself) relative, and then on :hover over a main menu item you make the sub-ul visible, that is positioned absolutely in such a way that it comes to lay underneath the line of main menu items – like this: http://jsfiddle.net/0rpyLqtn/
Other slight variations are easily imaginable; if you don’t want “blank space” underneath the single line of main menu items, you could f.e. give that ul a border-bottom instead of a margin-bottom, and have the border color of it visible at all times, like this: http://jsfiddle.net/0rpyLqtn/1/
Since you have accessibility in mind, you might also want to pay attention to how this kind of menu behaves on devices that do not have a “mouse” as input device. Getting such a menu to be accessible via keyboard can be tricky, and on touchscreens a menu based on :hover might not work that well either. Anyhow, such issues have been discussed on the net already, so with a little research you should be able to find solutions/workarounds for these issues as well.
Consider this Bootstrap bug report. Basically, the <select> dropdown is not aligned with the <select> element on Chrome and Safari (both tested only a Mac). #mdo thinks there there is no fix. I just want a second opinion.
Can the <select> dropdown be aligned with the base <select> element?
You will NEVER style browser built-in tools the same across multiple browsers and across multiple OS.
I have been doing this a very long time and my best advise it to style as-best-as possible and reserve quirky css hacks for old IE browsers.
If you want to be super-anal about exact pixels, you need to not use the select html tag and instead use a ul tag. Then use css to list-style: none;
<ul id="my_selectbox">
<li>Option 1</li>
<li>Option 2</li>
</ul>
Then, style the menu to look exactly how you want it to look.
So think of this as a menu instead of a selectbox.
Then use javascript to make the menu drop down like a select tag.
(but that sure is a lot of work for a few pixels isn't it?)
Remember, you will NEVER EVER write a CSS file that makes all browsers look identical. Just isn't how they are designed. If you have a manager that demands it, they need to learn how this stuff works.
further note: you will have to also use javascript to store a selection. I can write you a quick script that does this if you need it. Not sure how proficient you are with javascript.
This additional style to the element may help:
-webkit-appearance: none;
I have a horizontal menu consisting of <li> elements with display: inline.
The elements are supposed to be next to each other seamlessly.
In the source code, I would like to have each li on one line for easier debugging:
<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...
However, if I add a \n after each element, the menu items have a gap between each other. I gather this is the intended behaviour, but is there any way to turn it off using a clever "white-space" setting or something?
Edit: I can't use float, this is in a CMS with the option to center the list items.
You can avoid the rendering issues but keep the code maintainable like this:
<ul
><li>item 1</li
><li>item 2</li
><li>item 3</li
></ul>
It removes the whitespace but it's still easy to edit the items in a text editor, provided your CMS doesn't mess with the markup you enter!
Do you have the ability to edit the CSS? If so, you could try adjusting the padding/margins on the <li> element. It does seem to be a lot of effort of readability.
Depending on what browser you are using you can get the HTML Tidy http://users.skynet.be/mgueury/mozilla/, which gives you the option to Tidy up your source, which might be useful enough for debugging
CSS+float is your friend.
HTML is whitespace independent - so adding line breaks should have no effect. Some browser's rendering engines don't quite get this right however.
What you probably want to do is add
float: left;
to your li tags to get them next to each other.