La date/heure actuelle est Mer 18 Oct 2017 - 11:11 - créer un forum

[Tutoriel] Menu style dropdown tout en css + menu responsive

Aller au contenu

Poster un nouveau sujet Répondre au sujet Aller à la page: <  1, 2, 3, 4, 5, 6, 7, 8  >

[Tutoriel] Menu style dropdown tout en css + menu responsive
Auteur Message
RotorMan


Inscrit le: 21 Déc 2006
Messages: 854

MessagePosté le: Dim 6 Avr 2014 - 13:14    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

PublicitéSupprimer les publicités ?
Revue du message précédent :

Kyosuke a écrit:

Re,

tu peux éventuellement faire ainsi :

Code: Sélectionner - Agrandir


/* 
 Menu style dropdown par RotorMan 
 [Debut]
*/

#nav li a.top_link {
   font-size: 14px !important;
}

/* 
 Menu style dropdown par RotorMan 
 [Fin]
*/



ça te permettra d'apercevoir le code CSS du menu d'un coup d'oeil.


Bonjour,


Merci à toi Kyosuke d'avoir dépanné Kieffer notre bêta testeur. Le week-end je suis rarement sur le net, famille oblige. Smile


Ta solution est parfaite, juste une info complémentaire pour les éventuels utilisateurs de ce menu :


En effet, la solution de Kyosuke permet de ne pas mettre les mains dans le css du menu qui semble barbare pour les non initiés.
Pour changer la police : taille, couleur, caractères, c'est sur cette ligne dans le css :

Code: Sélectionner - Agrandir

 #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#fff; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} 


Bonne fin de week-end Smile
Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 14:25    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

bonjour encore moi mais je teste et je teste

screenshot



le carré de la dénomination ne s'agrandit pas par rapport au texte écrit y a t il une solution ou ne nombre de caracteres est fixe ? si oui combien

merci de ta réponse
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 854
Niveau:
Point(s): 852
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 6 Avr 2014 - 15:05    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Bonjour,

Oui c'est réglable. Wink

Dans le css du menu, cherches :

Code: Sélectionner - Agrandir
 
#nav li:hover ul.sub
{left:1px; top:38px; background: #E8EAEC; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:300px; height:auto; z-index:350;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:300px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:300px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #E8EAEC;}


Dans ces lignes, tu as

Code: Sélectionner - Agrandir
width:300px;


Changes, dans chaque ligne, 300px par 350px ou 400 px selon ce que tu as besoin en largeur.

Exemple :

Code: Sélectionner - Agrandir
#nav li:hover ul.sub
{left:1px; top:38px; background: #E8EAEC; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:400px; height:auto; z-index:350;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:400px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:400px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #E8EAEC;}


Cordialement
_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 15:06    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

ok dans les sous sous rubrique il n'y a plus de fleche indiquant un lien normal
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 854
Niveau:
Point(s): 852
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 6 Avr 2014 - 15:21    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Re,

Dans le css du menu, cherches tout en bas du code ceci :

Code: Sélectionner - Agrandir
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#FFD073 url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 300px 6px no-repeat; color:#000; border-color:#FFAA00;}


Et changes par ceci :

Code: Sélectionner - Agrandir
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#FFD073 url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 290px 6px no-repeat; color:#000; border-color:#FFAA00;}


Le placement de la flèche est à 300px d'origine, je te l'ai mis à 290px. Elle doit s'afficher sur ton forum maintenant. Wink

En fait c'est simple, si tu agrandis les fenêtres réglées à 300px par 350px, tu dois changer le placement de la flèche à 340px (par exemple).


Cordialement
_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Dernière édition par RotorMan le Dim 6 Avr 2014 - 15:27; édité 1 fois
Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 15:22    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

ok je verifie
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 15:23    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

mais je l'est pas le css
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 854
Niveau:
Point(s): 852
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 6 Avr 2014 - 15:29    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Re,

Si dans rotormanmenu.css

Tu as tout en bas de la page, ceci :

Code: Sélectionner - Agrandir
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#FFD073 url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 300px 6px no-repeat; color:#000; border-color:#FFAA00;}


Changes par cela :

Code: Sélectionner - Agrandir
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#FFD073 url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 290px 6px no-repeat; color:#000; border-color:#FFAA00;}

_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 15:32    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

je suis un boulet je l'ouvre comment ton rotormanmenu.css
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 854
Niveau:
Point(s): 852
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 6 Avr 2014 - 15:38    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Re,

Il est dans tes templates
_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 15:49    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

oui je l'est bien trouve en haut

Code: Sélectionner - Agrandir

<!-- END switch_enable_pm_popup -->

<link href="http://img.xooimage.com/files56/8/8/9/rotormanmenu-44e28cb.css" rel="stylesheet" type="text/css" />

</head>


mais comment je l'ouvre ?
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 854
Niveau:
Point(s): 852
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 6 Avr 2014 - 15:56    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Re,

Comme ton Overall_Header : Thème, modifier les templates, tu cherches en haut de tes templates "rotormanmenu.css" il est avant ton index_body.tpl.

Cordialement
_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 16:07    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

p.... je suis vraiment un boulet
ok c'est good et la couleur des liens c'est pareil c'est de css car il ce mette en orange lolll
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 854
Niveau:
Point(s): 852
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 6 Avr 2014 - 16:20    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Re,

Normal, mon menu est fait ainsi ! Je l'ai changé car il est vrai que, si comme toi, les utilisateurs mettent tout en sous sous-forum, cela fait tâche.

Cherches dans ton overall_Header :
Code: Sélectionner - Agrandir


 <link href="http://img.xooimage.com/files56/8/8/9/rotormanmenu-44e28cb.css" rel="stylesheet" type="text/css" />


Remplaces le par celui-ci :

Code: Sélectionner - Agrandir


 <link href="http://img.xooimage.com/files57/8/f/5/rotormanmenu-44eb443.css" rel="stylesheet" type="text/css" />

Cordialement
_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Dim 6 Avr 2014 - 16:22    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

merci tu est un vrai dieu et moi un vrai boulet
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 854
Niveau:
Point(s): 852
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Dim 6 Avr 2014 - 16:30    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Re,

Non, en fait tu poses les questions qu'un utilisateur non initié aurait posé, de ce fait tu rends service à ce tuto puisque grâce à toi il est quasiment complet.

IL suffit de lire ce fil de discussion pour avoir tous les renseignements principaux pour installer et retoucher le menu selon ses besoins. Smile
D'ailleurs, je viens de remplacer les liens des css dans le tuto. J'ai enlevé la couleur orange dans les cellules des sous sous-rubriques. Wink

Cordialement
_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Forum
Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 11:11    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive

Montrer les messages depuis:   
Répondre au sujet Page 3 sur 8 Aller à la page: <  1, 2, 3, 4, 5, 6, 7, 8  >




Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401