IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu déroulant au click pour le web mobile


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Juillet 2012
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Industrie

    Informations forums :
    Inscription : Juillet 2012
    Messages : 31
    Par défaut Menu déroulant au click pour le web mobile
    Bonjour,

    j'ai fais un site pour mon club et sur la page index j'ai mis un lien vers une version du site pour web mobile (pour smartphone et tablette). J'ai fais un code css en remplacant le hoover du menu par click mais le résultat n'est pas celui que je veux. Je voudrais cliquer sur un lien qui m'ouvre un menu déroulant mais qui reste à l'affichage .
    Pour info le site web est à l'adresse suivante : http://aikidochauray.chez.com/

    mon code html pour l'index version mobile est :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <body>
    	<header>
    	<nav class="menu">
    		<ul id="menu-deroulant">
    		<li><a id="lien" href="indexT.htm">Menu</a>
    			<ul>
    			<li><a id="lien" href="indexT.htm">Accueil</a></li>
    			<li><a id="lien" href="page1T.htm"> Le mot du Président</a></li>
    			<li><a id="lien" href="page2T.htm"> L’aïkido</a></li>
    			<li><a id="lien" href="page3T.htm"> Le club</a></li>
    			<li><a id="lien" href="page4T.htm"> Notre fonctionnement</a></li>
    			<li><a id="lien" href="page5T.htm"> Galerie photos</a></li>
    			<li><a id="lien" href="page6T.htm"> Liens</a></li>
    			<li><a id="lien" href="mailto:aikido.chauray@gmail.com?subject=Information%20Aïkido" target=principal class="vertical">Contact</a></li>
    			<li><a id="lien" href="page7T.htm"> Calendrier</a></li>
    			<li><a id="lien" href="page8T.htm"> Documents</a></li>
    			<li><a id="lien" href="tarifT.htm"> Tarifs</a></li>
    			</ul>
    		</li>
    		</ul>
    	</nav>
     
    	</header>
    Et le code css qui gère le menu est :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    #menu {/*Fixe le menu de gauche*/ 
    	padding: 0px;
    	margin-top: 100px;
    	position:fixed;
    	overflow: hidden ;
    }
     
    #lien {/*Format des liens*/ 
    	text-decoration:none;
    	line-height:200%;
    	font-family: Comic Sans MS,Candara,Verdana;
    	font-size: 13.0pt;
    	color: #FFFFFF;
    	text-shadow: 0px 1px 0px black;
    	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
    	padding-top: 4px; 
    	padding-bottom: 4px; 
    	padding-right:10px;
    	padding-left: 10px; 
    	text-align:center;
    	background:#555; 
    	background: linear-gradient( #777, #2C2C2C);
    	border-radius: 8px;
    	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
    }
     
    #menu-deroulant ul {
        padding: 0;
        margin: 0;
        list-style: none;
    	position: absolute;
    /* on cache les sous menus complètement sur la gauche */
        left: -999em;
        text-align: left;
        z-index: 1000;
    	width: 100px; /* seule ligne rajoutée */
    }
    #menu-deroulant :click{ left: auto;float:none /*color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);*/ }
    /*#menu-deroulant :active{ color: #000; background: #777; background: linear-gradient( #777, #2C2C2C); box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}*/
     
    ul{list-style-type:none}/*Format des listes*/ 
     
     
    #menu-deroulant {
    /* on centre le menu dans la page */
        text-align: center;
    }
    #menu-deroulant li {
    /* on place les liens du menu horizontalement */
        float:left;
    	border-left:1px solid black;
    	display: inline-block;
    }
     #menu-deroulant ul li {
     /*on enlève ce comportement pour les liens du sous menu*/ 
        display: inherit;
    	float:left;
    	position: relative
    }
    #menu-deroulant a {
    	text-decoration:none;
    	display: block;
    	float:left; 
    	width:100px;
    	line-height:180%;
    	font-family: Comic Sans MS,Candara,Verdana;
    	font-size: 13.0pt;
    	color: #FFFFFF;
    	text-shadow: 0px 1px 0px black;
    	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
    	padding-top: 4px; 
    	padding-bottom: 4px; 
    	padding-right:10px;
    	padding-left: 10px; 
    	text-align:center;
    	background:#555; 
    	background: linear-gradient( #777, #2C2C2C);
    	border-radius: 8px;
    	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
    }
     
     
    #menu-deroulant li:active ul {
    /* Au survol des li du menu on replace les sous menus */
        left: auto;
    	color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);
    }
    Comme vous pouvez voir je débute et tripatouille ...

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1/ LIS les cours CSS.


    2/ id="lien" :
    non. Un id doit être unique.
    Il faut utiliser ici class

    3/ quant à ta question, c'est du domaine de JavaScript.

    "afficher/masquer div au clic"


    4/ pour améliorer le référencement des pages, donne-leur des noms plus explicites que page1.htm, page2.htm, page3.htm,,....
    Dernière modification par Invité ; 23/06/2017 à 08h10.

  3. #3
    Membre averti
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Juillet 2012
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Industrie

    Informations forums :
    Inscription : Juillet 2012
    Messages : 31
    Par défaut
    Je te remercie, jreaux, je regarde ça ce midi. Pour info j'ai pas mal cherché sur internet sans trouvé de réponse satisfaisante, c'est pour ça que j'ai posté ce message.

  4. #4
    Membre averti
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    Juillet 2012
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Industrie

    Informations forums :
    Inscription : Juillet 2012
    Messages : 31
    Par défaut Menu déroulant qui se fixe après le click
    Bonjour,

    Je suis toujours bloqué sur la même situation. J'ai beaucoup cherché sur internet mais peu compris, les solutions proposées me paraissent très compliqué pour une si petite chose...
    J'ai changer, pour faire apparaitre un menu en liste déroulante après un click sur un bouton (pour les smartphones) j'ai écris le code ci-après, le menu se déroule mais ne reste pas déroulé... Résultat avec un doigt c'est dur de naviguer

    Html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <nav class="menu">
    		<ul id="menu-deroulant">
    		<li><button id="lien">Menu</button>
    			<ul>
    			<li><a id="lien" href="indexT.htm">Accueil</a></li>
    			<li><a id="lien" href="page1T.htm"> Le mot du Président</a></li>
    			<li><a id="lien" href="page2T.htm"> L’aïkido</a></li>
    			<li><a id="lien" href="page3T.htm"> Le club</a></li>
    			<li><a id="lien" href="page4T.htm"> Notre fonctionnement</a></li>
    			<li><a id="lien" href="page5T.htm"> Galerie photos</a></li>
    			<li><a id="lien" href="page6T.htm"> Liens</a></li>
    			<li><a id="lien" href="mailto:aikido.chauray@gmail.com?subject=Information%20Aïkido" target=principal class="vertical">Contact</a></li>
    			<li><a id="lien" href="page7T.htm"> Calendrier</a></li>
    			<li><a id="lien" href="page8T.htm"> Documents</a></li>
    			<li><a id="lien" href="tarifT.htm"> Tarifs</a></li>
    			</ul>
    		</li>
    		</ul>
    	</nav>

    J'ai laissé id car avec class je perdais le menu caché

    CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
     
    #menu {/*Fixe le menu de gauche*/ 
    	padding: 0px;
    	margin-top: 100px;
    	position:fixed;
    	overflow: hidden ;
    }
     
    ul{list-style-type:none}/*Format des listes*/ 
     
    #menu-deroulant ul {
        padding: 0;
        margin: 0;
        list-style: none;
    	position: absolute;
    /* on cache les sous menus complètement sur la gauche */
     
        left: -999em;
        text-align: left;
        z-index: 1000;
    	width: 100px; /* seule ligne rajoutée */
    }
    #menu-deroulant :click{ left: auto;/*color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);*/ }
    /*#menu-deroulant :active{ color: #000; background: #777; background: linear-gradient( #777, #2C2C2C); box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}*/
     
     
    #menu-deroulant {
    /* on centre le menu dans la page */
        text-align: center;
    }
    #menu-deroulant li {
    /* on place les liens du menu horizontalement */
        float:left;
    	border-left:1px solid black;
    	display: inline-block;
    }
     #menu-deroulant ul li {
     /*on enlève ce comportement pour les liens du sous menu*/ 
        display: inherit;
    	float:left;
    	position: relative
    }
    #menu-deroulant a {
    	text-decoration:none;
    	display: block;
    	float:left; 
    	width:200px;
    	line-height:180%;
    	font-family: Comic Sans MS,Candara,Verdana;
    	font-size: 13.0pt;
    	color: #FFFFFF;
    	text-shadow: 0px 1px 0px black;
    	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
    	padding-top: 4px; 
    	padding-bottom: 4px; 
    	padding-right:10px;
    	padding-left: 10px; 
    	text-align:center;
    	background:#555; 
    	background: linear-gradient( #777, #2C2C2C);
    	border-radius: 8px;
    	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
    }
     
    #menu-deroulant li:active ul {
    /* Au survol des li du menu on replace les sous menus */
        left: auto;
    	color: #A9A9A9; background: #666; background: linear-gradient( #999, #333);
    }
     
    #lien {/*Format des liens*/ 
    	text-decoration:none;
    	line-height:200%;
    	font-family: Comic Sans MS,Candara,Verdana;
    	font-size: 13.0pt;
    	color: #FFFFFF;
    	text-shadow: 0px 1px 0px black;
    	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
    	padding-top: 4px; 
    	padding-bottom: 4px; 
    	padding-right:10px;
    	padding-left: 10px; 
    	text-align:center;
    	background:#555; 
    	background: linear-gradient( #777, #2C2C2C);
    	border-radius: 8px;
    	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
    }
    J'avoue ma nullité...

  5. #5
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par dadidodu85 Voir le message
    J'ai laissé id car avec class je perdais le menu caché
    Si tu ne suis pas les règles - et les recommandations -, on ne peut rien pour toi.

  6. #6
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 501
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 501
    Par défaut
    Citation Envoyé par dadidodu85 Voir le message
    J'ai laissé id car avec class je perdais le menu caché
    comme l'a precise jreaux62, il faut suivre les regles/recommandations.

    pour preciser sa reponse : tu dois changer le id="lien" en class="lien"
    => c'est normal que tu perdes ton menu car le CSS s'applique a l'id "lien" (qui sera maintenant une class)
    ==> il faut en parallele changer ton CSS : remplace les elements lies a #lien{...} par .lien{...}
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  7. #7
    Invité
    Invité(e)
    Par défaut
    @Doksuri
    Je l'avais déjà indiqué dans mon 1er message, de même que l'utilisation de JavaScript pour une "action au clic".

    "JavaScript afficher/masquer div au clic"

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Un service innovant pour le Web Mobile
    Par Chloé04 dans le forum Webdesign & Ergonomie
    Réponses: 3
    Dernier message: 11/04/2010, 03h47
  2. Réponses: 0
    Dernier message: 06/03/2010, 17h42
  3. Menu déroulant et lien web
    Par Ella68 dans le forum Flash
    Réponses: 0
    Dernier message: 12/02/2008, 14h46
  4. Menu déroulant pour débutant
    Par gign2585 dans le forum Windows Forms
    Réponses: 2
    Dernier message: 14/05/2007, 18h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo