[RESOLU] Menu déroulant pour nos rubriques

[Dyonisos]

Bonjour,
Je suis un petit nouveau et néanmoins ce que l'ont pourrait appeler un informaticien averti. Je suis toutefois autodidacte en la matière et bien entendu j'ai des lacunes...
Je viens de créer un site scientifique chez Jimdo, qui de l'avis de mes premiers lecteurs est joli, attractif et fonctionnel... Je suis donc assez fier de moi.
Par contre mon associé (scientifique de formation tout comme moi), qui maîtrise très mal le graphisme de sites web, m'a demandé si je pourrais placer sur notre site, un menu déroulant qui renverrait nos lecteurs vers les différentes rubriques...
Hélas, malgré la lecture de la procédure HTLM pour y parvenir, je ne m'en sorts pas ! Impossible de rendre mon menu déroulant fonctionnel !

Alors voici ma doléance...
Une âme charitable accepterait-elle de réaliser cette manipulation à ma place ? Auquel cas je lui ouvrirait l'accès administrateur le temps du "travail".

D'avance merci !!!

Le lien de mon site :   http://planete-sciences.jimdo.com/

Amitiés,
Dyonisos.

[FilmsdeLover]

Vous ne pourrez pas faire ce menu déroulant facilement. Il ne pourra pas être lié avec la navigation Jimdo et devra donc être codé à la main, puis inséré dans un design personnalisé, ce qui n'est pas du tout facile. Maintenant, certains des nouveaux designs de Jimdo ont des menus déroulants intégrés directement.

Donc pour faire court : si vous gardez le même design, il va falloir du temps et des connaissances HTML/CSS pour créer un design personnalisé et le menu déroulant qui va avec. Si vous changez de design pour l'un des nouveaux designs qui offrent cette possibilité, ce sera fait direct, mais il faudra sans doute revoir le design général du site.

[Dyonisos]

Merci pour cette réponse rapide !
Donc le lien internet avec tutoriel que j'avais trouvé n'est pas valable ?

Tiens d'ailleurs, je viens de me rappeler que je l'avais copié collé... Le voici... Pourrez-vous me dire s'il peut m'aider ou non ?

Bizarre quand même, en faisant la première partie, j'avais bien le menu en haut à gauche de mon site, mais impossible de terminer avec l'explication finale : ajouter un bout de code dans le Head. Cliquez donc sur "Paramètres" "modifier le head"

Cordialement.
______________________________________________

Un menu déroulant sur un site est un gain de place non négligeable et peut servir à bien des usages. Chaque ligne de la liste pointe vers un lien.
- Nous allons apprendre comment ajouter un menu déroulant comme celui-ci :

Difficulté

Ce tutoriel s'adresse aux débutants et fonctionne sur tous les sites Jimdo (Free, Pro, Business).

Procédure pas-à-pas :

1) Nous allons commencer par ajouter le menu sur une page ou dans la sidebar de votre site Jimdo. Ajoutez donc un module "Widget/HTML".

2) Le code de base de la liste défilante est le suivant :

<form><select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)" style="width: 180px; background-color: none; color: black; font-family: Verdana; font-size:12px;">
<option selected="selected" value="">Titre de la liste</option>
<option value="http://www.adressevoulue1.com/">Titre 1 du lien</option>
<option value="http://www.adressevoulue2.com/">Titre 2 du lien</option>
<option value="http://www.adressevoulue3.com/">Titre 3 du lien</option>
</select></form>

Examinons un peu les composantes de ce code :

size="1" -> Détermine la hauteur des éléments par défaut du menu. Si vous remplacez le 1 par 2, plus d'éléments apparaissent sans avoir besoin de cliquer sur la flèche.
width: 180px -> Cette partie régit la largeur du menu. 180px est adapté pour une sidebar. Essayez différentes valeurs jusqu'à trouver la bonne largeur.
background-color: none -> Il s'agit de la couleur du fond de la liste. Pour noir, mettez "black", pour rouge "red" et ainsi de suite.
color: black -> Détermine la couleur de l'écriture.
font-family: verdana -> Permet de modifier le type d'écriture.
font-size:12px -> Permet de modifier la taille de la police du menu.

Titre de la liste : Vous pouvez remplacer ce texte par ce que vous voulez. C'est ce qui apparaitra en haut du menu, par défaut.
http://www.adressevoulue.com : Remplacez ces valeurs par les adresses des liens vers lesquels vous souhaitez pointer chaque élément de la liste.
Titre 1 du lien : Remplacez ce texte par le titre qui apparaîtra dans la liste.

