Masquer une fonction sur mobile

Masquer une fonction sur mobile [Réglé]

Créations de Modules

MickaelFR Membre non connecté

Booster Fusée

Le 06/05/2016 à 11h58

#151179

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Bonjour.

J'ai créé sur mon site un menu d'accès rapide. Une simple liste déroulante basique, mais utile.

Code HTML :

<span class="ump-accesrapide"><FORM NAME="Choix">
                    <SELECT NAME="Liste" onChange="Lien()">
                      <OPTION VALUE="">Accès rapide
                      <OPTION VALUE="">
                      <OPTION VALUE="{PATH_TO_ROOT}">Accueil
                      <OPTION VALUE="{PATH_TO_ROOT}/forum">Forum
                      <OPTION VALUE="{PATH_TO_ROOT}/shoutbox">Discussion rapide
                      <OPTION VALUE="{PATH_TO_ROOT}/poll">Sondages
                      <OPTION VALUE="{PATH_TO_ROOT}/calendar">Evènements
                      <OPTION VALUE="{PATH_TO_ROOT}/media">Multimédia
                      <OPTION VALUE="{PATH_TO_ROOT}/gallery">Photos
                      <OPTION VALUE="{PATH_TO_ROOT}/contact">Contact
                      <OPTION VALUE="{PATH_TO_ROOT}/sitemap">Plan du site
                    </SELECT>
                    </FORM></span>

Code PHP :

function Lien() {
    i = document.Choix.Liste.selectedIndex;
    if (i == 0) return;
    url = document.Choix.Liste.options[i].value;
    parent.location.href = url;
}

Cependant, j'aimerai cacher cette fonction sur mobile, car ça me détruit un peu le menu responsive. (trop de place).

Je ne sais pas comment cacher selon la taille de l'écran.

Merci beaucoup

planet-truck.fr - mickaelfr.eu

Myster Membre non connecté

Booster Missile

Le 06/05/2016 à 12h06

#151180

Booster Missile
Voir le profil du membre Myster
Inscrit le : 04/10/2010
Groupes :

Bonjour,

Je pense que un truc du genre :

Code CSS :

 
@media only screen (max-device-width: 720px) {span#ump-accesrapide{visibility:hidden;}

En gros ça cache ump-accessrapide pour les inférieurs à 720px, à toi de modifier la valeur

(Pas très sûr du code mais je pense que ça devrait le faire)

Édité par Myster Le 06/05/2016 à 12h07

MickaelFR Membre non connecté

Booster Fusée

Le 06/05/2016 à 12h22

#151181

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

Je vais voir ça, merci beaucoup

Edit : Non sur Iphone, c'est toujours présent (en plus grand en plus

)

Édité par MickaelFR Le 06/05/2016 à 12h23

planet-truck.fr - mickaelfr.eu

Myster Membre non connecté

Booster Missile

Le 06/05/2016 à 12h35

#151184

Booster Missile
Voir le profil du membre Myster
Inscrit le : 04/10/2010
Groupes :

Code :

@media (max-width:480px) {
   .ump-accesrapide {
       display:none;
   }

Et avec ça ?

Si le display fonctionne pas essaye avec visibility:hidden

Edit: n'oublie pas de remplacer 480px par ce que tu veux

Édité par Myster Le 06/05/2016 à 12h35

MickaelFR Membre non connecté

Booster Fusée

Le 06/05/2016 à 13h01

#151185

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

C'est fonctionnel

.. Je t'en remercie Myster

planet-truck.fr - mickaelfr.eu

Myster Membre non connecté

Booster Missile

Le 06/05/2016 à 13h06

#151186

Booster Missile
Voir le profil du membre Myster
Inscrit le : 04/10/2010
Groupes :

Mais de rien c'est avec plaisir

MickaelFR Membre non connecté

Booster Fusée

Le 06/05/2016 à 13h07

#151187

Booster Fusée
Voir le profil du membre MickaelFR
Inscrit le : 20/01/2014
Site internet
Groupes :

planet-truck.fr - mickaelfr.eu

Créations de Modules

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie