It is currently Fri 30 Sep 2016 - 10:19 - créer un forum

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

Skip to content

Post new topic Reply to topic Goto page: <  1, 2, 3, 4, 5, 6, 7, 8  >

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


Joined: 21 Dec 2006
Posts: 385

PostPosted: Sun 6 Apr 2014 - 13:14    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

PublicitéSupprimer les publicités ?
Previous post review:

Kyosuke wrote:

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
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 14:25    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sun 6 Apr 2014 - 15:05    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
_______________________
Je ne répond plus aux demandes d'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.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 15:06    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sun 6 Apr 2014 - 15:21    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
_______________________
Je ne répond plus aux demandes d'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.


Last edited by RotorMan on Sun 6 Apr 2014 - 15:27; edited 1 time in total
Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 15:22    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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



Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 15:23    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sun 6 Apr 2014 - 15:29    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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;}

_______________________
Je ne répond plus aux demandes d'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.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 15:32    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sun 6 Apr 2014 - 15:38    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,

Il est dans tes templates
_______________________
Je ne répond plus aux demandes d'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.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 15:49    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sun 6 Apr 2014 - 15:56    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
_______________________
Je ne répond plus aux demandes d'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.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 16:07    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sun 6 Apr 2014 - 16:20    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
_______________________
Je ne répond plus aux demandes d'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.


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

PostPosted: Sun 6 Apr 2014 - 16:22    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 385
Niveau:
Point(s): 366
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Sun 6 Apr 2014 - 16:30    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
_______________________
Je ne répond plus aux demandes d'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.


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 10:19    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive

Display posts from previous:   
Reply to topic Page 3 of 8 Goto page: <  1, 2, 3, 4, 5, 6, 7, 8  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401