1 le menu de la gargote au ***. 2 un menu très simple de très bon rapport qualité prix div#links...

1Editer le HTMLEcrire du code HtmlVoir les attributs de la balise

Le Menu

de la gargote au ***


Un menu très simple de très bon rapport qualité prix

div#links {position: absolute;}

div#links a {display: block;}

div#links a:hover {;}

<div id="links"> <a href="http://www.meyerweb.com/"> Home </a>

<a href="http://www.meyerweb.com/eric/css/"> Links</a>

…

</div>

plus d'info : http://meyerweb.com/eric/css/edge/popups/demo.html


les balises

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN""http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>Pure CSS Popups</title><style type="text/css"></style></head><body>

<div id="links"><a href="http://www.meyerweb.com/">Home<span> The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</span></a><a href="http://www.meyerweb.com/eric/css/">Links<span> A collection of things which interest me, and might interest you</span></a>

<a href="http://www.w3.org/">Away<span> Who knows? Could be anywhere; you clicks the link and you takes your chances!</span></a><a href="http://www.meyerweb.com/eric/">Eric<span> He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist"</span></a><a href="http://www.meyerweb.com/kat/">Kat<span> She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what <em>can't</em> she do?</span></a><a href="http://www.meyerweb.com/other/">Other<span> Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff</span></a>

</div>

<div id="content"><h1>Pure CSS Popups</h1>

<p>If you've already seen the <a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html">complexspiral demo</a>, then this page layout probably seems a bit familiar. However, this time we aren't playing around with background images, or indeed images of any kind. Instead we're creating static-text popups purely through the power of CSS. The title of the page is intentional: there is no Javascript used in this document. For that matter, there aren't any images either. And once again, there are <em>no</em> proprietary extensions being employed

here. It's all validated HTML and CSS, period, end of story.</p>

<h3>Hands-on: What to Do</h3>

<p>Any browser that does a good job of supporting positioning will get some of the stuff I did here correct, so continuing onward is probably worth it. The basic drill is this: mouse over the links on the left side of the page. Watch the space below the links. Make sure to mouse over all the links, back and forth, up and down...</p><p>Again I say it: <strong>no</strong> Javascript was used in the making of this page.</p>

<h3>What the...? You lie!</h3><p>I do not. Here's how it's done.</p><p>In every case, the "caption" text is a <code>span</code> element inside the actual hyperlinks. Here's one example from the source of this document:

</p><pre style="white-space: normal;"><a href="http://www.meyerweb.com/eric/css/">Links<span>A collection of things which interest me, and might interest you</span></a></pre><p>To prevent the text from showing up when the page loads, I have the following style:</p><pre>div#links a span {display: none;}</pre><p>So they're gone, removed entirely from the document flow. Bringing them back, then, is a simple matter of switching the <code>display</code> to <code>block</code> and positioning the element whenever the associated link is hovered over with the mouse pointer. Thus we get the first two lines of this rule:

</p><pre>div#links a:hover span {display: block; position: absolute; top: 200px; left: 0; width: 125px; padding: 5px; margin: 10px; z-index: 100; color: #AAA; background: black; font: 10px Verdana, sans-serif; text-align: center;}</pre><p>The last three lines relate to how the element will be styled when it appears, but the first two cause it to be made visible (<code>display: block;</code>) and position it appropriately.</p><p>Want to have even more fun? How about <a href="demo2.html">icons that appear on rollover</a>?</p>

<h3>A Minor Side Note</h3><p>

Notice how the hyperlinks appear to overlay the main-content border, and how that overlap really lights up when you're hovering over a link but still has a gray stripe down the middle of the overlap. That's done with nothing more complicated than a border on the hyperlinks themselves, the color and style of which change during the hover:</p><pre>div#links a:hover {color: #411; background: #AAA; border-right: 5px double white;}</pre><p>This effect works because I set up everything so the borders on the hyperlinks actually overlaps the border of the main content area. Because I'm positioning these elements using pixel measures, I can get things to line up appropriately and then style them however I like. it's a bit of a trick, of course-- by sticking to shades of gray, it's easier for me to create translucency effects. Someone with a sufficiently keen color sense could probably come up with better stuff than I did. (Like <em>not</em> putting light text on a dark background, for starters.)</p>

<h4>Jump to</h4><ul><li><a href="../index.html">css/edge home</a></li><li><a href="demo2.html">pure CSS popup images</a></li>

</ul>

</div>

</body></html>


Le top des gargotes : mais un gros avantage


Les Frames : le menu

<ul><li><a href="page.htm#mercure" target="PageDroite">Mercure</a></li>

…<li><a href="page.htm#pluton" target="PageDroite">Pluton</a></li>

