Débuter sur iWeb : Un menu en accordéon

Un menu en accordéon

3 févr. 10

Il s’agit d’adapter un menu en accordéon
du site dynamicdrive.com au contraintes
imposées par les fragments HTML d’iWeb

Allez sur cette page du site dynamicdrive.com

Télécharger :

1. le fichier ddaccordion.js

(clic droit > enregistrer le fichier lié sous... ou Enregistrer le fichier lié dans «...»

2. les 3 images nécessaires pour ce menu ( par simple glisser-déposer):

3. Ne copier pas le code HTML «Full HTML Source» donné sur cette page. Malheureusement il n’est ni adapté à l’utilisation d’iWeb, ni à la langue française (les caractères accentuées ne seront pas pris en compte).

C’est pour cela que j’ai édité le code de la page et je vous propose donc de télécharger ce fichier ici : menu.html.zip

Et dézippez-le.

4.Mettez dans un même dossier le fichier ddaccordion.js, les 3 images et la page menu.html
5. nommez ce dossier d’un nom simple par ex. menu (éviter les espaces les accents les caractères de ponctuation dans le nom de ce dossier)
6.il va falloir éditer cette page menu.html pour y mettre vos liens (je ne vais pas l’expliquer maintenant , pour des raisons pratique j’explique cela plus bas dans le chapitre 3 : 3. Editer la page menu.html)
7.Mettez ce dossier menu sur votre serveur, par ex. à côté de la page index.html et de votre dossier site généré par iWeb
8.Récupérer par déduction l’adresse de votre page menu.html : cela correspond à l’arborescence des dossiers sur votre serveur :

Ex. 1 : si sur mobileMe vous avez mis le dossier menu par simple glisser-déposer depuis le Finder vers le dossier «Sites» ( qui se trouve là idisk > Web > Sites *) de votre iDisk, l'adresse de votre page menu.html sera :
http://web.me.com/votrepseudo/menu/menu.html
* à ne pas confondre avec l’autre dossier Sites de l’iDisk qui se trouve là :
iDisk > Sites

Ex. 2 : sur un FTP avec un nom de domaine, placer ce dossier menu à l’aide d’un client FTP * (correctement configuré) à la racine de votre FTP (généralement cette racine est un dossier au nom de web, www ou pubic_html
http://www.votrenomdedomaine.com/menu/menu.html
* Ex.de client FTP : Cyberduck, Transmit, ForkLift, FileZilla etc.
9.Vous avez l’adresse de votre page menu.html et vous avez vérifier qu’elle était correcte
vous pouvez ajouter le code suivant dans un fragment HTML

<script language="JavaScript">
window.location="http://www.votrenomdedomaine.com/menu/menu.html";
</script>

Remplacer dans le code à coller l’adresse http://www.votrenomdedomaine.com/menu/menu.html par la véritable adresse de votre page menu.html

Malheureusement vous n’allez pas avec ce code visualiser le menu dans iWeb il va falloir tatonner pour donner les bonnes dimensions à votre widget pour qu’il affiche correctement le menu et ceci dans sa plus grande hauteur possible

Ouvrez la page menu.html avec un éditeur de texte adapté au code HTML comme Smultron qui a l’avantage d’être gratuit (éviter TextEdit)

le code HTML du menu est compris

entre la ligne 106 (<div class="arrowlistmenu">) et

la ligne 140 (</div>)

chaque panneau dépliable correspond au code suivant (1)

[...]

</ul>

à l’intérieur de ce code on trouve :

Ce code correspond au titre du panneau (2), remplacer [...] donc par le votre. Sur la page

que vous téléchargerez cela correspond à Catégorie 1, Catégorie 2 etc.

En dessous on trouve une liste (<ul></ul>)

[...]

</ul>

Entre les lignes <ul class="categoryitems"> et </ul> suivante, sur chaque ligne de la liste (<li></li>) se trouve le code des différentes liens (<a></a>) , chaque code de liens se présente comme ceci (3):

A la place de Lien (4) mettez le titre que vous souhaitez qui apparaisse dans votre menu.
A la place de http://www.adressedevotrelien (5) mettez l’adresse de la page que votre lien va ouvrir.

targert="_top" permet d’ouvrir votre lien dans la même fenêtre de votre navigateur ( si ce déterminant n’était pas présent le lien s’ouvrirait en lieu et place du widget fragment HTML seulement).

Si vous voulez que votre lien s’ouvre dans une nouvelle fenêtre alors remplacez targert="_top" par targert="_blank"

Mettez autant de ligne de liens que vous voulez : rajoutez-en ou enlevez-en.

Le code suivant est situé entre la ligne 138 et 139 (6)

<div>ce texte est visible</div>

il correspond à un panneau non repliable dont le contenu est toujours visible (7). Si vous ne voyez l’utilité d’avoir un tel panneau, effacez ces deux lignes.