Un menu stylé dock en ajax pour votre theme xoops

// septembre 3rd, 2007

A la demande d’utilisateur du cms xoops voici un tutoriel sur l’installation d’un menu dock.

Qu’est ce que interface.js ?

C’est un script en ajax qui vous permettra d’utiliser un menu dock sur votre site

Exemple sur vistaide:

Pour commencer télécharger ce script ajax avec les images et le interface.js et jquery.js
attention: ce tutoriel et pour un thème sur une base du gabari morphogénésis

1ére étape appel du script.

ouvrer votre théme.html avec votre éditeur favoris et inserer ces deux lignes entre <head> et </head>

<script type="text/javascript" src="<{xoAppUrl /jseffects/jquery.js}>"></script>

<script type="text/javascript" src="<{xoAppUrl /jseffects/interface.js}>"></script>

2éme étapes css du script.

ouvrez votre style.css de votre théme avec votre éditeur ou bloc note et ajouter ces lignes :

/* dock - top */

.dock {

 position: relative;

 height: 50px;

 text-align: center;

 background: url(images/dock-bg2.gif);

 background-repeat: repeat-x;

}

.dock-container {

 position: absolute;

 height: 50px;

 background: url(images/dock-bg2.gif);

 padding-left: 20px;

}

a.dock-item {

 display: block;

 width: 40px;

 color: #000;

 position: absolute;

 top: 0px;

 text-align: center;

 text-decoration: none;

 font: bold 12px Arial, Helvetica, sans-serif;

}

.dock-item img {

 border: none;

 margin: 5px 10px 0px;

 width: 100%;

}

.dock-item span {

 display: none;

 padding-left: 20px;

}

3éme étapes modification du globalnav.html .

créer un nouveau fichier globalnav.html avec votre éditeur et ajouter ces lignes :

<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>css Dock Menu</title>

</head>

<body>

<!–top dock –>

<div class=”dock” id=”dock”>

  <div class=”dock-container”>

  <!– menu en mode anonyme –>

   <a class=”dock-item” href=”<{xoAppUrl}>”><

img src="<{xoAppUrl /}>images/home.png" alt="Retour a l'accueil" />

<span>Accueil</span></a>

<{if !$xoops_isuser}>

   <a class="dock-item" href="<{xoAppUrl modules/news/}>">

<img src="<{xoAppUrl /}>images/news.png" alt="Articles,astuces,tutoriaux" />

<span>Articles</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/weblinks/}>">

<img src="<{xoAppUrl /}>images/links.png" alt="annuaire lien en dur” />

<span>annuaire</span></a>

<a class=”dock-item” href=”<{xoAppUrl modules/xoopspoll/}>”>

<img src="<{xoAppUrl /}>images/polls.png" alt="Sondage" />

<span>Sondage</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/xfguestbook/}>">

<img src="<{xoAppUrl /}>images/guestbook.png" alt="livre d'or" />

<span>Livre d'or </span></a>

   	  <a class="dock-item" href="<{xoAppUrl backend.php}>">

<img src="<{xoAppUrl /}>images/rss.png" alt="rss" />

<span>RSS</span></a>

 <a class="dock-item" href="<{xoAppUrl modules/contact/}>">

<img src="<{xoAppUrl /}>images/contact.png" alt="Nous contactez" />

<span>Contact</span></a>

 <{else}>

 <!-- menu en mode enregistré -->

   	  <a class="dock-item" href="<{xoAppUrl modules/news/}>">

<img src="<{xoAppUrl /}>images/news.png" alt="Articles,astuces,tutoriaux" />

<span>Articles</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/newbb/}>">

<img src="<{xoAppUrl /}>images/forum.png" alt="Forum" />

<span>Forum</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/extgallery/}>">

<img src="<{xoAppUrl /}>images/wallpaper.png" alt="fond d'écran" />

<span>Fond d'écran</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/wfdownloads/}>">

<img src="<{xoAppUrl /}>images/download.png" alt="télèchargement" />

<span>Télèchargement</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/weblinks/}>">

<img src="<{xoAppUrl /}>images/links.png" alt="annuaire lien en dur” />

<span>annuaire</span></a>

<a class=”dock-item” href=”<{xoAppUrl modules/xoopspoll/}>”>

<img src="<{xoAppUrl /}>images/polls.png" alt="Sondage" />

<span>Sondage</span></a>

   <a class="dock-item" href="<{xoAppUrl modules/xfguestbook/}>">

<img src="<{xoAppUrl /}>images/guestbook.png" alt="livre d'or" />

<span>Livre d'or </span></a>

   <a class="dock-item" href="<{xoAppUrl modules/sitemap/}>">