</ul>

<ul><li><a href="page.htm#mercure" target="PageDroite">Mercure</a></li>

…<li><a href="page.htm#pluton" target="PageDroite">Pluton</a></li>

</ul>


La page

<tr><td colspan="2" align="center"><br><a name="venus">Vénus</a></td>

</tr>

<tr><td colspan="2" align="center"><br><a name="venus">Vénus</a></td>

</tr>


Menu simple


le styleul { list-style-type: none;font: 14px Verdana, Arial, sans-serif;}

li { margin-bottom: 5px;}

.menu a {margin: 0 2px;width: 100px; height: 20px;display: block;text-align: center;border: 1px solid gray;text-decoration: none; color: #000;background: #fff;}

.menu a:hover {background: #ccc;}

.menu a:active {background: gray;}


Remarque


C'est la couleur de fond du lien qui change.

Nous verrons que la couleur de l'élément liste peut changer et non celle du lien.

Retenez bien cette nuance. Elle permettra de changer une partie de la page au survol d'une autre partie.


code

<html><head> <title></title> <style type="text/css">ul {

list-style-type: none;font: 14px Verdana, Arial, sans-serif;}

li {margin-bottom: 5px;}

.menu a {margin: 0 2px;width: 100px; height: 20px;display: block;text-align: center;border: 1px solid gray;text-decoration: none;color: #000;background: #fff;}


.menu a:active {background: blue;}

</style></head><body><ul class="menu"> <li><a href="">Accueil</a></li> <li><a href="">Jeux</a></li> <li><a href="">Photos</a></li> <li><a href="">Contact</a></li></ul></body> </html>


Menu horizontal


Code

ul#menu li {float: left ;text-align: center ;

}

ul#menu li a{

width: 130px ;line-height: 25px ;font-size: 1.2em ;font-weight: bold ;letter-spacing: 2px ;color: indianred ;display: block ;text-decoration: none ;border-right: 5px solid #dea ;

}


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>Création d'un design étape par étape -Etape n°4 : Le titre et le menu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Language" content="fr">

<style type="text/css">body{

margin: 10px 0 ;padding: 0 ;text-align: center ;font: 0.8em "Trebuchet MS", helvetica, sans-serif ;background: indianred ;

}

div#conteneur{

width: 770px ;margin: 0 auto ;text-align: left ;border: 2px solid #ab4 ;background: #fff ;

}

h1#header{

height: 250px ;margin: 0 ;background: url(sable.jpg) no-repeat left top ;

}

h1#header a{

width: 40px ;height: 70px ;display: block ;background: url(Iceberg.gif) no-repeat ;position: relative ;left: 350px ;top: 15px ;

}

h1#header a span{

display: none ;}

ul#menu{

height: 24px ;margin: 0 ;padding: 0 ;

// background: url(sablerouge.jpg) repeat-x 0 -5px ;list-style-type: none ;

}

ul#menu li{

float: left ;text-align: center ;

}

ul#menu li a{

width: 130px ;line-height: 25px ;font-size: 1.2em ;font-weight: bold ;letter-spacing: 2px ;color: indianred ;display: block ;text-decoration: none ;border-right: 5px solid #dea ;

}

ul#menu li a:hover{

color: #dea;background: url(sablenoir.jpg) repeat-x 0 0px ;

}

div#contenu{

padding: 0 25px 0 100px ;background: url() no-repeat 15px 15px ;

}

div#contenu h2{

padding-left: 25px ;line-height: 25px ;font-size: 1.4em ;background: url(little_apple.gif) no-repeat left bottom ;color: indianred ;border-bottom: 1px solid #9b2 ;

}

div#contenu h3{

margin-left: 15px ;padding-left: 5px ;border-bottom: 1px solid #9b2 ;border-left: 3px solid #9b2 ;color: #9b2 ;

}

div#contenu p{

text-align: justify ;text-indent: 2em ;line-height: 1.7em ;

}

div#contenu a{

color: #8a0 ;}

div#contenu a:hover{

color: #9b2 ;}

p#footer{

margin: 0 ;padding-right: 10px ;line-height: 30px ;text-align: right ;color: #8a0 ;

}

pre{

overflow: auto ;background: #dea ;border: 2px solid #9b2 ;padding: 5px 0 0 5px ;font-size: 1.2em ;

}

* html pre{

width: 636px ;}

