Is it possible to create nice looking multi-level menu which will work on desctop and touchscreen browsers? Without any js.
Since touchscreen haven't :hover property it is getting me crazy to create one stylesheet for both variants.
On desktop behavior should be: on hover - open submenu, on click - go to link.
On iPad: on first tap - open submenu, on second tap - go to link.
Thanks for any advise.
With pure CSS, target :hover AND :active to accomplish what you want.
Try this site out on your iPhone/iPad: www.thepricklepatch.com . It's not perfect but that's what I am doing to create the effect I want.
EDIT: Sorry it took so long for me to reply - was camping this weekend, no computer allowed! :) Here's the CSS for that site, stripped down to get the bits you want. I've added comments for you. There are empty rules in here that I used to stylize the menus, and I removed any CSS that dealt with pure looks and focused on the positioning of elements.
/* NAVIGATION ************************************************************************/
nav > ul > li
{
display: inline-block; /* sets elems to be inline but retain block-like properties, you may not need this */
position: relative; /* resets the positioning context */
cursor: pointer; /* sets the mouse cursor to look like a link for menus that do not have an A element */
}
nav > ul > li:hover
{
position: relative; /* reset positioning context */
z-index: 2000; /* bring element top-most */
}
nav > ul > li:hover,
nav > ul > li:hover > a /* HOVERED list elems and links in the main menu */
{
}
nav > ul > li,
nav > ul > li > a /* list elems and links in the menu */
{
}
nav > ul > li > div.submenu /* only first level of submenus */
{
display: none; /* hide the submenus by default */
}
nav > ul > li:hover > div.submenu /* Only HOVERED OVER first level of submenus */
{
display: block; /* display the submenus when the LI is hovered over */
position: absolute;
top: 100%; /* set to the bottom of the menu */
left: -1px; /* move left 1px from left of LI element */
z-index: 1000; /* top most */
}
nav > ul div.submenu /* All submenus */
{
}
nav > ul div.submenu > ul /* All lists of links in a submenu */
{
background: #fff;
padding: 2px;
border: solid 2px #f89d57;
}
nav > ul div.submenu > ul > li, /* All list elements in any submenu */
nav > ul div.submenu > ul > li > a /* All list elements containing links in any submenu */
{
}
nav > ul div.submenu > ul > li
{
}
nav > ul div.submenu > ul > li > a
{
display: block;
}
nav > ul div.submenu > ul > li,
nav > ul div.submenu > ul > li > a /* All links in any submenu */
{
}
nav > ul div.submenu > ul > li:hover /* All HOVERED li containing links in any submenu */
{
}
nav > ul div.submenu > ul > li:hover > a /* All links HOVERED in any submenu */
{
}
nav div.submenu > ul > li > div.submenu,
nav div.submenu > ul > li > a + div.submenu /* 2nd level of submenus and on */
{
display: none; /* Hide by default submenus */
}
nav div.submenu > ul > li:hover div.submenu,
nav div.submenu > ul > li:hover a + div.submenu /* 2nd level submenus and on (if even used) */
{
display: block; /* Show submenus when parent hovered */
position: absolute;
top: -2px;
left: 75%;
z-index: 1000;
}
nav li:hover
{
position: relative;
z-index: 2000;
}
For reference, here is the HTML I used:
<nav>
<ul>
<li><a href="/index.aspx">Home</a></li>
<li><a href="/shop-by.aspx">Shop By…</a>
<div class="submenu">
<ul>
<li>Shop By Product
<div class="submenu">
<ul>
<li><a href="/products.aspx?category=furniture">Furniture</a></li><li><a href="/products.aspx?category=bed-bath">Bed & Bath</a></li><li><a href="/products.aspx?category=decor-accents">Décor Accents</a></li><li><a href="/products.aspx?category=tabletops">Tabletops</a></li><li><a href="/products.aspx?category=rugs-curtains">Rugs & Curtains</a></li><li><a href="/products.aspx?category=home-office">Home Office</a></li>
</ul>
</div>
</li>
<li>Shop By Room
<div class="submenu">
<ul>
<li><a href="/products.aspx?room=bathroom">Bathroom</a></li><li><a href="/products.aspx?room=bedroom">Bedroom</a></li><li><a href="/products.aspx?room=dining">Dining</a></li><li><a href="/products.aspx?room=kitchen">Kitchen</a></li><li><a href="/products.aspx?room=living-room">Living Room</a></li><li><a href="/products.aspx?room=media-office">Media & Office</a></li>
</ul>
</div>
</li>
<li>Shop By Color
<div class="submenu">
<ul>
<li><a href="/products.aspx?color=black">Black</a></li><li><a href="/products.aspx?color=blue">Blue</a></li><li><a href="/products.aspx?color=brown">Brown</a></li><li><a href="/products.aspx?color=green">Green</a></li><li><a href="/products.aspx?color=orange">Orange</a></li><li><a href="/products.aspx?color=purple">Purple</a></li><li><a href="/products.aspx?color=red">Red</a></li><li><a href="/products.aspx?color=white">White</a></li><li><a href="/products.aspx?color=yellow">Yellow</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="/services.aspx">Services</a>
<div class="submenu">
<ul>
<li><a href="/">Home Consultation</a></li>
<li><a href="/">Interior Design</a></li>
<li><a href="/">Floral Design</a></li>
<li><a href="/">Event Planning</a></li>
</ul>
</div>
</li>
<li><a href="/galleries.aspx">Gallery</a>
<div class="submenu">
<ul>
<li><a href="/">Rooms</a></li>
<li><a href="/">Floral</a></li>
<li><a href="/">Christmas</a></li>
<li><a href="/">Other Seasons</a></li>
</ul>
</div>
</li>
<li><a href="/promotions.aspx">Promotions</a>
<div class="submenu">
<ul>
<li><a href="/">Semi-Annual</a></li>
<li><a href="/">Sale</a></li>
<li><a href="/">Sale by Season</a></li>
</ul>
</div>
</li>
<li><a href="/contact-us.aspx">Contact Us</a>
<div class="submenu">
<ul>
<li><a href="/">Contact Info</a></li>
<li><a href="/">Comments</a></li>
<li><a href="/">Inquiries</a></li>
</ul>
</div>
</li>
<li class="navWishList"><a href="/wish-list.aspx">Wish List</a></li>
</ul>
</nav>
You can use JavaScript to do this without too much trouble if your primary menu nodes don't link anywhere. You could just add this as click functionality, which would work on touch devices.
You can also do it with :focus and :active states in combination with sibling selectors. This would allow the menu to display with keyboard navigation as well, which is a plus, but you would have to add some JavaScript to get it to not hide when you tab to the sub menu links.
<ul>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 1</a>
<ul class="submenu">
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
</ul>
</li>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 2</a>
<ul class="submenu">
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
</ul>
</li>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 3</a>
<ul class="submenu">
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
</ul>
</li>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 4</a>
<ul class="submenu">
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
<li><a href="page">Submenu Link</a></li>
</ul>
</li>
<ul>
With CSS like this:
.submenu { display:none; }
.menuLink:hover + .submenu,
.menuLink:focus + .submenu,
.menuLink:active + .submenu {
display:block;
}
http://jsfiddle.net/vPM6W/
