Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu déroulant déroule pas :(

Sujet résolu
zazzou
    19 juillet 2018 à 9:42:40

    Bonjour,

    tout est dans le titre, j'essaye de mettre en place mon menu déroulant, mais il ne veut pas dérouler...J'ignore quoi faire. Si vous avez des pistes...

    Voici le code HTML  :

    	<link rel="stylesheet" href="essai_menu.css" type="text/css" media="screen" />
<div class="main-header-container">
			<div class="container position-relative"> 
				<div class="menu-navigation-principale-container">
	<ul id="header-menu">
	<li><a href="#">Nationale 1</a><span> |</span>
		<ul class="submenu">
			<li><a href="#">Les joueuses</a></li> 
			<li><a href="#">Calendrier et résultats</a></li>
			<li><a href="#">Abonnement</a></li>
			<li><a href="#">Billetterie</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 2</a><span> |</span>
		<ul class="submenu">
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 3</a><span> |</span>
		<ul class="submenu">
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 4</a>
		<ul class="submenu">
			<li><a href="#">Lien sous menu 4</a></li>
			<li><a href="#">Lien sous menu 4</a></li>
			<li><a href="#">Lien sous menu 4</a></li>
			<li><a href="#">Lien sous menu 4</a></li>
		</ul>
	</li>
</ul>
				</div> 
			 </div><!--fin container position relative-->
		</div><!--fin main header container -->

    Et le code CSS :

    .menu-navigation-principale-container {
    clear: both;
    font-size: 24px;
    height: auto;
    line-height: 28px;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    transition: max-height .2s ease-in-out, padding-top .2s ease-in-out;
    font-family: "Roboto";
}

.menu-navigation-principale-container {
    font-size: inherit;
    line-height: inherit;
}

.menu-navigation-principale-container {
    clear: none;
    font-size: inherit;
    line-height: inherit;
    max-height: none;
    padding-top: 57px;
}

.main-menu {
    list-style-type: none;
    font-size: 1em;
    overflow: hidden;
    padding-left: 0;
    text-align: center;
}

.ls {
    letter-spacing: .04em;
}
.ucase {
    text-transform: uppercase;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
    color:white;
}

.main-menu .menu-item:first-child {
    margin-left: 20px;
}
.main-menu .menu-item {
    float: left;
    margin-left: 20px;
}
.main-menu .menu-item a {
    text-decoration: none;
    color: #161616;
    padding: 3px 3px 0;
}

.single-post .main-menu .menu-item a, .page-template-template-blog .main-menu .menu-item a, .category .main-menu .menu-item a, .search .main-menu .menu-item a, .single-post .main-menu .menu-item::after, .page-template-template-blog .main-menu .menu-item::after, .category .main-menu .menu-item::after, .search .main-menu .menu-item::after {
    color: #fff;
}
.main-menu .menu-item::after {
    content: '|';
    margin-left: 20px;
}
::before, ::after {
    box-sizing: border-box;
}

.main-menu .menu-item:last-child::after {
    content: '';
}

.main-menu .menu-item :hover {
	color: #ff0078;
}


.main-header-container {
	background-color: #161616;
	z-index: 9999;
	margin-top: 12px;
	width: 100%;
	tranform: translate(0, 0);
	transition: transform .4s ease;
	height: 120px;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

   }

.position-relative {
    position: relative;
}

.container {
    width: 1170px;
}
#header-menu, #header-menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#header-menu > li{
display:inline-block;
position:relative;
}

#header-menu > li span {
	margin: 0px 20px;
}
#header-menu ul li{
display:inherit;
}
#header-menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .3s all .3s;
-webkit-transition: .3s all .3s;
transition: .3s all .3s;
}
#header-menu li:hover ul{
max-height:15em;
}

/* background des liens sous-menus */
#header-menu li li {
background-color: red;
}/*

/* background des liens menus et sous menus au survol */
#header-menu li a:hover, #header-menu li li:hover{
color:#ff0078;
}

