Accueil > SPIP > Navigation dans la « Galaxie SPIP » avec la « Boussole SPIP » > Créer un « Jump Menus » ou « Drop Down Menu » dans SPIP

Créer un « Jump Menus » ou « Drop Down Menu » dans SPIP

lundi 9 janvier 2017, par François Daniel Giezendanner

Notez cet article

Méthode simple pour créer dans SPIP un menu déroulant (« Jump Menus » ou « Drop Down Menu ») en écrivant directement le code javascript + html dans le champ texte d’un article SPIP.

Sommaire

Préambule

On trouvera des applications de cette démarches dans les articles :

D’autre part la lame « Des blocs dépliables » du « plugin Couteau suisse » permet de créer en toute facilité des menus déroulants « Drop Down » très élégants.

Introduction

Vous pouvez créer un « Jump Menus » ou « Drop Down Menu » dans DreamweaverMX.

Les « Jump menus » sont créés pour regrouper les liens sur une page qui ne dispose pas de suffisamment de place.

Les « Jump menus » peuvent être utilisés en association avec d’autres outils de navigation, c’est par exemple le cas avec les images map tel que cela est utilisé dans les articles :

Exemple « d’Image Map » et de « jump menu » avec une carte des CO du canton de Genève

Exemple « d’Image Map » et de « jump menu » avec une carte des EP du canton de Genève

Programmation

Nous voulons créer un menu déroulant conduisant aux pages web officielles des cycles d’orientation du canton de Genève.

Les éléments suivants vous montrent comment créer ce type de menu dans SPIP. Procédez comme suit. Dans le champ de saisie du texte de l’article écrivez le code javascript suivant :

<script language="JavaScript">

function MM_jumpMenu(targ,selObj,restore){ //v3.0

  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

  if (restore) selObj.selectedIndex=0;

}

</script>

Puis écrivez le code HTML suivant :

<form name="theform" id="theform" method="post" action="#">

        <p>Toute information relative &agrave; un &eacute;tablissement s'obtient en s&eacute;lectionnant son nom dans le menu d&eacute;roulant ou sur la carte.</p>

        <label for="ets-select" class="txt_gras">S&eacute;lection par noms</label><br>

        <select name="etsselect" id="etsselect" onchange="MM_jumpMenu('parent',this,1)">

                <option>- Choisir un &eacute;tablissement -</option>



                <option value="http://www.ge.ch/co/contacts.asp">Direction générale - (Coll&egrave;ge des Coudriers - 4e &eacute;tage)</option>

                <option value="http://www.ge.ch/co/etablissements/aubepine.asp">CO-Aub&eacute;pine</option>

                <option value="http://www.ge.ch/co/etablissements/bois-caran.asp">CO-Bois-Caran</option>

                <option value="http://www.ge.ch/co/etablissements/bude.asp">CO-Bud&eacute;</option>

                <option value="http://www.ge.ch/co/etablissements/cayla.asp">CO-Cayla</option>



                <option value="http://www.ge.ch/co/etablissements/colombieres.asp">CO-Colombi&egrave;res</option>

                <option value="http://www.ge.ch/co/etablissements/coudriers.asp">CO-Coudriers</option>

                <option value="http://www.ge.ch/co/etablissements/drize.asp">CO-Drize</option>

                <option value="http://www.ge.ch/co/etablissements/florence.asp">CO-Florence</option>

                <option value="http://www.ge.ch/co/etablissements/foron.asp">CO-Foron</option>

                <option value="http://www.ge.ch/co/etablissements/golette.asp">CO-Golette</option>



                <option value="http://www.ge.ch/co/etablissements/gradelle.asp">CO-Gradelle</option>

                <option value="http://www.ge.ch/co/etablissements/grandes-communes.asp">CO-Grandes-Communes</option>

                <option value="http://www.ge.ch/co/etablissements/marais.asp">CO-Marais</option>

                <option value="http://www.ge.ch/co/etablissements/montbrillant.asp">CO-Montbrillant</option>

                <option value="http://www.ge.ch/co/etablissements/pinchat.asp">CO-Pinchat</option>

                <option value="http://www.ge.ch/co/etablissements/renard.asp">CO-Renard</option>



                <option value="http://www.ge.ch/co/etablissements/secheron.asp">CO-S&eacute;cheron</option>

                <option value="http://www.ge.ch/co/etablissements/seymaz.asp">CO-Seymaz</option>

                <option value="http://www.ge.ch/co/etablissements/voirets.asp">CO-Voirets</option>

                <option value="http://www.ge.ch/co/etablissements/vuillonnex.asp">CO-Vuillonnex</option>

        </select>

<hr class="clear">



</form>

Jump Menu résultant

Sources

Creating jump menus in DreamweaverMX (function MM_jumpMenu())

Jump Menus (function MM_jumpMenu())

function MM_jumpMenu() - FORUMS 01net.

HTML Forms : DROP DOWN MENU

ONLINE TOOLS : DROP DOWN MENU
This tool will let you easily create a drop-down menu.
Fill in the fields below and let this page do the javascript programming for you.
The menu supports both MSIE3+ and NS3+ browsers.
And on top of it all : It even works with frames !
Use the example below to test it for yourself !