<img src="<{xoAppUrl /}>images/sitemap.png" alt="Plan du site" />

<span>Site map</span></a>

   <a class="dock-item" href="<{xoAppUrl chat/flashchat.php}>">

<img src="<{xoAppUrl /}>images/chat.png" alt="t'chatez en direct" />

<span>T'chat</span></a>

   	  <a class="dock-item" href="<{xoAppUrl backend.php}>">

<img src="<{xoAppUrl /}>images/rss.png" alt="rss" />

<span>RSS</span></a>

  	  <a class="dock-item" href="<{xoAppUrl modules/contact/}>">

<img src="<{xoAppUrl /}>images/contact.png" alt="Nous contactez" />

<span>Contact</span></a>

   <{if $xoops_isadmin}>

   <!-- lien supplémentaire si je suis administrateur -->

<a class="dock-item" href="<{xoAppUrl modules/istats}>">

<img src="<{xoAppUrl /}>images/stats.png" alt="statistiques" />

<span>stats</span></a>

<a class="dock-item" href="<{xoAppUrl modules/myReferer}>">

<img src="<{xoAppUrl /}>images/referer.png" alt="Administration" />

<span>referants</span></a>

  <a class="dock-item" href="<{xoAppUrl admin.php}>">

<img src="<{xoAppUrl /}>images/admin.png" alt="Administration" />

<span>Admin</span></a>

  <{/if}>

  <{/if}>

  </div>

</div>

<!--dock menu JS options -->

<script type="text/javascript">

$(document).ready(

 	function()

 	{

 		$('#dock').Fisheye(

 			{

 				maxWidth: 50,

 				items: 'a',

 				itemsText: 'span',

 				container: '.dock-container',

 				itemWidth: 40,

 				proximity: 90,

 				halign : 'center'

 			}

 		)

}

 );

</script>

</body>

4éme étape transfert sur votre ftp.

Envoyer les images du dossier vers le dossier images qui ce situe a la racine de votre site.
Transférer les fichier jquery.js et interface.js dans le dossier jseffects qui ce trouve a la racine de votre site(si vous n’utilisez aucun package jseffects créer un dossier jseffects a la racine de votre site xoops).
Remplacer le fichier globalnav.html par celui que vous venez de créer (ce fichier ce trouve dans le répértoire de votre théme).
Transferer votre style.css modifier dans le répertoir de votre théme.
Transferer le fichier théme.html par celui que vous avez modifier dans le répertoir de votre théme.
Vous pouvez voir un exemple en action sur mon site vistaide

Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.

Tagged Ajax, Script gratuit - ressources, Design, Programmation

6 Responses to “Un menu stylé dock en ajax pour votre theme xoops”

admin Says:
septembre 4th, 2007 at 18:25
merci pour ce tutorial. je vais essayer de voir pour en refaire un mais cette fois pour toute les plateforme et pas que xoops
grosdunord Says:
septembre 5th, 2007 at 13:34
de rien avec plaisir
pour les autres plateforme ce n’est pas trés compliquer, il faut toujours faire l’appel des script dans le théme.html de votre site et inclure les css dans le style.css de ce théme en question ensuite reste a mettre en place les lignes pour votre menu
misterdream78 Says:
septembre 11th, 2007 at 16:55
Trop bien ce petit menu ^^

Pour ma futur version de cpourgolri (qui ne sera pas sous xoops) çà serait parfait ^^
Crazy Says:
septembre 29th, 2007 at 9:09
Je suis en train de terminer une adaptation pour wordpress de ce menu
Design Creation Blog pour webmaster » Intégration Menu Dock dans Wordpress Says:
septembre 29th, 2007 at 15:42
[…] à cet article et devant l’intêret commun, je me suis pencher sur une adaptation d’un menu dock en […]
kawaz Says:
novembre 6th, 2007 at 0:12
Le menu est super sur la démo, mais il n’y a pas les scripts ajax dans le package que l’on télécharge (interface.zip), il n’y a que les images et le fichier globalnav.html ?

Videos humour sexy sport extreme

Un menu stylé dock en ajax pour votre theme xoops

// septembre 3rd, 2007

6 Responses to “Un menu stylé dock en ajax pour votre theme xoops”

Leave a Comment

Design Creation Blog pour webmaster

» Programmation (xhtml, css, php, ruby, RoR, ajax …) référencement, actualité du webmaster, design, photoshop, tuto, ressources ….

Derniers sites web de l'annuaire!

Wallpaper

Sponsor

Pages

Articles récents

Catégories

Commentaires récents

Archives

Méta

Blogoliste

UserOnline

Référencement