menu deroulant en javascript sans frame

vector

Membre confirmé
16 Novembre 2004
157
1
48
virginie.penalba.free.fr
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
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>
 
A

Anonyme

Invité
Je te conseille plutôt ce genre de code. ;) 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.

Et oui les frames c'est de la m... préfère les includes php.

P.S. : attention il n'y pas de doctype dans ton code ;)
 

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
31
$PWD
p4bl0.net
Je te conseille plutôt ce genre de code. ;) 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.

Et oui les frames c'est de la m... préfère les includes php.

P.S. : attention il n'y pas de doctype dans ton code ;)
'peux pas bouler gloup gloup donc je le dis ici : "toujours de bon conseil ! :)".
 
A

Anonyme

Invité
Le doctype (normalement la première ligne dans un fichier html) sert à indiquer au navigateur quelle version de (x)html il va utiliser. Si le doctype est absent, incomplet ou simplement pas sur la première ligne au premier caractère, IE calcule la taille des éléments différement des autres navigateurs (qui eux respectent les normes), ce qui est plutôt gênant au niveau mise-en-page. ;)

Bref, et pas uniquement à cause de IE, le doctype doit être correct, ça permet aussi de contrôler la validité des pages.
 
A

Anonyme

Invité
j'ai essayé avec ton code mais je vois pas ce que ça change...est-ce une question de compatibilité entre navigateur, le miens est-il obsolète ? merci

Tu veux dire que tu n'as pas vu de changements en ajoutant le doctype? Si tu n'es pas sur IE, tu ne devrais pas en voir... ;)

Mais je le répète : une page html correcte comporte un doctype correct. C'est la norme. :)