pre span{

color: #560 ;}

pre span.comment{

color: #b30000 ;}</style>

</head><body><div id="conteneur"><h1 id="header"><a href="iceberg.jpg"> </a></h1><ul id="menu"> <li><a href="">Mongolie</a></li> <li><a href="">Islande</a></li> <li><a href="">Dune</a></li>

</ul><div id="contenu"><a name="sable"></a><h2>Les sables de Mongolie</h2><p>Le sable consiste en de petites particules de roche. Une particule individuelle est appelée grain de sable. En géologie, les particules entre 0,063 et 2 mm sont classées comme <a href="#sable">Retour </a></div><p id="footer">Les sables du monde</p></div></body></html>


Les onglets

<ul id="tabnav">

<li><a href="#"class="active" >Cours</a></li>

<li><a href="#" >TD</a></li>

<li><a href="#">TP</a></li>

<li><a href="#">Examens</a></li>

</ul>


les onglets


le CSS

#tabnav { height: 20px; margin: 0; padding-left: 10px; background: url(css-tabs.gif) repeat-x bottom; }

#tabnav li { margin: 0; padding: 0; display: inline; list-style-type: none; }

#tabnav a:link, #tabnav a:visited { float: left; background: #f3f3f3; line-height: 14px; padding: 2px 10px 2px 10px; margin-right: 4px; border: 1px solid #ccc; text-decoration: none; color: #666; }

#tabnav a:link.active, #tabnav a:visited.active { border-bottom: 1px solid #fff; background: #fff; color: #000; }

#tabnav a:hover { background: #fff; }


autre solution

<ul id="nav"> <li><a href="http://www.ibisc.fr/%7Edupont">denis </a></li>

<li><a href="http://www.ibisc.fr/%7Edupont">coucou </a></li>

<li><a href="http://www.ibisc.fr/%7Edupont">moi </a></li></ul>


CSS#nav {

display: block;float: left;clear: both;

padding: 0; margin-left: 25px; margin-bottom: 0; list-style: none; font-family : "Lucida Grande", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}

#nav a {display: block;float: left;padding: 13px 28px 5px 20px;background: no-repeat right bottom url("onglet-d.gif");text-decoration: none;color: #a7b9cc;

}

#nav li {display: block;float: left;list-style: none;background: no-repeat left bottom url("onglet-g.gif");padding:0 0 0 7px;

}


Les onglets

Il faut bien comprendre que pour chaque feuille du site, il faudra modifier la feuille active.


Pur CSS

Extrait du livre de Meyer chapitre 6


en CSS


Etape 1<div id="nav"><ul> <li><a href="/">Home</a></li> <li><a href="/services/">Services</a> <ul> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> </ul> </li><li><a href="/pubs/">Publications</a> <ul> <li><a href="/pubs/articles/">Articles</a></li> <li><a href="/pubs/tuts/">Tutorials</a></li> </ul> </li><li><a href="/events/">Events</a></li> <li><a href="/contact/">Contact</a></li></ul></div>

erreur fréquente


div#nav {

float: left; width: 7em;

background: #FDD;

}


Code complet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Project 6</title><style type="text/css">body {background: #EEE; color: #000;}h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}#main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;}div#nav {float: left; width: 7em; background: #FDD;}</style></head><body><h1>Le pont mirabeau</h1>

<div id="nav"><ul> <li><a href="/">Home</a></li>

<li><a href="/services/">Services</a> <ul> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> </ul> </li><li><a href="/pubs/">Publications</a>

<ul> <li><a href="/pubs/articles/">Articles</a></li> <li><a href="/pubs/tuts/">Tutorials</a></li> </ul> </li><li><a href="/events/">Events</a></li> <li><a href="/contact/">Contact</a></li>

</ul></div>

<div id="main"><p>Sous le pont Mirabeau coule la SeineEt nos amoursFaut-il qu'il m'en souvienneLa joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeureLes mains dans les mains restons face à faceTandis que sousLe pont de nos bras passeDes éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeureL'amour s'en va comme cette eau couranteL'amour s'en vaComme la vie est lenteEt comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeurePassent les jours et passent les semainesNi temps passaitNi les amours reviennentSous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure

"Le Pont Mirabeau"Apollinaire, Alcools (1912)</p></div>

</body></html>


Mode blocs

div#nav ul {margin: 0; padding: 0; width: 7em;}

div#nav li {position: relative;}

div#nav ul ul {position: relative; top: 0; left: 1em;}



div#nav ul ul {position: relative; top: 0; left: 7em;}


En position absolute



div#nav ul ul {position: absolute; top: 0; left: 7em;}

On quitte le flux : on se calle sur le li, décalé de sa largeur.


vue

Le chevauchement est normal


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Project 6</title><style type="text/css">body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* WinIE behavior call */h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}#main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;}div#nav {float: left; width: 7em; background: #FDD;}div#nav ul {margin: 0; padding: 0; width: 7em;}div#nav li {position: relative;}div#nav ul ul {position: absolute; top: 0; left: 7em;}</style></head><body><h1>Le pont mirabeau</h1>

