Fork me on GitHub

Un menu style " DOCK " pour Xoops
25
200706
Novembre
  marcetmaud Thème 7995
Thème

Salut a vous tous,
Suite a la lecture d'un post de grosdunord, j'ai voulu adapter un menu style "DOCK" sur mon site (Menu en image en haut du site)..
Open in new window
Comme ça n'a pas été de tout repos, je vous livre ici la marche a suivre.
Ce dock est vraiment très sympa et simple a personnaliser. De plus son installation est relativement simple, surtout si votre thème est basé sur Morphogenesis.
Donc, pour faire au plus simple, je l'ai intégré dans morphogenesis v2.01 Ci-joint.( thème : Morpho Dock )
Pour l'installation du thème, suivre les étapes normales d'installation d'un thème morphogenesis.

Voici les étapes de l'intégration du menu au thème (Déjà réalisé dans le thème ci-joint).
1° : Ajouter les fichiers interface.js & jquery.js dans le répertoire " jseffects " à la racine du site.
2° : Modifier le globalnav.html (ou le créer dans le répertoire du thème)
3° : Ajouter les appels pour "interface.js & jquery.js" dans le theme.html (y créer l'include pour globalnav.html si votre thème n'est pas basé sur morphogenesis)
4° : Créer le répertoire mon_ theme/img/imgdock puis y uploader les images du menu.
5° : Ajouter la class .dock (a partir de la ligne 437) dans le style.css

Le theme est livré avec par défaut une version "JPG" testée sur ie6,7 & Firefox.
Un globalnav pour png ainsi que des images au format png est aussi inclus, mais je n'ai pas réussi a le faire tourner sous IE 6. Sûrement qu'un de vous trouveras la solution.
La personnalisation du Dock s'effectue dans le globalnav (en bas ) pour ce qui est des tailles des images ainsi que pour les adresses & noms des liens.
La couleur et la police se modifie dans le style.css.
PS: soyez indulgent, c'est mon premier article sur FR XOOPS.
A(dishatz)+
Note: 5.00 (4 votes) - Noter cet article -

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Régulier
Inscrit le: 29/03/2007
De:
Contributions: 343
flaggada Posté le: 07/11/2007 10:30  Mis à jour: 07/11/2007 10:30
 Re: Un menu style " DOCK " pour Xoops
très joli, ça me donne des idées.

Merci pour ton travail
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 07/11/2007 19:13  Mis à jour: 07/11/2007 19:13
 Re: Un menu style " DOCK " pour Xoops
Merci a vous.
je pourrais faire le même tuto pour les menus déroutants si ça intéresse du monde.
A(dishatz)+
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 07/11/2007 21:43  Mis à jour: 07/11/2007 21:43
 Re: Un menu style " DOCK " pour Xoops
ok, j'm'y jette....
A(dishatz)+
Régulier
Inscrit le: 04/09/2005
De: Belgique - Villers la ville
Contributions: 384
merentar Posté le: 08/11/2007 14:39  Mis à jour: 08/11/2007 14:39
 Re: Un menu style " DOCK " pour Xoops
Félicitations!

ça m'intéresse aussi...

Merci pour ton partage...
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 08/11/2007 20:20  Mis à jour: 08/11/2007 20:20
 Re: Un menu style " DOCK " pour Xoops
Voila,
Je vient de poster l'article.
en attendant qu'il soit publié, vous pouvez télécharger l'archive ICI
A(dishatz)+
Aspirant
Inscrit le: 04/02/2003
De: la mer
Contributions: 92
befamao Posté le: 08/11/2007 22:08  Mis à jour: 08/11/2007 22:08
 Re: Un menu style " DOCK " pour Xoops
Chapeau bas !! c'est très réussi !!

On en redemande !!!
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 08/11/2007 22:12  Mis à jour: 08/11/2007 22:12
 Re: Un menu style " DOCK " pour Xoops
restez a l'écoute, je vous prépare une petite surprise....

A(dishatz)+
Régulier
Inscrit le: 27/03/2005
De: Pen ar bed
Contributions: 147
vinyz Posté le: 16/11/2007 11:13  Mis à jour: 16/11/2007 11:13
 Re: Un menu style " DOCK " pour Xoops
Super boulot l'ami !

respect ! et merci de nous faire partager ton travail.
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 16/11/2007 19:40  Mis à jour: 16/11/2007 19:40
 Re: Un menu style " DOCK " pour Xoops
Merci vinyz.

Je vient de mettre une version png (s'affiche mal dans ie 6) en Démo sur Xoops Menu
A(dishatz)+
Régulier
Inscrit le: 07/06/2005
De: 74 Haute Savoie (FRANCE)
Contributions: 141
FlippEric Posté le: 18/11/2007 15:09  Mis à jour: 18/11/2007 15:09
 Re: Un menu style " DOCK " pour Xoops
FA..BU..LEUX !!!!!!!

Y a longtemps que j'attendais ce genre de Menus.

Mille Mercis pour ton travail !
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 18/11/2007 18:46  Mis à jour: 18/11/2007 18:46
 Re: Un menu style " DOCK " pour Xoops
a vot' service m'sieurs dames.
Newbie
Inscrit le: 04/03/2006
De:
Contributions: 15
goki Posté le: 19/11/2007 22:09  Mis à jour: 19/11/2007 22:09
 Re: Un menu style " DOCK " pour Xoops
Pour répondre à la question concernant les png non transparents sous IE6 c'est normal, cependant il existe des scripts qui fonctionnent et je vais vous donner celui que j'utilise un peu partout. (je ne me souvient plus exactement de l'endroit où je l'ai trouvé cependant).

1- créer donc un fichier " png_transparent.js " (dans votre dossier js ou jseffect à la racine du site) avec comme contenu :

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
   var img = document.images[i]
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText  
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
   var strNewHTML = "<span " + imgID + imgClass + imgTitle
   + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
      + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
   + "(src='" + img.src + "', sizingMethod='scale');"></span>"  
   img.outerHTML = strNewHTML
   i = i-1
      }
      }
   }
