Pro-Sub-Blue

[Pro-Sub-Blue] Menu déroulant - Pro-Sub-Blue

[Pro-Sub-Blue] Menu déroulant

par Beaware » 26 févr. 2016 à 12:17

Bonjour,

Je cherche à faire un menu déroulant intégré au menu header du haut. J'ai essayé ce code :

CSS :

Code : Tout sélectionner

/* Menu-Top link Option
-------------------------*/
.menu-link {
    border-bottom: 4px solid rgba(234, 8, 8, 0.72);
    border-radius: 7px 7px 7px 7px;
    margin: 0;
    padding: 5px 10px;
    background-color: rgba(11, 20, 234, 0.75);
}

.menu-link ul {
   list-style-type: none;
}

.menu-link li {
    display: inline-block;
    padding: 0 15px;
}

.menu-link a {
  color: #cccaca;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.5s ease 0s;


.menu-link a:hover {
   color: #fff;
   text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
   border-bottom: 4px solid #fe8207;
   padding: 10px 0;
}
.menu-link ul:after {
   clear: both;
   content: "";
   display: block;
}

.menu-link .rightside {
   float: none;
}

.menu-link .rightside img {
   vertical-align: middle;
}

.menu-link ul li ul {
 display:none;
 }
.menu-link ul li:hover ul {
 display:block;
 }
.menu-link li:hover ul li {
 float:none;
 }
.menu-link li ul {
 position:absolute;
 }


HTML :

Code : Tout sélectionner

<!-- EVENT overall_header_body_before -->

<div id="wrap">
   <a id="top" class="anchor" accesskey="t"></a>
   <div id="page-header">
      <!-- Menu top -->
   <div class="menu-link">
    <ul>
         <li><a href="http://www.team-gtr3.fr">Accueil</a></li>
         <li><a href="http://www.team-gtr3.fr/index.php">Forum</a></li>
         <li><a href="#">Galerie</a></li>
       <li><a href="http://www.team-gtr3.fr/page/Hebdo">L'hebdo</a></li>
         <li><a href="http://www.team-gtr3.fr/page/TV">Live TV GTR3</a>
         <ul>
         <li><a href="#">Sous-item 1</a></li>
         <li><a href="#">Sous-item 2</a></li>
         <li><a href="#">Sous-item 3</a></li>
         </ul>
         </li>
       <li class="rightside"><a href="https://www.facebook.com/groups/698683070278400/" target="_blank"><img src="/images/facebook.png" title="La Team GTR3 sur Facebook" alt=""></a></li>
       <li class="rightside"><a href="https://www.youtube.com/channel/UCyj3zhN1HOti5OKkcElvcTA" target="_blank"><img src="/images/youtube.png" title="La Team GTR3 sur Youtube" alt=""></a></li>
       <li class="rightside"><a href="http://steamcommunity.com/groups/Team_GTR3#" target="_blank"><img src="/images/steam.png" title="La Team GTR3 sur Steam" alt=""></a></li>
       </ul>
     </div>
    <!-- End menu top -->


Je test actuellement en local, mais le résultat n'est pas là, ça manque d'espace et le sous menu déroulant ne s'affiche pas vers le bas.

Mon site (mais je n'ai pas fais les modifs dessus mais en local) : http://www.team-gtr3.fr/

Auriez vous des conseils à me donner ? , je suis un peu largué là .
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :

Re: [Pro-Sub-Blue] Menu déroulant

par cabot » 26 févr. 2016 à 18:18

Hello,

Ajoute une classe sur l'élément de liste qui contient le sous-menu :

Code : Tout sélectionner

<li class="sousmenu"><a href="http://www.team-gtr3.fr/page/TV">Live TV GTR3</a>

Remplace ton code CSS par celui-ci :

Code : Tout sélectionner

/* Menu-Top link Option
-------------------------*/
.menu-link {
   border-bottom: 4px solid rgba(234, 8, 8, 0.72);
   border-radius: 7px 7px 7px 7px;
   margin: 0;
   padding: 5px 10px;
   background-color: rgba(11, 20, 234, 0.75);
}

.menu-link ul {
   list-style-type: none;
}

.menu-link li {
   display: inline-block;
   padding: 0 15px;
}

.menu-link a {
   color: #cccaca;
   font-size: 1.2em;
   font-weight: bold;
   text-decoration: none;
   transition: all 0.5s ease 0s;


.menu-link a:hover {
   color: #fff;
   text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
   border-bottom: 4px solid #fe8207;
   padding: 10px 0;
}

/* Liens steam/youtube/facebook */
.menu-link .rightside {
   float: right;
}

.menu-link .rightside img {
   vertical-align: middle;
}

/* Sous-menu */
.sousmenu > a:after {
   content: '\25BC';
   font-size: 10px;
   padding-left: 2px;
}

.sousmenu:hover > a:after {
   font-size: 12px;
}

.sousmenu ul {
   background-color: #474CEE;
   display: none;
   position: absolute;
}

.sousmenu:hover ul {
   display: block;
}

.sousmenu ul li {
   display: block;
   padding: 12px;
}
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27150
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Re: [Pro-Sub-Blue] Menu déroulant

par Beaware » 26 févr. 2016 à 19:10

Génial :D Merci Cabot, j"ai une super base de départ là, j'ai commencé en local, et ça me plait bien tout ça.
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :

Re: [Pro-Sub-Blue] Menu déroulant

par Beaware » 26 févr. 2016 à 19:16

Maintenant il va falloir que j'essais de comprendre un peu, car j'ai pas fini de vous embêter. J'aimerai rajouter des sous/sous menu mais qui parte sur la droite ... :lol:
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :

Re: [Pro-Sub-Blue] Menu déroulant

par Steph » 28 févr. 2016 à 10:45

  • par Beaware » 26 Fév 2016 à 19:10
  • par Beaware » 26 Fév 2016 à 19:16


Salut ,

Le fait de poster deux messages à la suite, sans réponse d'un autre membre entre deux, dans un délai de moins de 24 heures est considéré comme une relance de sujet (UP) sur phpBB-fr.

De ce fait, si tu souhaites éviter que ton sujet soit verrouillé je te prie de respecter les règles qui interdisent les relances de sujet (UP) en moins de 24 heures.

Ton complément d'information était à ajouter à ton précédent message grâce au bouton "Modifier".

Voir le point 1.3.3 de nos conditions générales d'utilisation

@+ :wink:
Avatar du membre
Steph
Administrateur
Administrateur
Messages : 20433
Enregistré le : 29 déc. 2008 à 15:48
Localisation : Alsace / Bas-Rhin / France
Contact :