<div id="nav"><ul> <li><a href="/">Home</a></li> <li><a href="/services/">Services</a> <ul> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> </ul> </li><li><a href="/pubs/">Publications</a> <ul> <li><a href="/pubs/articles/">Articles</a></li> <li><a href="/pubs/tuts/">Tutorials</a></li> </ul> </li><li><a href="/events/">Events</a></li> <li><a href="/contact/">Contact</a></li></ul></div>



</body></html>


<div id="nav"><ul> <li><a href="/">Home</a></li> <li class="submenu"><a href="/services/">Services</a> <ul> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> </ul> </li> <li class="submenu"><a href="/pubs/">Publications</a> <ul> <li><a href="/pubs/articles/">Articles</a></li> <li><a href="/pubs/tuts/">Tutorials</a></li> </ul> </li> <li><a href="/events/">Events</a></li> <li><a href="/contact/">Contact</a></li></ul></div>


div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;}div#nav ul {margin: 0; padding: 0; width: 7em;}div#nav li {position: relative; list-style: none; margin: 0;}div#nav li:hover {background: #ccccff;}div#nav li.submenu {}div#nav li.submenu:hover {background-color: #cccccc;}div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}div#nav>ul a {width: auto;}

div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;}

div#nav li.submenu:hover ul{display:block;}


Rendre invisible le tout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Project 6</title><style type="text/css">body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* WinIE behavior call */h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}#main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;}div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;}div#nav ul {margin: 0; padding: 0; width: 7em;}div#nav li {position: relative; list-style: none; margin: 0;}div#nav li:hover {background: #ccccff;}div#nav li.submenu {}div#nav li.submenu:hover {background-color: #cccccc;}div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}div#nav>ul a {width: auto;}div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;}div#nav li.submenu:hover ul {display:block;}</style></head><body><h1>Le pont mirabeau</h1>

<div id="nav"><ul> <li><a href="/">Home</a></li> <li class="submenu"><a href="/services/">Services</a> <ul> <li><a href="/services/strategy/">Strategy</a></li> <li><a href="/services/optimize/">Optimization</a></li> </ul> </li> <li class="submenu"><a href="/pubs/">Publications</a> <ul> <li><a href="/pubs/articles/">Articles</a></li> <li><a href="/pubs/tuts/">Tutorials</a></li> </ul> </li> <li><a href="/events/">Events</a></li> <li><a href="/contact/">Contact</a></li></ul></div>



</body></html>


Tester sous Explorer !

div#nav li {position: relative; list-style: none; margin: 0;

border-bottom: 1px solid #CCC; }

permettra de corriger un décalage.


Menu avec texte d'info / (diff de la sol avec span)


div#nav li.submenu1:hover ul {display:block; top: 0;}

div#nav li.submenu2:hover ul {display:block;top: -2em;}

div#nav li.submenu3:hover ul {display:block; top: -4em;}

div#nav li.submenu4:hover ul {display:block;top: -6em;}

<li class="submenu1"><a href="#">premier</a>

<ul>Sous le pont Mirabeau coule la Seine … </ul>

</li>

<li class="submenu2"><a href="#">deuxieme</a>

<ul>Les mains dans les mains restons … </ul>

</li>


code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Project 6</title><style type="text/css">body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* WinIE behavior call */h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}#main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;}div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;}div#nav ul {margin: 0; padding: 0; width: 7em;height: 1em; }div#nav li {position: relative; list-style: none; margin: 0;height: 2em;}div#nav li:hover {background: #ccccff;}div#nav li.submenu {}

div#nav li.submenu:hover {background-color: #cccccc;}

div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em;}

div#nav>ul a {width: auto;}

div#nav ul ul {position: absolute; left: 400px; display: none; width: 200px;}

div#nav li.submenu1:hover ul {display:block; top: 0;}div#nav li.submenu2:hover ul {display:block;top: -2em;}div#nav li.submenu3:hover ul {display:block; top: -4em;}div#nav li.submenu4:hover ul {display:block;top: -6em;}</style></head><body><h1>Le pont mirabeau</h1>

<div id="nav"><ul>

<li class="submenu1"><a href="#">premier</a>

<ul> Sous le pont Mirabeau coule la Seine

Et nos amoursFaut-il qu'il m'en souvienneLa joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure </ul> </li> <li class="submenu2"><a href="#">deuxieme</a> <ul>Les mains dans les mains restons face à faceTandis que sousLe pont de nos bras passeDes éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure </ul><li class="submenu3"><a href="#">troisieme</a> <ul>

