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:

.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

[size=xsmall]Toevoeging op 04/05/2018 17:54:49:[/size]

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

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.
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.
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.
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.
kun je wat duidelijker zijn. Kun je een codevoorbeeld geven?
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).
zou je een codevoorbeeld kunnen geven? hartelijk dank

[size=xsmall]Toevoeging op 05/05/2018 13:20:43:[/size]

Enig idee of werken met Media Query in dit geval zin zal hebben?
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.

Reageren