Pro-Sub-Blue

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

[Pro-Sub-Blue] Menu déroulant

Nouveau messagepar Beaware » 26 Fév 2016 à 13: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à .
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée

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

Nouveau messagepar cabot » 26 Fév 2016 à 19: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; }
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26802
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

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

Nouveau messagepar Beaware » 26 Fév 2016 à 20: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.
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée

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

Nouveau messagepar Beaware » 26 Fév 2016 à 20: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:
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée

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

Nouveau messagepar Steph » 28 Fév 2016 à 11:45

Hide
  • 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 de l’utilisateur
Steph
Administrateur
Administrateur
 
Messages: 18404
Enregistré le: 29 Déc 2008 à 16:48
Localisation: Alsace / Bas-Rhin / France


Connexion  •  M’enregistrer

cron