L'amour s'en va comme cette eau couranteL'amour s'en vaComme la vie est lenteEt comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure </ul><li class="submenu4"><a href="#">quatrieme</a> <ul>

Passent les jours et passent les semainesNi temps passaitNi les amours reviennentSous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure

</ul> </li>

</ul></div>



</body></html>


En Javascript


La liste menu

<dl id="menugauche"> <dt onmouseover="javascript:montre();"><a href="http://www.ibisc.fr/%7Edupont">Menus</a></dt> <dt onmouseover="javascript:montre('smenu2');">Enseignement</dt>

<dd id="smenu2"> <ul>

<li><a href="http:/">Tests</a></li> <li><a href="http://dupont/">Divers</a></li>

</ul>

</dd>

<dt onmouseover="javascript:montre('smenu3');">Recherche</dt> <dd id="smenu3">

<ul> </ul>

</dd> </dl>

Le code javascript

<script type="text/javascript"> <!-- window.onload=montre;

function montre(id) { var d = document.getElementById(id);

for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)){

document.getElementById('smenu'+i).style.display='none';}

} if (d) {

d.style.display='block';}

}

remarque importante

: Si javascript est désactivé le menu sera visible.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Denis DUPONT</title> <meta name='DESCRIPTION' content="page personelle de denis dupont, Denis Dupont, Denis DUPONT"><meta name='KEYWORDS' content="forum, Miage Alternance, Cours Architecture, RISC, Denis Dupont, HTML">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Language" content="fr"> <link rel="stylesheet" type="text/css" media="all" href="style.css"> <link rel="stylesheet" type="text/css" media="all" href="stylemenugauche.css"> <link rel="shortcut icon" href="http://www.ibisc.fr/%7Edupont/Images/icone.jpg">

<script type="text/javascript">  //cible var cible=""; //nb compris entre 0 et 9 pour choix des photos var nb= Math.round(10*Math.random()); // Espace entre 2 images var espace = 1; // Pas d'incrémentation (ne pas changer) var pas = 1; // Rafraîchir les images toutes les (millisecondes) var rafraichissement = 30; // Position de la barre position_x = 905; position_y = 5; // Taille de l'image au repos (carré) var largeur = 32; // Taille de l'image au survol (carré) var largeur_zoom = 180; var chrono; // Tableau des images image = new Array(); lien = new Array(); for(i = 0; i < 8; i++) { image[i] = nb + ".jpg"; lien[i] = nb + ".jpg"; nb=nb+10; } taille = new Array(); for(i = 0; i < image.length; i++) { taille[i] = largeur; } // Incrémente la taille l'image n°num function zoom(num) { if(document.getElementById('icone_' + num).width < taille[num]) { document.getElementById('icone_' + num).width = document.getElementById('icone_' + num).width + pas; document.getElementById('icone_' + num).height = document.getElementById('icone_' + num).height + pas; chrono1 = window.setTimeout("zoom("+ (num) + ")",rafraichissement); }

if(document.getElementById('icone_' + num).width > taille[num]) { document.getElementById('icone_' + num).width = document.getElementById('icone_' + num).width - pas; document.getElementById('icone_' + num).height = document.getElementById('icone_' + num).height - pas; window.setTimeout("zoom("+ (num) + ")",rafraichissement); } } // Met à jour la taille de l'image n°num function tailleimage(num){ window.clearTimeout(chrono); for(i = 0; i < image.length; i++){ if(i == num-1){ taille[i] = Math.round((largeur_zoom-largeur) / 2) + largeur; }else { if(i == num+1){ taille[i] = Math.round((largeur_zoom-largeur) / 2) + largeur; }else{ if(i == num){ taille[i] = largeur_zoom; }else{ taille[i] = largeur; } } } zoom(i); } chrono = window.setTimeout("tailleimage(-2);",1500); }

</script> </head> <body> <script type="text/javascript"> /* SCRIPT JAVASCRIPT ESPACE JAVASCRIPT.COM http://www.espacejavascript.com merci à vous denis dupont pour modif random */ // Gère cette propriété ? if(document.getElementById){ // Création des calques document.write("<div id='barre' style='position:absolute; left:"+ position_x +"; top:"+ position_y +"'>"); document.write("<ul>"); for(i = 0; i < image.length; i++){ document.write("<li valign='center' align='center' style='padding:"+ espace +"'>"); document.write("<a href=" + lien[i] + ">"); document.write("<img id='icone_"+ i +"' src="+ image[i] +" width="+ largeur +" height="+ largeur +" border=0 onmouseover='javascript:tailleimage("+ i +")'>") document.write("<\/a>"); document.write("<\/li>"); } document.write("<\/ul>"); document.write("<\/div>"); } </script>

