It is currently Tue 27 Sep 2016 - 14:06 - 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
kieffer


Joined: 12 Nov 2009
Posts: 411

PostPosted: Fri 23 May 2014 - 14:27    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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

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

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
_______________________
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 (23/05/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 26 Jul 2014 - 09:50    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
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 26 Jul 2014 - 15:31    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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
_______________________
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 26 Jul 2014 - 20:48    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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


Offline
Membre

Joined: 10 Dec 2008
Posts: 83
Point(s): 83
Moyenne: 1.00

PostPosted: Mon 8 Sep 2014 - 22:51    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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 .... 
Following members like this message:
RotorMan (10/09/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: Wed 10 Sep 2014 - 18:18    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

le_tcho wrote:
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
Author Message
le_tcho
Membre


Offline
Membre

Joined: 10 Dec 2008
Posts: 83
Point(s): 83
Moyenne: 1.00

PostPosted: Wed 10 Sep 2014 - 23:21    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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

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

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.
_______________________
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 24 Oct 2014 - 09:40    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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

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
_______________________
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:
Kyosuke (24/10/14), kieffer (24/10/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: Fri 24 Oct 2014 - 22:02    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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

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.
_______________________
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 (24/10/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: Fri 24 Oct 2014 - 23:17    Post subject: [Tutoriel] Menu style dropdown tout en css + menu responsive Reply with quote

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

Re,

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

Bonne nuit 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.
Following members like this message:
kieffer (24/10/14)


Forum
Author Message
Contenu Sponsorisé





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

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