It is currently Mon 26 Sep 2016 - 17:35 - 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: 373

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

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

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
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 - 17:25    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Embarassed Embarassed Embarassed Razz Very Happy
_______________________
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 - 18:29    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

re


peut on dans un menu interdire l'accès d'une option aux membres réservé cette option aux admins, modos 


je sais encore moi 
_______________________
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: 373
Niveau:
Point(s): 354
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 - 18:48    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,

Oui tout à fait possible, il suffit de rajouter :

Code: Sélectionner - Agrandir

 <!-- IF S_USER_LEVEL == "ADMIN" || S_USER_LEVEL == "MOD"  -->




Juste avant le lien ou le bouton que tu désires, puis de mettre tout à la fin :

Code: Sélectionner - Agrandir

 <!-- ENDIF -->




Exemple pour cacher un bouton et tout ce qui va avec (sous-rubriques, sous sous-rubriques) :

Code: Sélectionner - Agrandir


 <!-- IF S_USER_LEVEL == "ADMIN" || S_USER_LEVEL == "MOD"  --> 


<li class="top"><a href="#" class="top_link"><span class="down">Rubrique 2</span></a>
<ul class="sub">
<li><a href="#">Sous rubrique F</a></li>
<li><a href="#">Sous rubrique G</a></li>
<li><a href="#">Sous rubrique H</a></li>
<li><a href="#">Sous rubrique I</a></li>
</ul>
</li> 

 <!-- ENDIF -->




Autre exemple pour ne cacher qu'une sous rubrique :

Code: Sélectionner - Agrandir


 <!-- IF S_USER_LEVEL == "ADMIN" || S_USER_LEVEL == "MOD"  -->
<li><a href="#">Sous-rubrique</a></li>
 <!-- ENDIF -->




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 - 19:21    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

genial encore 
je teste j'améliore cela commence vraiment a prendre forme


encore une 

Voir les nouveaux messages depuis votre dernière visite

peut t'on le mettre dans un menu je trouve pas la variable dans le template
_______________________
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: 373
Niveau:
Point(s): 354
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 - 20:01    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Re,

Possible mais ce sera moche et prendra beaucoup de place sur la barre du menu.

Mais si tu veux tester quand même, mets ça :

Code: Sélectionner - Agrandir
 
<li class="top"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>


Bonne soirée
_______________________
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 - 20:50    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Merci

c'est dans le menu déconnexion que je voulais le mettre du coup grace aux variables je me suis débrouillé

tu as raison dans le menu du haut saurait était très moche
_______________________
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: Mon 7 Apr 2014 - 09:17    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

bonjour

sur la partie Template tut roule
sur la partie CSS j'ai a peu prés compris
il reste un petit détail quand tu agrandi un cadre la flèche indiquant un sous-menu reste à la même place ce qui à pour conséquence que le texte vient en superposition à cette flèche
_______________________
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: 373
Niveau:
Point(s): 354
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: Mon 7 Apr 2014 - 13:52    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour Kieffer,

Pour mémoire est au cas où tu en aurais besoin agrandir les fenêtres.

Pour déplacer la flèche cela se trouve dans le css à ces endroits.

Code: Sélectionner - Agrandir
#nav li ul.sub li a.fly
{background:#E8EAEC url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 290px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#D0D5E4; color:#000; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#D0D5E4 url(http://img.xooimage.com/files5/a/0/4/arrow_over-f69528.gif) 290px 6px no-repeat; color:#000;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#00E6FF url(http://img.xooimage.com/files5/a/0/4/arrow_over-f69528.gif) 290px 6px no-repeat; color:#000; border-color:#;}

#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:#E8EAEC url(http://img.xooimage.com/files3/f/8/c/arrow-f6951a.gif) 290px 6px no-repeat; color:#000; border-color:#;}


Le placement de la flèche est à 290px pour des fenêtres à 300px, si tu agrandis les fenêtres réglées à 300px par 350px, tu dois changer le placement de la flèche à 340px (par exemple) si tu agrandis les fenêtres à 400px, tu dois changer le placement des flèches à 390 px toujours pour exemple. En fait, c'est à toi de placer les flèches selon ton désire. Je met 10 px de marge, mais tu peux n'en mettre que 5. Exemple si tu mets tes fenêtres à 350px, tu peux mettre tes flèches à 345px, etc...

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.
Following members like this message:
kieffer (07/04/14)


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: Sat 12 Apr 2014 - 09:25    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

[quote="RotorMan"]Re,

Oui tout à fait possible, il suffit de rajouter :

Code: Sélectionner - Agrandir

 <!-- IF S_USER_LEVEL == "ADMIN" || S_USER_LEVEL == "MOD"  -->

Juste avant le lien ou le bouton que tu désires, puis de mettre tout à la fin :
Code: Sélectionner - Agrandir

 <!-- ENDIF -->

bonjour pour las admin et modo cela marche mais comment je rajoute un groupe j'ai teste avec le nom que j'ai donné au groupe cela fonctionne pas
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: 373
Niveau:
Point(s): 354
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: Sat 12 Apr 2014 - 16:50    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour,

A ma connaissance, les noms des groupes (créés) ne sont pas pris en charge dans cette variable. Il faut passer par les permissions pour donner ou bloquer des droits aux groupes.

Bon week-end Smile
_______________________
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: Sat 12 Apr 2014 - 18:00    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

il est evident mon cher ami que mes groupes sont crées avec des permissions loll
c'etait juste pour cache dans les menus déroulants certains menus réservé a des groupes tant pis je ferais avec c'est déjà un super taff que tu nous a donné et surtout un grand plaisir pour des boulets comme moi d'avance dans les fonctionnalités de mon forum

MERCI A TOI
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
Raacerzz
Membre


Offline
Membre

Joined: 18 Feb 2012
Posts: 4
Point(s): 4
Moyenne: 1.00

PostPosted: Sat 10 May 2014 - 20:09    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Salut,

Avant tout merci du tuto, il est super !

Mais comment retirer le fond du menu ?

Merci


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 11 May 2014 - 10:30    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

bonjour 
de quel fond tu parle des déroulant ou du fond de la barre 
_______________________
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: 373
Niveau:
Point(s): 354
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 11 May 2014 - 14:57    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

Bonjour,

Si vous parlez du bandeau en fond du menu (bleu ou noir), il suffit d'enlever le dégradé de couleur du  #menu dans le css que je fourni en le remplaçant par celui-çi :

Code: Sélectionner - Agrandir

 #menu {position:relative;margin:auto;padding:auto;width:100%; height:40px;color:#fff;font-size:18px;}

color = couleur de la police du menu
font-size = grosseur de la police
Height = hauteur du menu

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: Fri 23 May 2014 - 14:27    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

bonjour


petite amélioration pourrait on avoir l'inversion des sous menus en cas d'écran trop petit c'est à dire un sous menu s'ouvre vers la droite pourrait on avoir l'ouverture vers la gauche si l'écran est plus petit.
merci pour ta réponse  
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Author Message
Contenu Sponsorisé





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

Display posts from previous:   
Reply to topic Page 4 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