touch and hover / link with delay possible?

[janvl]

Hi,
I have a nice workable methode to have "hover"-menus work on a touchdevice.

Like this
CSS

Code: Select all

#nav ul li ul {
    background-color:#aaF;
    color: #000;
    display: none;
    height: auto;
    margin: 0;
    padding: 0.5em;
}

#nav ul li:hover ul
{position:absolute;
    display: block;}

#nav ul li:focus ul
{position:absolute;
    display: block;}

#nav ul li:active ul
{position:absolute;
    display: block;}

then the HTML

Code: Select all

<div id="nav">
<ul>
    <li><a href="1index.html" target="_self">Styl 1</a></li>
    <li><a href=#>Styl 2 + 4 - 6</a><ul>
        <li><a href="2index.html" target="_self">Styl 2</a></li>
        <li><a href="4index.html" target="_self">Styl 4</a></li>
        <li><a href="5index.html" target="_self">Styl 5</a></li>
        <li><a href="6index.html" target="_self">Styl 6</a></li>
        </ul>
    </li>
    <li><a href="3index.html" target="_self">Styl 3</a></li>
</ul>
</div>

The only thing is that I would like to solve, is that the link under which the dropdown will open does not funktion the moment you touch the link.
If someone has a solution I would be gratefull.

BTW for IOS you can only "hover" when it concerns a link, no link, no hover.

Kind regards,
Jan

[velden]

Tried an <a> without href attribute?

[janvl]

Hi Velden,

that would not help much.

With a structure like:

Main-menu-item A
Main-menu-item B
--Sub-menu-item B1
--Sub-menu-item B2
--Sub-menu-item B3
Main-menu-item C

The problem exists if there is a page linked to Main-menu-item B
with touch, that page would open before I chose one of the sub-items.

I am afraid I will have to rearrange the menu-structure to get it to work on the desktop and on touch.

Kind regards,
Jan

[velden]

Yes you're right. There exists a jQuery hoverIntent plug-in but I don't think it will help you.

[janvl]

Hi,

I used or better use that one, but this is not a good solution, I have it in cooperation with superfish but after a month I must say it is not a solution I like, too much overhead.

The article I read on hover - focus - active in css looks promissing enough for touch and also desktop with mouse.

So I guess rebuilding the menu must be done.

Kind regards,
Jan

PS after 8.4.2014 I hope IE6 / IE7 / IE8 will slowly disappear together with XP.