<dl id="menugauche"> <dt onmouseover="javascript:montre();"><a href="http://www.ibisc.fr/%7Edupont">Menus</a></dt> <dt onmouseover="javascript:montre('smenu2');">Enseignement</dt>

<dd id="smenu2"> <ul> <li><a href="http://www.ibisc.fr/%7Edupont/Testquiz/quiz.html">Tests</a> </li>

<li><a href="http://dupontcours.free.fr/">Divers</a> </li> <li><a href="http://www.ibisc.fr/%7Edupont/Archi/indexArchi.html">Archi</a> </li> <li><a href="http://www.ibisc.fr/%7Edupont/SUPPORTS/DupontCours/SiteHTML/indexHtml.htm">htm</a> </li>

<li><a href="http://www.ibisc.fr/%7Edupont/SUPPORTS/DupontCours/SiteProg/indexProg.htm">TD C</a> </li> <li><a href="http://www.ibisc.fr/%7Edupont/SUPPORTS/DupontCours/SiteTempsreel/indexTempsreel.htm">RTS</a> </li> </ul> </dd>

<dt onmouseover="javascript:montre('smenu3');">Recherche</dt> <dd id="smenu3"> <ul> <li><a href="http://www.ibisc.fr">Laboratoire</a> </li>

<li><a href="http://www.ibisc.univ-evry.fr/Equipes/OPAL/">Equipe</a> </li> <li><a href="Conso/indexConso.html">Sujet</a> </li> </ul> </dd>

<dt onmouseover="javascript:montre('smenu4');">Divers</dt> <dd id="smenu4">

<ul>

<li><a href="http://www.ibisc.fr/%7Edupont/SUPPORTS/DupontTutorat/index.html">tutorat</a></li><li><a href="http://www.ibisc.fr/%7Edupont/forum">forum</a></li> </ul> </dd>

<dt onmouseover="javascript:montre('smenu5');">Miage</dt> <dd id="smenu5"> <ul> <li><a href="http://www.ibisc.fr/%7Edupont/MiageA/index.html">Alternance</a> </li>

<li><a href="http://www.ibisc.fr/%7Edupont/MiageI/index.html">Initiale</a> </li>

</ul> </dd> </dl> <div id="conteneur"> <h1 id="header"><a href="http://www.ibisc.fr/%7Edupont/audiard.au"> </a></h1> 

<div id="contenu">

</div> <p id="footer">page accueil</p> </div> </body> </html>


Autre code

/*Author : bieler batisteCompany : doSimple : http://www.dosimple.chsend me a mail for more informations : [email protected] - remove ( PASDEPOURRIEL )

Short javascript function to create and handle a CSS navigation menu

Copyright (C) 2004 Bieler Batiste

This library is free software; you can redistribute it and/ormodify it under the terms of the GNU Lesser General PublicLicense as published by the Free Software Foundation; eitherversion 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,but WITHOUT ANY WARRANTY; without even the implied warranty ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNULesser General Public License for more details.

You should have received a copy of the GNU Lesser General PublicLicense along with this library; if not, write to the Free SoftwareFoundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA*/

// the timeout for the menuvar timeout = 1000;

// not very clean but simple// the function can be run in the HTML for faster display// window.onload=initMenu;

// creat timeout variables for list item// it's for avoid some warning with IEfor( var i = 0; i < 100; i++ ){ eval("var timeoutli" + i + " = false;");}

// this fonction apply the CSS style and the eventfunction initMenu(){ // a test to avoid some browser like IE4, Opera 6, and IE Mac if ( browser.isDOM1 && !( browser.isMac && browser.isIE ) && !( browser.isOpera && browser.versionMajor < 7 ) && !( browser.isIE && browser.versionMajor < 5 ) ) { // get some element var menu = document.getElementById('menuv'); // the root element var lis = menu.getElementsByTagName('li'); // all the li // change the class name of the menu, // it's usefull for compatibility with old browser menu.className='menu'; // i am searching for ul element in li element for ( var i=0; i<lis.length; i++ ) { // is there a ul element ? if ( lis.item(i).getElementsByTagName('ul').length > 0 ) { // improve IE key navigation if ( browser.isIE ) { addAnEvent(lis.item(i),'keyup',show); } // link events to list item addAnEvent(lis.item(i),'mouseover',show); addAnEvent(lis.item(i),'mouseout',timeoutHide); addAnEvent(lis.item(i),'blur',timeoutHide); addAnEvent(lis.item(i),'focus',show); // add an id to list item lis.item(i).setAttribute( 'id', "li"+i ); } } }}

