Menu
Ok, I have read a lot of times that inline elements should never contain block elements. I agree, there are problems with that and it can get messy after. But I find it the only solution to do the following:
I'm trying to create an HTML template that imitates the Metro UI "tiles" (yeah, the one that is in windows 8). The tiles are made using <li> elements. Now, the problem is that I want the tiles (the whole <li> tag) clickable, but proper HTML tells me you can't surround a block element with an inline element. Besides, you can't surround an <li> with an <a>. Is there any method of doing this without going against the rules of html?
873
If you just use <li></li> without <ul> or <ol> the rendered result will be a un ordered list with bullet icons preceding each list item, and when you see the DOM there won't be any <ul> or <li> tag added.
The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu ( <menu> ). In menus and unordered lists, list items are usually displayed using bullet points.
For semantic purposes, content within the li element should be wrapped in a p tag. If there is more than one paragraph or section in a li , do not close the li until after the last element. This differs from the current standard, but is cleaner for accessible content.
Here is a jQuery example that shows a very simple list item menu. I added two ways to stop the <li> elements from being clickable: simple boolean switch, and using jQuery's . off() method. Save this answer.
A legal and clean way of accomplishing this is to use a style of inline-block for the A tags and let them fill the complete LI.
LI > A
{
display: inline-block;
}
OR
LI > A
{
display: block;
}
This will work in IE7+, and all recent versions of Firefox, Chrome, Safari, Opera, etc.
Note that in the current draft of HTML 5, it is legal to put a greater variety of elements inside an anchor tag than was previously allowed (see "permitted content" and examples): http://dev.w3.org/html5/markup/a.html
Additional article: http://html5doctor.com/block-level-links-in-html-5/
141
If you have a look at the stackoverflow menu you will see it is quite easy. You put a <a> inside a <li>, put it to display block and give it the padding you want to achieve the block feel.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