Pour ajouter une ligne supplémentaire, il suffit d'ajouter la ligne suivante avant la balise </select> :

<option value="http://www.adressevoulue4.com/">Titre 4 du lien</option>

3) Ce n'est pas encore fini puisque si vous cliquez sur les liens, rien ne se passe. Il faut encore ajouter un bout de code dans le Head. Cliquez donc sur "Paramètres"> "Modifier le Head".

4) Ajouter le code suivant :

<script language="JavaScript" type="text/javascript">
//<![CDATA[
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
function ChangeUrl(formulaire)
{
if (formulaire.ListeUrl.selectedIndex != 0)
{
location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
}
else
{
alert('Veuillez choisir une destination.');
}
}
//]]>
</script>

Et enregistrez votre Head. Voilà, le menu devrait désormais fonctionner !

[FilmsdeLover]

Ce tutoriel est bon pour faire un menu déroulant supplémentaire, qui ne se substitue pas à votre menu de navigation principal. Si c'est ce que vous voulez, vous pouvez très bien l'ajouter dans votre sidebar. Mais il ne supplantera pas votre menu de navigation principal, c'est juste un menu déroulant supplémentaire.

Pour la dernière étape, il faut aller dans "Paramètres" puis "Modifier le Head" et y placer le code avant d'enregistrer. Quel problème rencontrez-vous ?

[Dyonisos]

Eh bien concernant la première étape, pas de souci, le menu apparaît bien en haut à gauche de ma page principale.
Par contre message d'erreur lorsque je tente de colle le coder HTLM dans l'option "Modifier le Head" des "Paramètres".
Petite question : le code à intégrer dans "Modifier le Head", dois-je le copier coller :
1 - avant le code déjà présent
2 - Après le code déjà présent
3 - A la place du code déjà présent (en supposant bien sûr, qu'il faille supprimer ce dernier)

J'ai essayé l'option 1, puis l'option 2 sans succès (message d'erreur), par contre je n'ai pas osé supprimer le code d'origine déjà présent pour y coller le nouveau, de peur de faire une bêtise.
Peut-être mon problème vient-il d'une mauvaise manipulation liée à une des 3 options.

Merci pour votre future réponse et excusez-moi d'abuser ainsi de votre temps.

Cordialement,
Dyonisos.

[Dyonisos]

Bonjour,

Personne n'a t-il trouvé de réponse à ma question ?
Est-ce définitivement impossible d'utiliser le lien que je vous ai envoyé ?

Excusez la relance...
Amitiés,

Dyonisos.

[kofkof]

Hello Dyonisos !
J'aimerais aussi intégrer un menu déroulant sur mon site, mais sans changer de design, as-tu trouvé la solution ?
Ou quelqu'un peut-il nous aider ?

Merci d'avance et bonne année à toutes et tous !
kofkof

[Dyonisos]

Bonjour Kofkof,

Oui, j'ai parfaitement réussi à intégrer un menu déroulant sur mon site, et il fonctionne très bien. De plus il est personnalisable...
On m'avait pour ce faire, fourni ici-même et très gentiment un tutoriel très bien fait pour réaliser la manipulation.
Ce n'est pas des plus difficile, il faut juste être un peu de la partie... Mais un peu ! Moi je suis un webmaster autodidacte limite débutant, alors si j'y suis parvenu...

Je te mets le lien de mon site pour que tu regardes si le style de menu déroulant te convient et si c'est le cas je pourrai même te chercher le lien du tutoriel.
Éventuellement, je t'aiderai selon ta décision...

http://planete-sciences.jimdo.com

Bonne journée.
Dyonisos.

[kofkof]

Merci de ta réponse, Dyonisos, mais comme l'a écrit plus haut FdLover, c'est un menu déroulant supplémentaire, qui ne se substitue pas au menu de navigation principal.
Je pense que si je veux changer le menu de navigation principal pour avoir des défilants, je devrai changer de design, il y en a où le déroulant est inclu. Mais pour le moment je laisse ainsi. J'ai trop mal à la tête suite au réveillon de nouvel-an !

[Dyonisos]

Pas de souci !

A bientôt et bonne après-fêtes !

Dyonisos.

[Contenu sponsorisé]