« Programmation JavaScript/Programmer en deux minutes/Tout un site web dans un seul document » : différence entre les versions
Contenu supprimé Contenu ajouté
mAucun résumé des modifications |
Aucun résumé des modifications |
||
Ligne 78 :
'''Félicitation''', les divisions de classe ''page'' sont affichées et cachées par de l'exécution du JavaScript.
== Un menu déroulant en CSS ==
<source lang=html4strict>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-sa/3.0/" />
<script type="text/javascript">
function afficher(a) {
var e=document.getElementById(a);
e.style.display="inline"; /* Applique display:inline à l'element d'id a */
cacher_sauf(e); /* Applique display:none aux autres éléments. */
}
function cacher_sauf(a) {
var els=document.getElementsByClassName('page');
for(i in els) {
if (els[i] != a) {els[i].style.display="none";}
}
}
</script>
<style type="text/css">
a{cursor:pointer;}
#sommaire { font-size:18pt;
margin:2em;
margin-right:0;
border-bottom:1px dotted grey;}
#contenu {margin:1em;}
div#menu {width:100px;}
div#menu ul {padding: 0; width: 100px; border:1px solid gray; margin:0px; }
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid gray;}
div#menu ul ul {position: absolute; top: 0; left: 100px; display:none;} /* ul ul => display:none */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, /* li.sousmenu:hover => display */
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu li a {text-decoration: none; color:gray;}
div#menu li.sousmenu {background: #F0F0F0;}
</style>
</head>
<body >
<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><a href="#" onclick="afficher('home');">Home</a>
<ul class="niveau2">
<li><a href="#" onclick="afficher('apropos');">A propos</a></li>
<li><a href="#" onclick="afficher('contact');">Contact</a></li>
</ul>
</li>
<li class="sousmenu"><a href="#" onclick="afficher('presentation');">Contenu</a>
<ul class="niveau2">
<li class="sousmenu"><a href="#">Articles</a>
<ul class="niveau3">
<li><a href="#" onclick="afficher('page1');">Page 1</a></li>
<li><a href="#" onclick="afficher('page2');">Page 2</a></li>
</ul>
</li>
<li><a href="#" onclick="afficher('photos');">Photos</a></li>
</ul>
</li>
</ul>
</div>
<div id="sommaire">
<a onclick="afficher('home');">Home</a> -
<a onclick="afficher('page1');">Page 1</a> -
<a onclick="afficher('page2');">Page 2</a> -
<a onclick="afficher('contact');">Contact</a>
</div>
<div id="contenu">
<div class="page" id="home">
Welcome on my document. Its <a onclick="afficher('page1');" href="#">page 1</a> is about...
</div>
<div class="page" id="apropos" style="display:none;">
About page.
</div>
<div class="page" id="contact" style="display:none;">
contact page.
</div>
<div class="page" id="presentation" style="display:none;">
Présentation du contenu.
</div>
<div class="page" id="page1" style="display:none;">
page1 text.
</div>
<div class="page" id="page2" style="display:none;">
page2 text
</div>
<div class="page" id="photos" style="display:none;">
Album
</div>
</div>
</body>
</html>
</source>
:::''Pour aller plus loin :
| |||