function addAnEvent( target, eventName, functionName ){ // apply the method to IE if ( browser.isIE ) { //attachEvent dont work properly with this eval('target.on'+eventName+'=functionName'); } // apply the method to DOM compliant browsers else { target.addEventListener( eventName , functionName , true ); // true is important for Opera7 }} // hide the first ul element of the current elementfunction timeoutHide(){ // start the timeout eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");}

// hide the ul elements under the element identified by idfunction hideUlUnder( id ){ document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';}

// show the first ul element found under this elementfunction show(){ // show the sub menu this.getElementsByTagName('ul')[0].style['visibility'] = 'visible'; var currentNode=this; while(currentNode) { if( currentNode.nodeName=='LI') { currentNode.getElementsByTagName('a')[0].className = 'linkOver'; } currentNode=currentNode.parentNode; } // clear the timeout eval ( "clearTimeout( timeout"+ this.id +");" ); hideAllOthersUls( this );}

// hide all ul on the same level of this list itemfunction hideAllOthersUls( currentLi ){ var lis = currentLi.parentNode; for ( var i=0; i<lis.childNodes.length; i++ ) { if ( lis.childNodes[i].nodeName=='LI' && lis.childNodes[i].id != currentLi.id ) { hideUlUnderLi( lis.childNodes[i] ); } }}

// hide all the ul wich are in the li elementfunction hideUlUnderLi( li ){ var as = li.getElementsByTagName('a'); for ( var i=0; i<as.length; i++ ) { as.item(i).className=""; } var uls = li.getElementsByTagName('ul'); for ( var i=0; i<uls.length; i++ ) { uls.item(i).style['visibility'] = 'hidden'; }}


Menu avec

PHP et Mysql !


Menu crée avec php Mysql


menu.php

<?echo " <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><style type="text/css"></style><link rel="stylesheet"

type="text/css" media="all" href="menu.css"><title>beaujaulais</title></head><body>";

$MySQL_host = "localhost";$MySQL_user = "root";$MySQL_passw = "123solei";$db="victor.dupont";$linkid=@mysql_connect("$MySQL_host","$MySQL_user","$MySQL_passw");

echo "<dl id='menu'>\n";echo "<dt><a href='http://www.monsite.com/index.php'>Accueil</a></dt>\n";

$requete1 = "SELECT * FROM site_structure WHERE categorie_mere = '0' ORDER by nom";$resmenu1=mysql_db_query($db,$requete1);

while ($temp = mysql_fetch_row($resmenu1)) {$categorie=$temp[0];echo "<dt>".$temp[1]."</dt>\n";echo "<dd><ul>\n";$requete2 = "SELECT * FROM site_structure WHERE categorie_mere = $categorie ORDER by nom";$resmenu2=mysql_db_query($db,$requete2);while ($temp2 = mysql_fetch_row($resmenu2)) {

echo "<li><a href='../".$temp2[3]."/".$temp2[2]."'>".$temp2[1]."</a></li>\n";}echo "</ul></dd>\n";

}echo "</dl>";echo " </body></html>";?>


index.php

<?

echo "<link rel='stylesheet' href='menu.css'>\n";

$MySQL_host = "localhost";$MySQL_user = "root";$MySQL_passw = "icimonpassword";$db="victor.dupont";$linkid=@mysql_connect("$MySQL_host","$MySQL_user","$MySQL_passw");

echo "<dl id='menu'>\n";echo "<dt><a href='http://www.victor.dupont.free.fr/index.php'>Accueil</a></dt>\n";

$requete1 = "SELECT * FROM site_structure WHERE categorie_mere = '0' ORDER by nom";$resmenu1=mysql_db_query($db,$requete1);

while ($temp = mysql_fetch_row($resmenu1)) {$categorie=$temp[0];echo "<dt>".$temp[1]."</dt>\n";echo "<dd><ul>\n";$requete2 = "SELECT * FROM site_structure WHERE categorie_mere = $categorie ORDER by nom";$resmenu2=mysql_db_query($db,$requete2);while ($temp2 = mysql_fetch_row($resmenu2)) {

echo "<li><a href='../".$temp2[3]."/".$temp2[2]."'>".$temp2[1]."</a></li>\n";}echo "</ul></dd>\n";

}

?>


sql

## Structure de la table `site_structure`#

CREATE TABLE `site_structure` ( `ID` int(10) NOT NULL default '0', `nom` varchar(40) NOT NULL default '', `fichier` varchar(40) NOT NULL default '', `repertoire` varchar(40) NOT NULL default '', `categorie_mere` int(10) NOT NULL default '0', PRIMARY KEY (`ID`)) TYPE=MyISAM;

## Contenu de la table `site_structure`#

INSERT INTO `site_structure` VALUES (21, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 62);INSERT INTO `site_structure` VALUES (22, 'Conversions multibases', 'calculatrice.php', 'mathematique', 65);INSERT INTO `site_structure` VALUES (23, 'Nombres premiers', 'nbrepremiers.php', 'mathematique', 65);INSERT INTO `site_structure` VALUES (24, 'Erreurs VBA', 'erreursvba.php', 'office', 64);INSERT INTO `site_structure` VALUES (25, 'Excel fonctions AN/FR', 'excelfonctionsanfr.php', 'office', 64);INSERT INTO `site_structure` VALUES (26, 'Raccourcis Office', 'raccourcisoff.php', 'office', 64);INSERT INTO `site_structure` VALUES (27, 'Erreurs STOP', 'erreursstop.php', 'windows', 63);INSERT INTO `site_structure` VALUES (28, 'Erreurs Windows XP', 'erreurswinxp.php', 'windows', 63);INSERT INTO `site_structure` VALUES (29, 'RunDLL', 'raccourcissysteme.php', 'windows', 63);INSERT INTO `site_structure` VALUES (30, 'Raccourcis Windows', 'raccourciswin.php', 'windows', 63);INSERT INTO `site_structure` VALUES (31, 'VxD', 'vxd.php', 'windows', 63);INSERT INTO `site_structure` VALUES (43, 'Longueurs', 'longueurs.php', 'conversions', 67);INSERT INTO `site_structure` VALUES (44, 'Volumes', 'volumes.php', 'conversions', 67);INSERT INTO `site_structure` VALUES (45, 'Masses', 'masses.php', 'conversions', 67);INSERT INTO `site_structure` VALUES (48, 'Pressions', 'pressions.php', 'conversions', 67);INSERT INTO `site_structure` VALUES (50, 'Vitesses', 'vitesses.php', 'conversions', 67);INSERT INTO `site_structure` VALUES (51, 'Codes des langues', 'codes_langues.php', 'internet', 60);INSERT INTO `site_structure` VALUES (53, 'Codes ANSI', 'codesansi.php', 'informatique', 61);INSERT INTO `site_structure` VALUES (58, 'Surfaces', 'surfaces.php', 'conversions', 67);INSERT INTO `site_structure` VALUES (62, 'Internet Webmasters', '-', 'mère', 0);INSERT INTO `site_structure` VALUES (63, 'Windows', '-', 'mère', 0);INSERT INTO `site_structure` VALUES (64, 'Office', '-', 'mère', 0);INSERT INTO `site_structure` VALUES (65, 'Mathématiques', '-', 'mère', 0);INSERT INTO `site_structure` VALUES (67, 'Conversions', '-', 'mère', 0);INSERT INTO `site_structure` VALUES (69, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 61);INSERT INTO `site_structure` VALUES (74, 'Erreurs Windows XP SP2', 'erreurssp2.php', 'windows', 63);INSERT INTO `site_structure` VALUES (75, 'Services', 'services.php', 'windows', 63);INSERT INTO `site_structure` VALUES (79, 'XHTML', 'xhtml.php', 'internetwebmasters', 62);INSERT INTO `site_structure` VALUES (80, 'Nombre d\'or', 'nombredor.php', 'mathematique', 65);INSERT INTO `site_structure` VALUES (83, 'Fichier .htaccess', 'htaccess.php', 'internetwebmasters', 62);INSERT INTO `site_structure` VALUES (85, 'Processus Windows', 'processus.php', 'windows', 63);INSERT INTO `site_structure` VALUES (90, 'Monnaies', 'conversionsmon.php', 'conversions', 67);INSERT INTO `site_structure` VALUES (95, 'Excel formules', 'excel_formules.php', 'office', 64);INSERT INTO `site_structure` VALUES (97, 'Disques durs', 'disquesdurs.php', 'informatique', 61);INSERT INTO `site_structure` VALUES (100, 'Pseudos', 'pseudogen.php', 'informatique', 61);INSERT INTO `site_structure` VALUES (102, 'Claviers', 'claviers.php', 'informatique', 61);INSERT INTO `site_structure` VALUES (103, 'Robots', 'robots.php', 'internetwebmasters', 62);INSERT INTO `site_structure` VALUES (104, 'Référencement', 'refmoteurs.php', 'internetwebmasters', 62);INSERT INTO `site_structure` VALUES (118, 'Blogs', 'blogs.php', 'internetwebmasters', 62);


Ajax

le chargement dans la page de façon asynchrone

facile le chargement des liens.

1 le menu de la gargote au ***. 2 un menu très simple de très bon rapport qualité prix div#links...

Documents