La date/heure actuelle est Ven 20 Oct 2017 - 16: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
kieffer


Inscrit le: 12 Nov 2009
Messages: 412

MessagePosté le: Ven 23 Mai 2014 - 14:27    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 :

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

Bonjour Kieffer,

C'est déjà prévu, si l'écran est trop petit, le sous menu s'affiche sur la gauche.
Auquel cas, utiliser la possibilité dans le tuto de réduire la largeur du menu, soit en passant par une table soit dans un container.

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
Les membres suivants remercient RotorMan pour ce message :
kieffer (23/05/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 26 Juil 2014 - 09:50    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

bonjour

re pourrait on avoir la possibilité d'ouvrir les onglet vers le bas plutot que sur la droite ou sur la gauche Sil te plait
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
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 26 Juil 2014 - 15:31    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Bonjour Kieffer,

C'est possible, mais compliqué en l'état. Il faudrait reprendre tout le code de A à Z. Donc autant refaire un menu spécialement conçu pour ce faire.
Simplement par le fait qu'il faudrait que les fenêtres, qui s'ouvrent, se chevauchent.
Je verrai à temps perdu ce que je peux faire (l'été je suis très pris).

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

ok pas de probleme pour moi merci
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
le_tcho
Membre


Hors ligne
Membre

Inscrit le: 10 Déc 2008
Messages: 83
Point(s): 83
Moyenne: 1,00

MessagePosté le: Lun 8 Sep 2014 - 22:51    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Y aurait il possibilité de mettre cette barre en dynamique ???

Ce tutu est super, je l'ai amélioré en mettant la barre tout en haut pour les membres et sous la bannière pour les visiteurs, 
rajouté une autre barre de navigation classique également pour les visiteurs ...
j'y ai mis des images pour la connexion et la déconnexion 



En tout cas bravo .... 
Les membres suivants remercient le_tcho pour ce message :
RotorMan (10/09/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: Mer 10 Sep 2014 - 18:18    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

le_tcho a écrit:
Y aurait il possibilité de mettre cette barre en dynamique ???

Ce tutu est super, je l'ai amélioré en mettant la barre tout en haut pour les membres et sous la bannière pour les visiteurs, 
rajouté une autre barre de navigation classique également pour les visiteurs ...
j'y ai mis des images pour la connexion et la déconnexion 



En tout cas bravo .... 

je suis alle sur ton fofo j'ai pas bien vu des modif ?
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
le_tcho
Membre


Hors ligne
Membre

Inscrit le: 10 Déc 2008
Messages: 83
Point(s): 83
Moyenne: 1,00

MessagePosté le: Mer 10 Sep 2014 - 23:21    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Non car on final vu qu'elle n'est pas dynamique je l'ai remise en même niveau mais dans mon overall haeder y a 2 code différents comme çà je les mets où je veux ...

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

bonsoir aprés des vacances tranquille d'ou mon silence ces temps ci

je reviens vers toi maitre des menus déroulants
voila j'ai testé mon forum sur une tablette 10 pouces android cela marche a peu prés mais plusieurs points

- Pas de redimensionnement automatique des menus cela vient surement du fait que xooit ne tourne pas sur android sur ipad meme probleme
- Le fait d'avoir des sous menus se déroulant vers le bas pourrait corrigé cette imperfection (je sais c'est beaucoup de boulot)
- les effet marchent sans problèmes
- les flèches s'affichent aussi
pae contre le passage des sous menus de gauche à droite ne fonctionne pas
voila ci tu as une solution

merci beaucoup
_______________________
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 15 Sep 2014 - 10:32    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Bonjour,

Cela va être difficile car je n'ai plus d'Android. De plus ce menu n'est pas conçu pour.
Par contre, pour réduire la largeur du menu afin qu'il soit "compatible" avec toutes les résolutions d'écran, j'ai donné une solution dans le tuto.

Bonne semaine.
_______________________
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 24 Oct 2014 - 09:40    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

bonjour

est il possible d'avoir un couleur uni sur la barre background ?
pour les bouton j'ai trouve cool
merci de la 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: Ven 24 Oct 2014 - 13:27    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Bonjour,

Oui tout à fait !

Dans "rotormanmenu.css" que vous aurez sauvegardé, cherchez ceci :

Code: Sélectionner - Agrandir

#menu {background:#01B0F0;background:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;width:100%; height:40px;color:#fff;font-size:18px; box-shadow:0 6px 30px rgba(0,0,0,0.4)} 

Soit vous supprimez ce code, soit vous le neutralisez comme ceci :


 
Code: Sélectionner - Agrandir
 /*************
#menu {background:#01B0F0;background:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;width:100%; height:40px;color:#fff;font-size:18px; box-shadow:0 6px 30px rgba(0,0,0,0.4)}
*****************/


A la place, si vous le supprimez, ou juste à la suite, mettez ceci :

Code: Sélectionner - Agrandir

 #menu {background:#01B0F0;}

J'ai mis le menu en bleu, capture d'écran pour vous montrer :



Remplacez le "#01B0F0;" par la couleur que vous désirez.

Sauvegardez le template et rafraichissez l'index de votre forum. La barre du menu aura changé et aura la couleur que vous aurez choisi.

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 :
Kyosuke (24/10/14), kieffer (24/10/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: Ven 24 Oct 2014 - 22:02    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

bonsoir
oups cela marche pas vraiment voila le résultat



mon menu CSS

Code: Sélectionner - Agrandir
 /******************************************/
/******** BARRE MENU ROTORMAN ************/
/****************2014*********************/
/*****************************************/

/*------Container qui permet de placer les boutons sur la barre
---------------------------------------------------------------*/

#conta{position:relative;z-index:20;width:100%;margin:0 auto;padding-top:3px}

/*--Barre dégradé fond bleu
---------------------------*/

/***************
#menu {background:#01B0F0;background:-moz-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#01B0F0),color-stop(100%,#495CFF));background:-webkit-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-o-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:-ms-linear-gradient(top,#01B0F0 0%,#495CFF 100%);background:linear-gradient(to bottom,#01B0F0 0%,#495CFF 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01B0F0',endColorstr='#495CFF',GradientType=0);position:relative;margin:auto;padding:auto;width:100%; height:40px;color:#fff;font-size:18px; box-shadow:0 6px 30px rgba(0,0,0,0.0)}
***************/

 #menu {background:#000066;}

/*----Composition du menu sur la barre
--------------------------------------*/

#nav {padding:0; margin:0; list-style:none; height:38px;position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

/*-- Position des boutons sur la barre des menu --*/

#nav li.top {display:block; float:left; height:38px;} 

/*-- Couleur, taille, police des boutons --*/ 
                     
#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;}

/*-- Position de l'ensemble --*/

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px;}
 
/*-- Images des boutons qui apparaissent au passage de la sourie --*/   
                           
#nav li:hover a.top_link {color:#000000; background: url(http://img.xooimage.com/files110/d/9/f/test7bis-483a770.png) no-repeat;}
#nav li:hover a.top_link span {background:url(http://img.xooimage.com/files110/c/8/a/test7bis1-483a780.png) no-repeat right top;} 
#nav li:hover a.top_link span.down {background:url(http://img.xooimage.com/files110/c/8/a/test7bis1-483a780.png) no-repeat right top;}

/*-- Position des fenêtres qui affichent les sous-menus -- Ne pas toucher --*/

#nav li:hover {position:relative; z-index:200;}

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

#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 ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:300px; top:-4px; background: #E8EAEC; padding:3px; border:1px solid #000; white-space:nowrap; width:300px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

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

 

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

Re,

Pour le design de votre forum cela ne rend pas vraiment bien c'est clair. Je me suis permis d'aller voir votre forum, le menu est beau tel que vous l'avez fait. Enfin, ce que je pense. Smile

Si vraiment vous désirez enlever l'effet 3D du menu, tentez ceci :

Code: Sélectionner - Agrandir

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

Vous aurez votre menu en bleu foncé et vos boutons alignés.



Et avec un onglet ouvert :





Bonne nuit.
_______________________
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 (24/10/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: Ven 24 Oct 2014 - 23:17    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

finalement j'ai joué avec ton menue dégradé mais cela peur servir à d'autres merci "MAITRE"
_______________________
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: Ven 24 Oct 2014 - 23:27    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Re,

J'ai vu et c'est un très bon travail. Jolie menu, bravo ! Smile

Bonne nuit 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
Les membres suivants remercient RotorMan pour ce message :
kieffer (24/10/14)


Forum
Auteur Message
Contenu Sponsorisé





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

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