Taalmenu klapt niet goed uit op mobiele telefoon

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Maarten Vries

Maarten Vries

04/05/2018 17:54:05
Quote Anchor link
Ik ben bezig een taalmenu te programmeren. Het menu werkt alleen maar op desktops en niet op small devices
Het taalmenu is gebouwd met enkel CSS en HTML. Mijn vraag is waarom het niet werkt op bv een Samsung Galaxy. Dit is de CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.languagepicker {
    background-color: #FFF;
    display: inline-block;
    padding: 0;
    height: 40px;
    overflow: hidden;
    transition: all .3s ease;
    margin: 0 50px 10px 0;
    vertical-align: top;
    float: left;
}

.languagepicker:hover {
    /* don't forget the 1px border */
    height: 81px;
}

.languagepicker a{
    color: #000;
    text-decoration: none;
}

.languagepicker li {
    display: block;
    padding: 0px 20px;
    line-height: 40px;
    border-top: 1px solid #EEE;
}

.languagepicker li:hover{
    background-color: #EEE;
}

.languagepicker a:first-child li {
    border: none;
    background: #FFF !important;
}

.languagepicker li img {
    margin: 0 5px 0 0;
}

.roundborders {
    border-radius: 5px;
}

.large:hover {
    height: 164px;
}

Alvast bedankt voor de hulp

Toevoeging op 04/05/2018 17:54:49:

het taalmenu is vindbaar op het domein www.compuhulp.eu

Edit:
Ik heb code-tags geplaatst. Gelieve dit in het vervolg zelf toe te voegen aan je bericht.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken. Ook heb ik de topictitel aangepast van 'taalmenu' naar 'Taalmenu klapt niet goed uit op mobiele telefoon'.
Gewijzigd op 04/05/2018 21:52:58 door - Ariën -
 
PHP hulp

PHP hulp

22/06/2024 15:44:03
 
- Ariën  -
Beheerder

- Ariën -

04/05/2018 18:27:53
Quote Anchor link
Zou je de code tussen code-tags willen plaatsen? Dat leest een stuk makkelijker. Ook zou het fijn zijn als je een duidelijke titel aan het topic meegeeft die je probleem en of vraagstelling omschrijft.
 
Marthijn Buijs

Marthijn Buijs

04/05/2018 21:02:52
Quote Anchor link
Bij code-tags gebruiken we "[" en "]" i.p.v. "<" en ">".
Het zou fijn zijn als je in het vervolg je eerste bericht aanpast en niet een nieuw bericht plaats met opnieuw je code.

Verder zag ik op telefoon dat je contactgegevens het menu overlapt, hierdoor klapt het menu waarschijnlijk weer dicht als ik er met mijn muis overheen ga.
Gewijzigd op 04/05/2018 21:03:28 door Marthijn Buijs
 
Maarten Vries

Maarten Vries

04/05/2018 21:39:33
Quote Anchor link
Ik heb de contactgegevens uit de HTML gehaald en het probleem is er nog steeds. Dat wil zeggen het taalmenu functioneert niet op een mobiele telefoon.
 
Marthijn Buijs

Marthijn Buijs

04/05/2018 22:40:22
Quote Anchor link
Dan zou je nog moeten zorgen dat de pagina niet wordt vernieuwd wanneer ik op de button klik, maar het volgende gebeurd:
1. Kijken of het menu is geopend
2. Zo niet, het menu openen
3. Bij de volgende klik weer sluiten, enzovoort.
 
Maarten Vries

Maarten Vries

04/05/2018 22:46:00
Quote Anchor link
kun je wat duidelijker zijn. Kun je een codevoorbeeld geven?
 
Thomas van den Heuvel

Thomas van den Heuvel

05/05/2018 13:00:51
Quote Anchor link
Wat @Anoniem zegt: in de desktop versie klapt het menu automatisch uit als je over "Nederlands" hovert. Daarna kun je met een enkele muisklik een taal kiezen.

In de mobiele versie is dat niet het geval: het menu blijft ingeklapt. Als je dan op "Nederlands" klikt ververst de pagina meteen met deze taalkeuze. Je zou ook kunnen denken aan een aparte knop voor het uitklappen van dit menu (met de tekst "selecteer taal" of een ander icoon).
 
Maarten Vries

Maarten Vries

05/05/2018 13:15:42
Quote Anchor link
zou je een codevoorbeeld kunnen geven? hartelijk dank

Toevoeging op 05/05/2018 13:20:43:

Enig idee of werken met Media Query in dit geval zin zal hebben?
 
Thomas van den Heuvel

Thomas van den Heuvel

05/05/2018 14:14:59
Quote Anchor link
Als het uiterlijk verschilt bij verschillende resoluties heeft dat zin ja, maar als je echt de functionaliteit wilt veranderen waarbij je een soort van klik(- of tap)navigatie hebt biedt een kleine snippet JavaScript waarschijnlijk meer mogelijkheden.
 
Maarten Vries

Maarten Vries

05/05/2018 14:23:09
Quote Anchor link
Als ik Google krijg ik wel iets dat werkt met Click event icm een dropdown menu
https://www.w3schools.com/howto/howto_js_dropdown.asp
Gewijzigd op 05/05/2018 17:48:26 door Maarten Vries
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.