1 Quesako

L'astuce consiste ici à associer du code JAVASCRIPT aux balises de listes HTML. Voici par exemple une telle balise de cette page (générée par LATEX2HTML).

<!--Table of Contents-->
<UL CLASS="TofC">
<LI><A NAME="tex2html10"
  HREF="page.html#SECTION00020000000000000000">1 Quesako</A>
</UL>

Il faut compléter la page HTML 2.3 et lui ajouter un fichier .css 2.2 et deux fichier .js 2.1 :

Par exemple, ici les ajouts sont fait par le makefile suivant :

all:				\
				page.html \
				addCss \
				addJs
	: $@ done

addCss:				menu.css	
	@grep -q menu $(sourceRootDirectory)/page.css \
        || cat menu.css >> $(sourceRootDirectory)/page.css

addJs:				dynMenu.js \
				browserdetect.js 
	@grep -q 'src_="dynMenu' $(sourceRootDirectory)/page.html \
        || sed -i -e 's|</HEAD>\
                       |<script type="text/javascript" src_="dynMenu.js"></script>\n\n\
                        <!-- détéction du navigateur -->\n\
                        <script type="text/javascript" src="browserdetect.js"/></script>\n\n\
                        </HEAD>\
                       |' $(sourceRootDirectory)/page.html
	@grep -q '<UL_ id="menu" CLASS="TofC">' $(sourceRootDirectory)/page.html \
        || sed -i -e 's|<UL CLASS="TofC">\
                       |<UL_ id="menu" CLASS="TofC">\
                       |' $(sourceRootDirectory)/page.html
	@grep -q 'init_Menu();' $(sourceRootDirectory)/page.html \
        || sed -i -e 's|</BODY>\
                       |\n<script type="text/javascript">\ninit_Menu();\n</script>\n\n</BODY>\
                       |' $(sourceRootDirectory)/page.html

rq: la sauts de ligne ci-dessus ne passent pas ; j'ai également ajouté des underdcores (_) pour tromper grep.

2 Menu horizontal

2.1 JAVASCRIPT

Il faut insérer 2 fichiers JAVASCRIPT dans l'arborescence. Le JAVASCRIPT marche grâce à l'identifiants id='menu' .

2.1.1 browserdetect.js

fichier browserdetect.js

function BrowserDetectLite() {
...
}

var browser = new BrowserDetectLite();

2.1.2 dynMenu.js

fichier dynMenu.js

Le JAVASCRIPT retrouve la balise identifiée par le tag ``menu'' 2.3.2.

function initMenu()
{
  if ( browser. ...
  var menu = document.getElementById('menu'); // the root element

  menu.className='TofC';
...

2.2 CSS

Le CSS enrichie la classe TofC (``Table of Content'' générée ici par LATEX2HTML 1) : On compléte la CSS :

.TofC{               ...  
.TofC ul{            ...
.TofC li ul{         ...
.TofC li li ul{      ...
.TofC li{            ...
.TofC li li{         ...
/* correct a little IE bug */
* html .TofC li li{  ...
.TofC a{             ...
.TofC a:hover{       ...
/* for a mozilla better display with key nav */
.TofC a:focus{       ...
a.linkOver{          ...

menu.css

2.3 HTML

Enfin, il faut compléte le HTML :

2.3.1 <Head>

Déclaration des fonction JAVASCRIPT :

<HEAD>
...
<script type="text/javascript" src='dynMenu.js'></script>

<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"/></script>

</HEAD>

2.3.2 <UL>

On ajoute un identifiant à la première balise UL pour permettre au JAVASCRIPT de sélectionner le sommet du menu 2.1.2 :

============================
<UL CLASS="TofC">            initial
----------------------------
<UL id='menu' CLASS="TofC">  modifié
============================
<LI><A NAME="tex2html24"
  HREF="page.html#SECTION00020000000000000000">1 Quesako</A>
<LI><A NAME="tex2html25"
  HREF="page.html#SECTION00030000000000000000">2 Menu horizontal</A>
<UL>
<LI><A NAME="tex2html26"
  HREF="page.html#SECTION00031000000000000000">2.1 JAVASCRIPT</A>
<UL>
<LI><A NAME="tex2html27"
  HREF="page.html#SECTION00031100000000000000">2.1.1 browserdetect.js</A>
<LI><A NAME="tex2html28"
  HREF="page.html#SECTION00031200000000000000">2.1.2 dynMenu.js</A>
</UL>
...
</UL>
</UL>

2.3.3 <Body>

lancement du code JAVASCRIPT :

</BODY>
...

<script type="text/javascript">
initMenu() ;
</script>

</BODY>

3 Menu vertical

Il n'y a qu'a changer la CSS.

3.1 CSS

menu.css

Home

This document is also available in PDF and PostScript format.

2018-12-06