#header-menu a{
	text-decoration:none;
	color:white;
}
#header-menu li:hover li a{
	color:red;
	text-transform:inherit;
}

    Et sinon c'est aussi là : https://codepen.io/zazzou/pen/JBRmqe

    merci pour votre aide...


    • Partager sur Facebook
    • Partager sur Twitter
    Jean-patrick_Lamoureux
      19 juillet 2018 à 10:52:34

      Hola je sais pas si ça peut t aider car je débute tout juste mais moi quand j ai voulu mette un menu je voulais le mettre dans un <nav></nav> 

      rien ne fonctionner je l ai mi dans un

      <ul id=menu>

      <li><a href="page1.html">Page1 : </a></li>

      <li><a href="page2html">Page2 : </a></li>

      <li><a href="mailto:BieberCestTropBienNevousinkieterpas.cestungrostroll@vivedeeppurpule.com">Me Contacter : </a></li>

      </ul>

      puis en css comme suit 

      #menu

      {

        position: fixed;

        right: _em;

        top: _%;

        width: _em;

        background-color: hsla(ta couleur);

        color: #tacouleur;

        margin: _em 0 0 0;

        padding: _em _em _em _em;

        -webkit-border-radius:_px;

        -moz-border-radius:_px;

        border-style: groove;

        border-color: #tacouleur;

        border-width: _px 

      après moi mon menu et sur droite peut être que si tu modifie mon right par top et que tu mets les bon réglages sa marchera 

      mais en tout cas tout sa ne fonctionner pas quand je l ai mi dans des <nav></nav> peut être que ton problème vient du <header></header>

      j espère que ça t aidera

      • Partager sur Facebook
      • Partager sur Twitter
      Frogweb
      • HTML / CSS
        19 juillet 2018 à 11:23:04

        Tu as mis un overflow:hidden sur .menu-navigation-principale-container, c'est normal que tu ne vois rien.

        Tu as une erreur ligne 84 : tranform au lieu de transform

        Tu dois pouvoir faire beaucoup plus simple que ça pour ce menu.
        Par exemple le span dans les <a> peut tout à fait être remplacé par une bordure sur les <a> ou <li> ou bien encore un before ou after.

        -
        Edité par Frogweb 19 juillet 2018 à 11:30:07

        • Partager sur Facebook
        • Partager sur Twitter
        Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
        PlatiniKuetche
          19 juillet 2018 à 11:53:13 - Message modéré pour le motif suivant : Message complètement hors sujet


          exen
            19 juillet 2018 à 13:44:49 - Message modéré pour le motif suivant : réponse au H.S. du dessus


            Compos sui.

            pipelette13
            • HTML / CSS
              19 juillet 2018 à 14:19:01 - Message modéré pour le motif suivant : réponse au H.S. du dessus


              Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean
              zazzou
                20 juillet 2018 à 8:54:41

                Frogweb a écrit:

                Tu dois pouvoir faire beaucoup plus simple que ça pour ce menu.

                Par exemple le span dans les <a> peut tout à fait être remplacé par une bordure sur les <a> ou <li> ou bien encore un before ou after.

                -
                Edité par Frogweb il y a environ 21 heures

                Merci ! Effectivement le hidden je l'avais un peu zappé.

                J'ai ça ligne 61:

                .main-menu .menu-item::after {
    content: '|';
    margin-left: 20px;
}

                Mais quand j'enlève les SPAN ca ne fonctionne pas... En fait au début, je n'avais que le menu-item::after qui fonctionnait très bien mais quand j'ai voulu faire mon sous menu des fois le | passait à la ligne ou des trucs comme ca du coup c'est pour ca que j'avais mis <span> qui marchait mieux. Mais du coup je suis partante pour les virer !

                Et comment je peux faire pour faire dérouler mais au clic plutôt qu'au survol ?

                Merci beaucoup


                • Partager sur Facebook
                • Partager sur Twitter
                Majoras16Forever
                • HTML / CSS
                  20 juillet 2018 à 9:28:02

                  Pour faire des options c'est 

                  <select>
<option id="idA">Option A</option><option id="idB">Option B</option>
</select>
                  même si ta méthode marche.

                  -
                  Edité par Majoras16Forever 20 juillet 2018 à 9:29:02

                  • Partager sur Facebook
                  • Partager sur Twitter
                  zazzou
                    20 juillet 2018 à 9:48:52

                    Euh, je vois pas trop... Ce qui me préoccupe  pour l'instant c'est le fait que mes barres qui séparent mes items se barrent en vrac. Et que je n'arrive pas à styler mon sous menu sans que mon menu principale ne bouge..

                    Je remets le lien ici où on voit que ca part en cacahuète : https://codepen.io/zazzou/pen/JBRmqe

                    Et je remets le code :

                    <div class="full-wrapper">
	<div class="full-content">
		<!--header-->
		<div>
			<div id="gd_header">
				<div id="gauche_header">
					<i class="fas fa-map-marker-alt"></i> &nbsp;&nbsp;&nbsp;<i class="fas fa-envelope"></i> qsdmfjqsdf
				</div>
				<div id="droite_header">
					<a href="" class="fab fa-facebook"></a><a href="" class="fab fa-twitter"></a><a href="" class="fab fa-youtube"></a><a href="" class="fab fa-instagram"></a>
				</div>
			</div>
		</div>
		<!-- logo et navigation -->
		<div class="main-header-container">
			<div class="container position-relative"> 
				<a href="" title="Retourner à l'accueil du site" class="logo ucase pull-left">
					<img src="logo.png" />
				</a> 
				<nav>
				<div class="menu-navigation-principale-container">
					<ul id="header-menu" class="main-menu ucase ls"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-5"><a href="">Sousmenu 1</a></li>
</ul>
</li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#">Menu 2</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Menu 5</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">Menu 6</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#">Menu 7</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Menu 8</a></li>
</ul>				</div> 
			</nav>
			 </div><!--fin container position relative-->
		</div><!--fin main header container -->
	</div><!--fin full-content -->
</div><!--fin full-wrapper -->

                    CSS :

                    .full-wrapper {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    background:#161616;
}

.full-content {
    padding-top: 18px;
}


#gd_header {
	width: 100%;
	background-color: #ff0078;
	height: 30px;
	line-height: 27px;
	color: white;
	font-family: "Montserrat";
	font-size: 0.9em;
	position: fixed;
	top: 0;
	z-index: 9999;
}