window.attachEvent("onload", correctPNG);


2- ensuite ajouter entre [head][/head] dans le theme.html :

<script language="JavaScript" type="text/javascript" src="<{$xoops_url}>/js/png_transparent.js"></script>


3- dernier truc ajouter un fichier " transparentpixel.gif " de dimension carré 1px dans le repertoire js ou jseffect (suivant votre choix en 1).

Pour moi ça fonctionne ...
Amusez vous bien !

Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 20/11/2007 22:52  Mis à jour: 20/11/2007 22:52
 Re: Un menu style " DOCK " pour Xoops
salut goki,
l'équivalent de ce script est déja présent dans le theme.html de Mor.pho.GEN.e.sis.
Le défaut d'affichage sur ie6 n'est actif que sur certains modules. sur la page d'accueil, newbb ou sitemap, les png s'affichent correctement...
A(dishatz)+
Newbie
Inscrit le: 04/03/2006
De:
Contributions: 15
goki Posté le: 21/11/2007 05:10  Mis à jour: 21/11/2007 05:10
 Re: Un menu style " DOCK " pour Xoops
Oops désolé je ne savais pas ça !

Enfin ça peut toujours servir ...
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 21/11/2007 07:10  Mis à jour: 21/11/2007 07:10
 Re: Un menu style " DOCK " pour Xoops
Citation :
Un globalnav pour png ainsi que des images au format png est aussi inclus, mais je n'ai pas réussi a le faire tourner sous IE 6

Il faut dire que je n'ai pas été très généreux en explications...
A(dishatz)+
Aspirant
Inscrit le: 15/05/2006
De:
Contributions: 31
sam31 Posté le: 22/11/2007 12:07  Mis à jour: 22/11/2007 12:07
 Re: Un menu style " DOCK " pour Xoops
Bonjour à tous,
J'ai essayé de mettre en place ce menu sur mon site : www.toulousasso.org
N'hésitez pas à me faire part de vos remarques ... en étant indulgent, je ne suis pas un pro du tout

En tout cas merci beaucoup pour votre travail !

---------------------------
Sam, Web'Hamster de Toulous'Asso
Le portail associatif toulousain
www.toulousasso.org
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 23/11/2007 18:21  Mis à jour: 23/11/2007 18:21
 Re: Un menu style " DOCK " pour Xoops
Salut cher voisin ,
Vu du Béarn, ton site est nickel. Ça bouge à Toulouse...
as tu essayé le fond du menu de la même couleur que ton site.? c'est juste une idée, c'est pas dit que ça rende mieux que comme c'est maintenant.
Bravo...
A(dishatz)+
Aspirant
Inscrit le: 15/05/2006
De:
Contributions: 31
sam31 Posté le: 27/11/2007 10:28  Mis à jour: 27/11/2007 10:28
 Re: Un menu style " DOCK " pour Xoops
Merci cher voisin !
Je viens de mettre le fond du menu de la même couleur que le site .. c'est vrai que ça rend mieux je pense.
En tout cas merci bien pour tout le travail fait autour de Xoops, ça fait bientôt 4 ans que j'ai créé ce site (www.toulousasso.org) avec Xoops, et franchement ça m'a beaucoup aidé, sachant que je ne suis pas du tout un pro et que je me suis "formé" sur le tas ... comme quoi on peut faire vraiment beaucoup de choses avec cet outil.

Sam, Web'Hamster de Toulous'Asso
www.toulousasso.org
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 31/12/2007 12:05  Mis à jour: 31/12/2007 12:05
 Re: Un menu style " DOCK " pour Xoops
salut sam31,
Je vient de refaire un tour sur ton site.
Ca fait un super effet avec les cadre en perspective. Beau boulot...
A(dishastz)+
Aspirant
Inscrit le: 15/05/2006
De:
Contributions: 31
sam31 Posté le: 31/12/2007 16:17  Mis à jour: 31/12/2007 16:17
 Re: Un menu style " DOCK " pour Xoops
Merci bien !
Xoops accro
Inscrit le: 04/02/2003
De: Le Mans
Contributions: 12273
Christian Posté le: 31/12/2007 17:41  Mis à jour: 31/12/2007 17:41
 Re: Un menu style " DOCK " pour Xoops
J'aime beaucoup la présentation de ton site, sam31.

Bravo
Aspirant
Inscrit le: 10/01/2008
De:
Contributions: 86
theclaw Posté le: 17/01/2008 16:08  Mis à jour: 17/01/2008 16:08
 Re: Un menu style " DOCK " pour Xoops
Bonjour,

j'espère que ce fil est toujours suivi :D

J'essaye d'intégrer ce menu Dock à mon site en construction. J'ai un peu galéré au début parce que je n'y connais (plus) rien en programmation. Finalement il est intégré mais il se met en vertical au lieu d'horizontal. Quelqu'un aurait une idée ? Je l'intègre à mon thème (karate_redux_blue).

Merci :)
Régulier
Inscrit le: 16/09/2006
De: Au pays de l'ours.
Contributions: 387
marcetmaud Posté le: 17/01/2008 20:06  Mis à jour: 17/01/2008 20:16
 Re: Un menu style " DOCK " pour Xoops
Salut theclaw,
le plus simple serais que tu démarre un sujet ICI
Moi ou d'autres se ferons un plaisir de t'aider.
A(dishatz)+

EDIT : je vois que tu as ouvert une discution ICI
...en avant...
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

30 Personne(s) en ligne (2 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 30 | Plus ...