La date/heure actuelle est Jeu 19 Oct 2017 - 07:21 - 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: 857

MessagePosté le: Dim 6 Avr 2014 - 16:30    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 :

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
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 - 17:25    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
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 - 18:29    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 857
Niveau:
Point(s): 855
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 - 18:48    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
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 - 19:21    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 857
Niveau:
Point(s): 855
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 - 20:01    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
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 - 20:50    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
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: Lun 7 Avr 2014 - 09:17    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 857
Niveau:
Point(s): 855
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: Lun 7 Avr 2014 - 13:52    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
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
Les membres suivants remercient RotorMan pour ce message :
kieffer (07/04/14)


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: Sam 12 Avr 2014 - 09:25    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

[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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 857
Niveau:
Point(s): 855
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: Sam 12 Avr 2014 - 16:50    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
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: Sam 12 Avr 2014 - 18:00    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
Raacerzz
Membre


Hors ligne
Membre

Inscrit le: 18 Fév 2012
Messages: 4
Point(s): 4
Moyenne: 1,00

MessagePosté le: Sam 10 Mai 2014 - 20:09    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Salut,

Avant tout merci du tuto, il est super !

Mais comment retirer le fond du menu ?

Merci


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 11 Mai 2014 - 10:30    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 857
Niveau:
Point(s): 855
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 11 Mai 2014 - 14:57    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
_______________________
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: Ven 23 Mai 2014 - 14:27    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

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
Auteur Message
Contenu Sponsorisé





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

Montrer les messages depuis:   
Répondre au sujet Page 4 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