#gauche_header {
	width:70%;
	float: left;
    padding-left: 4%;
}

#droite_header {
	width:22%;
	display: inline-block;
	text-align: right;
    padding-right: 4%;
}


.main-header-container {
	background-color: #161616;
	z-index: 9999;
	margin-top: 12px;
	width: 100%;
	transform: translate(0, 0);
	transition: transform .4s ease;
	height: 120px;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

   }

.position-relative {
    position: relative;
}

.container {
    width: 1170px;
}


.pull-left {
    float: left !important;
}

.logo{
	width: 15%;
}

.logo img {
	width: 100%;
	margin-top: 2%;
}

/*-----------------------------menu----------------------------------------*/

.menu-navigation-principale-container {
    clear: both;
    font-size: 24px;
    height: auto;
    line-height: 28px;
    max-height: 0;
    padding-top: 0;
    transition: max-height .2s ease-in-out, padding-top .2s ease-in-out;
    font-family: "Roboto";
}

.menu-navigation-principale-container {
    font-size: inherit;
    line-height: inherit;
}

.menu-navigation-principale-container {
    clear: none;
    font-size: inherit;
    line-height: inherit;
    max-height: none;
    padding-top: 57px;
}

.main-menu {
    list-style-type: none;
    font-size: 1em;
    overflow: hidden;
    padding-left: 0;
    text-align: center;
}

.ls {
    letter-spacing: .04em;
}
.ucase {
    text-transform: uppercase;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
    color:white;
  list-style:none;
}

