dropdown menu

Door J C op 16-08-2013 00:19

3.076 views

Hallo,

Ik heb een dropdown menu op een website voor mijn medewerkers.
Tot nu toe was de website niet te gebruiken met een mobiele website.

Nu ben ik de website aan het verbouwen waarbij ik dropdown menu met hover functie wil vervangen door iets dat wel zou moeten werken via een tablet of mobiele telefoon.
Ik begrijp dat hover niet werkt op deze apparaten, ik heb ook via internet gezocht naar een oplossing, maar ik begrijp de uitleg op internet niet goed.

Ik hoop dat jullie mij kunnen helpen.

Dit is wat ik heb:

<?php
<ul>
<li><a href="?pagina=home">Home</a>
</li>
<li>Medewerkers<br/>
<ul>
<li><a href="?pagina=medewerker-overzicht">Alle Medewerkers</a></li>
<li><a href="?pagina=profiel">Profielsite\'s</a></li>
<li><a href="?pagina=mw-foto">Foto\'s</a></li>
<li><a href="?pagina=rechten-overzicht">Rechten</a></li>
<li><a href="?pagina=cursussen">Cursussen</a></li>
<li><a href="?pagina=salaris-overzicht">Salaris</a></li>
<li><a href="?pagina=uren-administratie">Uren administratie</a></li>
<li><a href="?pagina=vakanties">Vakanties</a></li>
<li><a href="?pagina=berichten">Alle berichten</a></li>
</ul>
</li>
</ul>

?>

<css

#nav{
float: left;
width: 832px;
height: 21px;
margin: 0;
padding: 10px 0 0 150px;
background: url(../css/images/menu.jpg) repeat 1px 0px;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0 0 0 0px;
}

#nav ul li {
display: inline;
float: left;
margin: 0;
padding: 0 35px 0 20px;
font-weight: bold;
font-size: 13px;
color: #fff;
}

#nav ul li a:link, #nav ul li a:visited{ /* nav menu link */
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #fff;
}

#nav ul li a:hover, #nav ul li a:active{ /* nav menu link */
color: #f10202;
}

#nav li ul {
position: absolute;
width: 250px;
left: -999em;
}

#nav li ul a {
display: block;
width: 176px;
color: #fff;
text-decoration: none;
font-weight:bold;
padding: 2px 10px 2px 10px;
background: url(../css/images/nav.jpg) no-repeat 1px 0px;
}

#nav li:hover ul {
left: auto;
}

#main a:link, #main a:visited{ /* nav menu link */
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #233174;
}

#main a:hover, #main a:active{ /* nav menu link */
color: #f10202;
}
?>

Frank Nietbelangrijk

16-08-2013 00:35 gewijzigd op 16-08-2013 00:37

je hoeft de hover functie niet te vervangen want die kan bij devices met een muiscursor gewoon blijven werken. Bij een touch-screen wordt de hoverfunctie nooit aangesproken. Wel kun je met de pseudo-class active werken.


button {
    background-color:white;
}
button:hover {
    background-color:light-blue;
}
button:active {
    background-color:blue;
}

J C

16-08-2013 00:42

Ik prodeerde net iets van dit:

<?php
<ul>
<li><a href="?pagina=home">Home</a>
</li>
<li><a href="#">Medewerkers</a><br/>
<ul>
<li><a href="?pagina=medewerker-overzicht">Alle Medewerkers</a></li>
<li><a href="?pagina=profiel">Profielsite\'s</a></li>
<li><a href="?pagina=mw-foto">Foto\'s</a></li>
<li><a href="?pagina=rechten-overzicht">Rechten</a></li>
<li><a href="?pagina=cursussen">Cursussen</a></li>
<li><a href="?pagina=salaris-overzicht">Salaris</a></li>
<li><a href="?pagina=uren-administratie">Uren administratie</a></li>
<li><a href="?pagina=vakanties">Vakanties</a></li>
<li><a href="?pagina=berichten">Alle berichten</a></li>
</ul>
</li>
?>
Ik zet dus een < a href=#> </a> om het eerste item in het menu, maar ik heb geen smartfoon dus kan het niet checken. Ik had ergens gelezen dat het zo zou moeten werken.
Er zijn verschillende mobiele telefoon website checkers, maar ze ondersteunen allemaal gewoon hover, dus die tester zijn niet echt handig.

Hoe zou jij die button class precies in de code verwerken?

Frank Nietbelangrijk

17-08-2013 00:00

Sorry ik had je vraag niet goed begrepen. Je bedoelt dat je een CSS menu hebt. Als je met de muis over een menu item beweegt dan klapt er een submenu uit. Dit werkt niet met een touchscreen.

antwoord:

Kijk eens naar deze site:
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

Dit menu wordt op een klein beeldscherm volledig ingeklapt en na aanraken onder elkaar weergegeven en op een groot beeldscherm naast elkaar zoals je gewend bent. Bovendien is dit menu touchscreen vriendelijk.

Reageren

Inloggen om te reageren