Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

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
0 vote

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.

 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 :

 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

Toute information relative à un établissement s’obtient en sélectionnant son nom dans le menu déroulant ou sur la carte.




 Sources

  • 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 !