.main-menu .menu-item:first-child {
    margin-left: 20px;
}
.main-menu .menu-item {
    float: left;
    margin-left: 20px;
}
.main-menu .menu-item > a {
    text-decoration: none;
    color: #161616;
    padding: 3px 3px 0;
    color: white;
}

.single-post .main-menu .menu-item a, .page-template-template-blog .main-menu .menu-item a, .category .main-menu .menu-item a, .search .main-menu .menu-item a, .single-post .main-menu .menu-item::after, .page-template-template-blog .main-menu .menu-item::after, .category .main-menu .menu-item::after, .search .main-menu .menu-item::after {
    color: #fff;
}
.main-menu .menu-item::after {
    content: '|';
    margin-left: 20px;
}
::before, ::after {
    box-sizing: border-box;
}

.main-menu .menu-item:last-child::after {
    content: '';
}

.main-menu .menu-item :hover {
	color: #ff0078;
}


#header-menu, #header-menu > ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
}

#header-menu > li{
    display:inline-block;
    position:relative;
}

#header-menu > li span {
    margin: 0px 20px;
}

#header-menu > ul li{
    display:inherit;
}

#header-menu ul.sub-menu{
   /* position:absolute;*/
    z-index: 1000;
    max-height:0;
    left: 0;
    right: 0;
    overflow:hidden;
    -moz-transition: .3s all .3s;
    -webkit-transition: .3s all .3s;
    transition: .3s all .3s;
}
#header-menu li:hover ul{
    max-height:15em;
}


/* background des liens menus et sous menus au survol */
#header-menu li a:hover, #header-menu li li:hover{
    color:#ff0078;
}

#header-menu a{
    text-decoration:none;
    color:white;
}
#header-menu li:hover li a{
    color:red;
    text-transform:inherit;
}

                    Merci beaucoup pour votre aide


                    -
                    Edité par zazzou 20 juillet 2018 à 10:03:55

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Frogweb
                    • HTML / CSS
                      20 juillet 2018 à 10:57:41

                      Salut,

                      tu veux les liens de sous menu alignés comme les lien du menu ? Ou les uns en-dessous des autres ?

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                      zazzou
                        20 juillet 2018 à 12:05:39

                        Les uns en dessous des autres et je veux pouvoir mettre de la marge entre chaque aussi. Mais à chaque fois que je touche qqchose cela fait bouger mon menu principal

                        -
                        Edité par zazzou 20 juillet 2018 à 12:05:47

                        • Partager sur Facebook
                        • Partager sur Twitter
                        Frogweb
                        • HTML / CSS
                          20 juillet 2018 à 12:09:54

                          Tu veux que je te fasse un code vite fait d'un menu pour tout remettre à plat ?

                          Tu peux aussi cliquer sur le lien de ma signature...

                          -
                          Edité par Frogweb 20 juillet 2018 à 12:11:31

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                          zazzou
                            20 juillet 2018 à 12:21:21

                            Oui, je me suis basée sur ton lien en fait pour commencer...

                            Mais je suis en train de remettre tout à plat sur un autre codepen et ca semble fonctionner, du coup je ne sais pas trop ce qu'il s'est passé exactement mais bon : https://codepen.io/zazzou/pen/Owbaob

                            • Partager sur Facebook
                            • Partager sur Twitter
                            Frogweb
                            • HTML / CSS
                              20 juillet 2018 à 12:22:41

                              Ah bah oui, impec ! ^^
                              • Partager sur Facebook
                              • Partager sur Twitter
                              Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                              zazzou
                                20 juillet 2018 à 12:24:52

                                Yes, me manque plus que mes p** de séparateurs ...

                                -
                                Edité par zazzou 20 juillet 2018 à 13:39:58

                                • Partager sur Facebook
                                • Partager sur Twitter
                                Frogweb
                                • HTML / CSS
                                  20 juillet 2018 à 13:53:47

                                  Une petite bordure aux <a> si ils sont en display:block.

                                  https://jsfiddle.net/zea9dsqc/

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
                                  zazzou

                                  Menu déroulant déroule pas :(

                                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                  • Editeur ●
                                  • Markdown