Bonjour !
J'ai trouvé un menu déroulant (vertical) en javascript qui correspond à ce que je veux, mais en faites si je veux une traçabilité de navigation je suis obligée d'utiliser des frames. J'explique : le menu se déroule vers le bas et quand on clique sur un lien il doit changer de couleur et rester déroulé, hors en changeant de page forcément il se remet en place de depart. Et les frames ça me tente pas en + je crois que c'est pas recommandé.. ci-joint le code (àcopier coller sur une page vierge pour teste) . Merci beaucoup. virg
J'ai trouvé un menu déroulant (vertical) en javascript qui correspond à ce que je veux, mais en faites si je veux une traçabilité de navigation je suis obligée d'utiliser des frames. J'explique : le menu se déroule vers le bas et quand on clique sur un lien il doit changer de couleur et rester déroulé, hors en changeant de page forcément il se remet en place de depart. Et les frames ça me tente pas en + je crois que c'est pas recommandé.. ci-joint le code (àcopier coller sur une page vierge pour teste) . Merci beaucoup. virg
Bloc de code:
<html>
<head>
<title>menu</title>
<style>
ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}
ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}
ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}
ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}
ul#menu ol li {
border-bottom: none;
}
ul#menu ol li:before {
content: "- ";
}
ul#menu a {
text-decoration: none;
outline: none;
}
ul#menu a:hover {
color: #539dbc;
}
ul#menu a.active {
color: #be5028;
}
</style>
<script type="text/javascript">
/*
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham)
*/
// Node Functions
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
</script>
</head>
<body>
<ul id="menu">
<li>Menu Item 1
<ol>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
<li>Menu Item 3
<ol>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
</ol>
</li>
<li>Menu Item 4
<ol>
<li><a href="#">Sub Item 4.1</a></li>
<li><a href="#">Sub Item 4.2</a></li>
<li><a href="#">Sub Item 4.3</a></li>
</ol>
</li>
<li>Menu Item 5
<ol>
<li><a href="#">Sub Item 5.1</a></li>
<li><a href="#">Sub Item 5.2</a></li>
<li><a href="#">Sub Item 5.3</a></li>
</ol>
</li>
</ul>
<p><font face="verdana" size="1">Powered and Generated by </font><a href="http://www.espacejavascript.com" target="_blank"><font face="verdana,arial,helvetica" size="1" color="black">http://www.<b>espacejavascript</b>.com</font></a></p>
</body>
</html>
Pour que le menu reste déroulé, soit il faut utiliser des cookies pour garder l'état des menus en mémoire, soit avec php ajouter la classe pour garder le menu ouvert.
