-
Menu déroulant
Pour suive ce tutoriel, vous avez besoin d'un minimum de connaissance en HTML et en CSS, nous n'utiliserons pas de JS.
HTML
On va créer notre menu sous la forme de listes imbriquées. La première liste contiendra les titres visibles, et les sous-listes seront les onglets visibles au survol.
1- Créez une div avec un id pour pouvoir plus facilement travailler dessus en CSS<div id="menu_deroulant">
</div>2- Créez votre première liste (les titres visibles)
<div id="menu_deroulant">
<ul>
<li>
Titre 1
</li>
<li>
Titre 2
</li>
<li>
Titre 3
</li>
</ul>
</div>3- Enfin, créez vos sous listes qui apparaitrons au survol
<div id="menu_deroulant">
<ul>
<li>Titre 1
<ul>
<li> Onglet 1 </li>
<li> Onglet 2 </li>
<li> Onglet 3 </li>
</ul>
</li>
<li>Titre 2
<ul>
<li> Onglet 1 </li>
<li> Onglet 2 </li>
<li> Onglet 3 </li>
</ul>
</li>
<li>Titre 3</li>
</ul>
</div>4- N'oubliez pas d'ajouter vos liens
<div id="menu_deroulant">
<ul>
<li>Titre 1
<ul>
<li> <a href="#">Onglet 1</a> </li>
<li> <a href="#">Onglet 2</a> </li>
<li> <a href="#">Onglet 3</a> </li>
</ul>
</li>
<li>Titre 2
<ul>
<li> <a href="#">Onglet 1</a> </li>
<li> <a href="#">Onglet 2</a> </li>
<li> <a href="#">Onglet 3</a> </li>
</ul>
</li>
<li><a href="#">Titre 3</a></li>
</ul>
</div>CSS
Ne modifiez pas le code suivant, il permettra à votre menu de fonctionner correctement.#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }Passons maintenant à la personnalisation :
La "barre" contenant vos titres visibles.#menu_deroulant{
height: Xpx; /*définissez sa hauteur*/
propriété : valeur; /*personnalisez*/
}Le code suivant correspond à vos titres visibles.
#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
propriété : valeur; /*personnalisez*/
}Code pour les onglets visibles au survol.
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display:block;
propriété : valeur; /*personnaliser*/
}Placement dans l'en-tête
Mettez votre HTML dans un module simple. Puis modifier votre id dans le css de la manière suivante :#menu_deroulant{
height: Xpx; /*définissez sa hauteur*/
propriété : valeur; /*personnalisez*/
position: absolute;
top: Xpx ; /*position par rapport au haut de la page*/
left: Xpx; /*position par rapport au bord gauche de la page*/
}"position: absolute" rend votre menu indépendant par rapport aux autres éléments de la page. Déplacez le ensuite en changeant les valeurs de "top" et "left"
Pour plus d'information, je vous renvoie à l'article suivant :
=> http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132
-
Commentaires
Merci infiniment pour ce code que je cherchais depuis longtemps :) Grâce à toi j'ai enfin un menu déroulant comme j'en rêvais :)
Coucou, voila moi sa marche qu'à moitié, les onglets visible ne ce mettent pas à la verticale comme il ce doit, ils sont encore comme si on les mettait dans une feuille simple. Comment faire?
"comme si on les mettait dans une feuille simple". C'est à dire ? ^^'
Ce qui permet aux titres d'être placés horizontalement et les onglet verticalement, c'est ce petit bout de code :
#menu_deroulant li {
float : left; }#menu_deroulant li:hover ul li {
float : none; }La première partie "casse" la structure verticale d'une liste pour placer les différents points (les titres) à la suite.
La deuxième partie supprime cet effet pour les sous liste au survole. Ils reprennent donc leur apparence de liste, à savoir verticalement.
Vérifie que tu n'as pas supprimé ou modifié ce code.
non, justement je ne l'ai ai pas modifier, j'ai tous fait comme tu as fait toi mais sa ne marche pas. Je t'envoie mon code Css pour que tu vois ce qui ne va pas.
Code Html
#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_navigation li ul {
position:absolute;
z-index: 10; }
#menu_navigation{
height: 20px;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}
#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display: block;
;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
Mea Culpa, j'ai changé le nom de l'id dans mon tuto... Voici ton code corrigé (et l'article aussi au passage) :
HTML
<div id="menu_deroulant">
<ul><li>Titre 1
<ul><li><a href="#">Onglet 1</a></li>
<li><a href="#">Onglet 2</a></li>
<li><a href="#">Onglet 3</a></li></ul>
</li>
<li>Titre 2
<ul><li><a href="#">Onglet 1</a></li>
<li><a href="#">Onglet 2</a></li>
<li><a href="#">Onglet 3</a></li></ul>
</li>
<li><a href="#">Titre 3</a></li>
</ul>
</div>CSS
#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }
#menu_deroulant{
height: 20px;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}
#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display: block;
;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
Je te remercie, sa marche super bien, par contre je voudrais que mon déroulant soit aligné a son titre, et je n'arrive pas a le mettre. Je te parle de la marge de gauche. J'ai beau le mettre a 0xp sa ne fait rien, es ce que c'est possible de faire - ou pas?
Je n'ai pas très bien compris ce que tu veux faire... Essaie avec une marge négative (-5px etc...)
En faite, je voudrais que mon déroulant soit juste mit correctement en dessous de son titre sans dépassé et bien alligné, mais le probleme c'est un peu trop collé au titre et un peu trop sur la droite. Je ne c'est pas si tu as bien compris ce que je veut dire sinon passe directement sur mon blog tu verras par toi même
Par contre, j'ai encore un petit problème, quand je fait le code pour la bordure, dans le déroulant sa me met en double alors que je demande juste le contour. Je fait dotted et sa me met en double a l'extérieur et a l'intérieur.
Hm, essaie avec ce code :
#menu_deroulant ul li { width: 50px; /*LARGEUR DES TITRES ET ONGLETS*/
display: block;
background-color: #8e1717;
margin: 3px 10px 5px 3px;
padding: 5px 23px 5px 23px;
text-align: center;
border: 1px DOTTED #d46464;
font-size: 10px;
}
#menu_deroulant ul li a{
propriété : valeur; /*LIENS*/
}
#menu_deroulant ul li ul li a {
propriété : valeur; /*ONGLETS*/
}Tu définies une seule fois l'apparence de tes onglets et titre, ce qui évite que les propriété soient appliquées deux fois (une fois parce que c'est un onglet, et une deuxième fois parce que c'est un lien)
EDIT : Après un petit test, ajoute ceci pour aligner tes onglets avec tes titres (la marge négative peut être à modifier). Ce code correspond au "bloc" d'onglet.
#menu_deroulant ul li ul {
margin-left: -27px; /*A MODIFIER POUR ALIGNER*/
padding-top: 10px;
}Merci beaucoup, j'ai enfin réussi a faire ce déroulant, avec un mal de tête épouventable :) mais c'est enfin fini. Encore une fois merci.
Bonsoir, :)
Désolée de te déranger mais, j'ai un petit problème avec le code. Je veux le mettre en haut mais pas dans un article, je veux qu'il soit comme ça : http://pokelove.eklablog.fr/
Là où il y'a Solution/astuce, Les dex pokemon ...
J'ai essayé avec le code que tu as mit, mais ça ne veux pas. o/
Je te remercie d'avance de ton aide :)
Pour le placer en haut de la page, il faut que tu utilise le code fourni dans la dernière partie de l'article :
#menu_navigation{ height: Xpx;/*hauteur de la barre*/
width: Xpx; /*largeur de la barre*/
position: absolute;
top: Xpx ; /*position par rapport au haut de la page*/
left: Xpx; /*position par rapport au bord gauche de la page*/
}Le code suivant permet de gérer le groupe d'onglet (ici, un exemple avec un fond rouge et une bordure noire) :
#menu_navigation ul li ul{
display : none;
background: red; /*fond rouge*/
border: 2px solid black; /*bordure noire*/
propriete : valeur; /*A personnaliser*/
}Essaie de bidouiller un peu avec ce code ;)
CSS:
#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }
#menu_deroulant{
height: 20px;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}
#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display: block;
;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}
#menu_navigation{ height: Xpx; 100/*hauteur de la barre*/
width: Xpx; 30/*largeur de la barre*/
position: absolute;
top: Xpx ; 100 /*position par rapport au haut de la page*/
left: Xpx; 20 /*position par rapport au bord gauche de la page*/
}HTML:
<div id="menu_deroulant">
<ul><li>Titre 1
<ul><li><a href="#">Onglet 1</a></li>
<li><a href="#">Onglet 2</a></li>
<li><a href="#">Onglet 3</a></li></ul>
</li>
<li>Titre 2
<ul><li><a href="#">Onglet 1</a></li>
<li><a href="#">Onglet 2</a></li>
<li><a href="#">Onglet 3</a></li></ul>
</li>
<li><a href="#">Titre 3</a></li>
</ul>
</div>J'ai beau essayer mais ça ne marche pas o/
Quand je marque Xpx, il suffit de remplacer le X par une valeur ;) Le point-virgule indique la fin d'une instruction, donc en notant Xpx ; 100 , ton navigateur ne lit pas le 100.
#menu_deroulant{ height: 30px;/*hauteur de la barre*/
width: 300px; /*largeur de la barre*/
position: absolute;
top: 100px ; /*position par rapport au haut de la page*/
left: 20px; /*position par rapport au bord gauche de la page*/
}Voici donc le code corrigé (avec quelques petites modifications : tu aurais eu un étrange résultat avec un menu de 30*100 ^^' )
Ouppss j'ai oublié un 0 :3
Edit: J'ai un peu modifié le thème ^^
et j'ai un petit soucis, y'a un "cadre" blanc à gauche que je veux enlever mais je ne trouve pas le code, et de plus la page où j'écris mes articles je veux la mettre au centre, puisqu'elle est décalée vers la droite j'ai mis position: center;
Mais ça ne marche pas o/
Ps: c'est bon pour les titres ^^
Merci à toi ! ;)
Enleve ton menu de gauche, et essaie de régler manuellement les marges :
Apparence => Modifier le thème => Format du blog => Menu / Marges
Merci beaucoup ^^
Une dernière question, je suis que je suis un peu pénible :p
mais comment mettre le menu déroulant dans toutes les pages ?
Il faut que tu mettes le html dans un module simple
EDIT : Du coup, si tu veux supprimer le menu de gauche, il va falloir modifier quelques trucs dans ton css ^^'
Dans un premier temps, laisse ton menu à gauche et transfert le html dans le html d'un module simple pour que ton menu déroulant apparaisse sur toutes les pages. (ne donne pas de titre à ce module)
Ensuite, dans ton css, il faut que tu rendes ton menu de gauche invisible :
#menu1 { width : 0px;
background: none;
}Essaie avec ce code, je n'ai pas le temps de tester pour le moment ^^' Dis moi si ça ne fonctionne pas.
Bonjour,
ça marche ^^ merci, euh mais pour le menu, je l'ai mit à droite, car la page est bien centré alors que à gauche elle partait à droite.
Par contre le menu visiteur n'est plus lisible o/ on ne le voit plus >n<
Merci encore !
Retour dans le CSS (à ajouter tout à la fin pour que ce soit les dernières modification prises en compte) :
#content {
margin-left: 150px;
margin-top: 30px;
}.module_menu_type_lastvisitors {
position: fixed;
top: 25px;
margin-left: -170px; /*A modifier pour ajuster*/
width: 100px;
}Normalement, ça devrait marcher :)
Hm... Ça me semble difficile de tout réexpliquer plus simplement XD
Qu'est-ce que tu ne comprends pas exactement ?
Il suffit d'utiliser une marge négative ;)
#menu_navigation ul li ul {
display: none;
margin-top: -Xpx;
}
Merci ^^
Quel code tu as utilisé pour que seul les angles du bas des onglets soient arrondis ? Moi, j'ai utilisé ce code, mais ça ne fonctionne pas:
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display:block;
background-color: #AAA0B0;
width: 80px;
height: 25px;
border-radius: 0px 0px 30px 30px;}Au lieu d'avoir juste un grand onglet avec les angles du bas arrondis, j'ai autant d'onglets que j'ai de liens (Je sais pas trop comment expliquer... Mais en gros, j'ai trois rectangles avec les angles du bas arrondis au lieu d'un seul)
Bonjour et bravo à toi. C'est super et quelle générosité de ta part.
Etant très peu compétent, j'ai recopié je te l'avoue.
Dans le principe cela fonctionne. Mais j'ai des pbs avec le css, que je ne maîtrise pas. Le menu est à la bonne hauteur, mais trop étroit et la police trop petite. Sur quoi je dois agir pour donner une apparence plus correcte. je te joins l'adresse et le code CSS. Si tu m'aider, je comprends que tu puisses trouver irritant toutes ces questions.
Merci.
Tigroudelbungo.
http://carnetsejours.eklablog.com/
.divpuzzle
{
height:62px;
width:62px;
border: 1px solid darkgrey;
}
#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }
#menu_deroulant{
height: 40px;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}
#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display: block;
;
background-color: Black ;
border: 1px dotted Grey;
color: Grey;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#menu_deroulant{
height: 30px;
width: 300px;
position: absolute;
top: 210px ;
left: 400px;
}
Bonjour Gaelle,
C'est bien mon pb.Comment augmenter la taille des caractères du menu et bien separer le differents titres du menu.
Je vais devoir me mettre dans les docs et tutos css personnalisation.
Merci d'avoir regardé.
@ Tigrou :
#menu_deroulant ul li { width : Xpx; /*largeur des onglets*/
height : Xpx; /*hauteur des onglets*/
padding: 4px; /*marge interrieur*/
font-size: Xpx; /*taille de la police*/
}Voici quelques exemples pour gérer l'apparence des onglets de manière uniforme.
@ Gaelle : Pour pouvoir personnaliser, il faut utiliser des propriété CSS avec les sélecteurs fournis.
=> http://fanstasy-graph.eklablog.net/introduction-a4961842
Quelques propriétés sont expliqués sur le blog, mais tu peux également rechercher sur internet ;)
=> http://fanstasy-graph.eklablog.net/css-c937827 [4ème boite : "Propriété"]
Merci de ta réponse, je reprends tout cela demain matin après passage à la bibliothèque pour trouver un livre sur le css.
Bonne soirée.
J'ai encore une question >.<
Comment est-ce que tu fais pour que les titres soient "au centre" des onglets ?
Bonjour, comment enlever "L'étage" sur mon menu ?
Et aussi, avec :
#menu_navigation{ height: 30px;
width: 30px;
position: absolute;
top: 10% ;
left: 50%; }Le menu reste dans mon module...
Que faire ? Merci en avance !
1 - Comment ça "l'étage" ?
2 - Ton sélecteur en HTML ne serait-il pas "menu_deroulant" ? Si tu as réutilisé les commentaire, vérifie que le nom du sélecteur est le même partout ;)
Je pense que tu ne m'as pas vu, donc je repose ma question ^^
Comment est-ce que je dois faire pour que mes titres soient au centre de mes onglets ? (Quand l'onglet descend, j'aimerais que le titre soit bien alignés avec l'onglet, et pas sur la droite) ^^
Bonjour, j'ai un peu de mal avec ce menu déroulant... Voilà ce que j'ai :
Je ne sais pas comment mettre le titre visible et les onglets visibles au survol au centre ! Et aussi, je voudrai agrandir les onglets visibles au survol ...
Mon code :
#menu_deroulant ul {
margin:10;
padding:10;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }
#menu_deroulant{
height: 25px;
background-color: #FEC8D0 ;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}
#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
background-color: #FEC8D0 ;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display: block;
;
background-color: #FEC8D0 ;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}Merci d'avance ! >.<
Ce n'est pas grave, j'ai abandonné (Hé oui, je suis un chat qui abandonne vite.)
Mais j'ai compris mon erreur ;) Alors si je me relance, je sais quoi faire ! Merci beaucoup quand même :)
Ça marche pas... :/ Voilà mon code:
#titre_header a {
display: block;
width: 1000px;
height: 302px;}
#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }
#menu_deroulant{
height: 20px;
width: 565px;
border: 1px solid black;
position: absolute;
top: 310px ;
left: 43%;
background-color: #e2e2e2;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 0px 0px 8px #FCFCF5;}
#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
color: #0A0A40;}
#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display:block;
width: 80px;
height: 25px;}
#menu_deroulant ul {border-radius: 0px 0px 20px 20px;
background-color: #e2e2e2;
box-shadow: 0px 0px 8px black;}
#menu_deroulant ul li ul li { text-align: center;}
Bonjour, super boulot et très simple à comprendre mais j'aurais voulu savoir si il était possible de rajouter d'autres menu ? Car votre exemple s'arrête au Titre 3. Comment faire pour rajouter un Titre 4 - 5 et 6 toujours déroulant?
Merci d'avance, Bonne journée!
@Aykia : Qu'est-ce qu'il ne marche pas ?
@Teamfrance : Il suffit d'ajouter ceci pour chaque nouveau titre:
<li>Titre X
<ul>
<li> Onglet 1 </li>
<li> Onglet 2 </li>
<li> Onglet 3 </li>
</ul>
</li>
D'accord merci. Est-il possible de faire un sous-sous menu je ne sais pas trop comment appeler ça mais par exemple aprés:
- Titre X
Onglet 1 - (faire encore un autre sous menus ?) - Onglet 1
- Onglet 2
Onglet 2
Et bien lorsque l'onglet apparaît, le titre est à droite, et pas au centre comme je le voudrais :S
Par exemple là, mon curseur est sur "Blog".
@TeamFrance : Dans l'idée, voici ce que tu dois mettre dans ton HTML
<li>Titre X
<ul>
<li> Onglet 1 </li>
<ul>
<li>Sous-Onglet 1</li>
<li>Sous-Onglet 2</li>
</ul>
<li> Onglet 2 </li>
<li> Onglet 3 </li>
</ul>
</li>Ensuite dans le CSS, il faut faire la même manip' que pour faire apparaitre et masquer les onglets, mais un cran plus loin :
#menu_deroulant ul li ul li ul li{
display: none; /*masque les sous-onglets */
position: absolute;
top: -Xpx; /* permet de remonter les sous-onglet */
left: Xpx; /* place les sous-onglet à gauche de l'onglet */
}
#menu_deroulant ul li ul li:hover ul li{
display: block; /*affiche les sous-onglets */
}@Aikya : Il faut définir la largeur de tes titres :
#menu_deroulant ul li {
display:block;
width: Xpx; /*largeur*/
text-align: center; /*alignés au centre*/
}
D'accord merci, sauf que ça ne marche pas. Êtes-vous sur qu'il ne faut pas que je change ou que j'ajoute un code CSS en plus ?
Merci d'avance.
Il faut bien rajouter du CSS, le code se trouve dans mon post précédant. Cependant, essayez avec celui-ci qui me semble plus simple :
#menu_deroulant ul li ul li ul li{ display: none; /*masquer les sous-onglets*/
}
#menu_deroulant ul li ul li:hover ul li{ display: block; /* afficher les sous-onglets*/
}#menu_deroulant ul li ul li ul { margin-left: Xpx;
margin-top: -Xpx;
}61DonimJeudi 17 Avril 2014 à 01:03Bonjour,
Pourriez-vous m'aider ? svp En temps que débutante, je viens de créer mon premier blog avec Blogger. J'ai pris le modèle Picture windows personnalisé avec une image plein écran prise dans mon PC . Modèle mise en page à 3 colonnes transparent. J'ai installé Google Chrome. Je n'arrive pas à insérer les codes menus/onglets coulissants .... Est-ce compatible ? J'ai internet Explorer. Dois-je rentrer tous les codes CSS et HTML dans un même gadget ou ailleurs... ?
Le genre ressource, encyclopédie ... sur la gauche de l'écran me plait beaucoup, mais seule , cela me semble impossible à réaliser!
J'aurai besoin dans mon menu principal de : Accueil - Bibliothèque ( articles, romans, poésie, bandes dessinées- les auteurs - magazines -les nouvelles ) Vidéothèque - Musée
Par avance merci . Cdlt . Donim
Bonjour,
J'aimerai placer un menu déroulant sur mon blog mais le hic est que lorsque je copie le code dans ma feuille "CSS" dans le menu "Modifier le thème" ça affiche que le code est incorrecte. Et cela s'affiche quand je place le code HTLM. Ou dois-je placer le code HTLM ailleurs que dans la feuille CSS ??
EDIT: J'aurai dû être plus attentive, je viens de trouver la solution lol :)
On ne peux écrire que du CSS dans la feuille CSS.
Sur EklaBlog on peux écrire du HTML dans un article ou dans un module en cliquant sur l'icone < >
" Sur EklaBlog on peux écrire du HTML dans un article ou dans un module en cliquant sur l'icone < > "
Le HTML écrit dans un module simple sera visible sur tout le blog, puisque le module en question apparait dans toutes les pages
Ah d'accord, je pensais que je devais écrire le code dans un fichier txt puis convertir en htlm puis l'hebeger dans "Gestions des fichiers"
Je ne comprend pas bein la partie Personalistaion (CSS). Quelqu'un pourrait me réexpliquer ?
C'est pour gérer l'apparence du menu.
Si tu utilise le code complet HTML (le dernier) ainsi que le premier CSS (celui à ne pas modifier), tu as déjà un menu qui fonctionne, mais l'affichage n'est pas super... Tu peux déjà essayer avec ces deux code pour voir ce que ça donne ;)
Les 3 autres codes CSS correspondent aux différents élément du menu (la barre qui contient les titres, les titres et les onglets) Pour leur définir par exemple une couleur de fond, des bordures...
Oui, masi ej ne comprend pas bien quand il y a marqué /*personaliser*/ peux tu me donner un exemple pour completer ?
Il faut compléter avec des propriété (voir ici)
Pour exemple, je prends le deuxième code CSS qui correspond à la "barre" contenant les titres :
#menu_deroulant{
height: Xpx; /*définissez sa hauteur*/
propriété : valeur; /*personnalisez*/
}Ce qui est écrit entre /*...*/ sont des commentaires pour vous aider à vous y retrouver dans le code, mais il n'ont pas pas d'influence sur celui-ci.
Pour la propriété height (hauteur) je remplace X par un nombre pour définir la hauteur de cette barre. Disons 20
#menu_deroulant{
height: 20px; /*hauteur de 20px*/
propriété : valeur; /*personnalisez*/
}A la place de propriété : valeur; je peux mettre n'importe quelle propriété. Par exemple, si je veux mettre un fond jaune, je mettrais le code suivant :
#menu_deroulant{
height: 20px; /*hauteur de 20px*/
background : yellow; /*fond jaune*/
}
Ah, que c'est compliqué, je n'arrive pas ! Je n'arrive pas et je suis nulle en informatique... Je vais essayer d'y reccomencer
J'y suis arrivée ! Le seul souci est que le menu n'est pas assez large et il est petit, et puis la couleur des onglets ne correspond pas à celle du menu...
Merci pour ce tuto !
Après six jours, j'ai enfin réussi à faire exactement ce que je voulais ! J'aiiiime !! :D
Bonjour, alors voila je suis harchi nul en htlm et css, et donc je voulais te demander ce que ca voulais dire "1- Créez une div avec un id pour pouvoir plus facilement travailler dessus en CSS" merci :)
Bonjour, mon menu déroulant ne marche pas sur google chrome, comment je fait ?
Il marche très bien sur firefox.
C'est un peu le bordel hein :')
#menu_deroulant{ position: absolute;
top: 200px;
min-width: 100%;
width: 100%; /*largeur du menu*/
height: 40px;
background: white;
border-top: 1px solid rgba(0,0,0,0.1);
box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
z-index: 1;
background-position: center;
}
#menu_deroulant.fixe { position: fixed;
top: 30px;
}
#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none;
}
#menu_deroulant li {
float:left;
}
#menu_deroulant li ul li {
float:none;}
#menu_deroulant ul li ul {
visibility:hidden;
-webkit-transition: 0.1s;
-webkit-transform: scale(1, 0) translate(0px, -100px);
}
#menu_deroulant ul li:hover ul {
display:block;
visibility:visible;
float:none;
-webkit-transform: scale(1) translate(0px, 1px),
}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }
#menu_deroulant { width: 800px;
left: 50%;
margin-left: -400px;
position: absolute;
height: 25px;
}
#menu_deroulant ul li {
display:block;
width: 185px;
font-size: 15px;
padding-top: 5px;
}
#menu_deroulant ul li:hover {background: #999999;
opacity: 1;
}
#menu_deroulant ul li a:hover { color: black;
}
#menu_deroulant ul {background : #999999;
box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
}
#menu_deroulant ul li ul li {font-size: 14px;
text-align: center;
width: 170px;
font-size: 12px;
padding: 5px;
padding-left: 10px;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
#menu_deroulant ul li ul li:hover{ background:#f44850 ;
}
#menu_deroulant ul li ul li a <span class="css-punctuation" style="color: #666666; font-family: m
Bonjour,
Je suis en train d'essayer de créer un menu, mais j'aimerais que quand on survole un titre les sous-titres ne s'affichent pas instantanément mais en se déroulant (Comme le bandeau Graphisme Codage Etc de ce blog). Étant un peu novice en matière de codage, je ne sais pas du tout quoi faire. Pourriez-vous m'aider ?
(Merci de votre patience et pour le tutoriel très bien expliqué ;D)
(Peut-être trop tard pour répondre ^^"")
Webmaster-number-one :
Iolka : Utilise une transition ;-)
http://fanstasy-graph.eklablog.net/transition-a23033460
salit je vient de découvrir ton blog et il est vraiment génial
voila je suis une cruche ds l informatique, je tient un blog de covers (http://alittlecoversbyazalia.eklablog.com/) et j aimerai un menu déroulant mais je n y arrive pas
peut tu m en créer un si tu a le temps bien sur
voila l idée
Korea covers Japan covers China ,Taiwan , Ect covers
KDrama JDrama Drama
Web Drama Web Drama Web drama
Movie Movie Movie
KProgramm
merci d avance
si tu ne sais pas ce n est pas grave bon wk et longue vue a ton blog
Vraiment cool ce code. :D Le problème, c'est que je n'arrive pas à mettre de transition lorsque le menu se déroule, pourtant j'ai essayé partout, comment faire ?
Suivre le flux RSS des commentaires
Ajouter un commentaire
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog
Merci beaucoup !! :) c'est super sympa de ta part. :D