dropdown menu
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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>
?>
<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;
}
?>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
button {
background-color:white;
}
button:hover {
background-color:light-blue;
}
button:active {
background-color:blue;
}
background-color:white;
}
button:hover {
background-color:light-blue;
}
button:active {
background-color:blue;
}
Gewijzigd op 16/08/2013 00:37:28 door Frank Nietbelangrijk
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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>
?>
<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?
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.