Jag har lyckats söka rätt på en meny som har den funktionen jag är ute efter.
Att man kan ha en undermeny som visas när man klickar och sen att undermenyn fortfarande visas när man klickar på undermenyn.
Den jag har börjat göra om så att den passa mig är denna:
(fungerar i IE)
Men nu verkar ja ha förstört koden så att den inte längre fungerar i IE, alltså när man klickar på undermenyn så stannar den inte kvar utan då döljs den igen, (i FF och Opera fungerar det precis som det ska)
Nå´n som ser vad jaghar gjort för fel?
(Jag har inte rört javasriptkoden alls, endast CSS och HTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>testmenysida</title>
<style type="text/css">
#navi .box1 {
cursor: default;
}
#navi .section {
display: none;
padding-bottom: 20px;
padding-left: 12px;
}
#navi .section a{
line-height: 0.9em;
}
#navi .section li a:hover{
z-index:100;
background-image: url(media/pixel.gif);
background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
/*
* DO NOT REMOVE THIS NOTICE
*
* PROJECT: mygosuMenu
* VERSION: 1.3.3
* COPYRIGHT: (c) 2003,2004 Cezary Tomczak
* LINK: http://gosu.pl/dhtml/mygosumenu.html
* LICENSE: BSD (revised)
*/
function ClickShowHideMenu(id) {
this.box1Hover = true;
this.box2Hover = true;
this.highlightActive = false;
this.init = function() {
if (!document.getElementById(this.id)) {
alert("Element '"+this.id+"' does not exist in this document. ClickShowHideMenu cannot be initialized");
return;
}
this.parse(document.getElementById(this.id).childNodes, this.tree, this.id);
this.load();
if (window.attachEvent) {
window.attachEvent("onunload", function(e) { self.save(); });
} else if (window.addEventListener) {
window.addEventListener("unload", function(e) { self.save(); }, false);
}
}
this.parse = function(nodes, tree, id) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType != 1) {
continue;
}
if (nodes[i].className) {
if ("box1" == nodes[i].className.substr(0, 4)) {
nodes[i].id = id + "-" + tree.length;
tree[tree.length] = new Array();
eval('nodes[i].onmouseover = function() { self.box1over("'+nodes[i].id+'"); }');
eval('nodes[i].onmouseout = function() { self.box1out("'+nodes[i].id+'"); }');
eval('nodes[i].onclick = function() { self.box1click("'+nodes[i].id+'"); }');
}
if ("section" == nodes[i].className) {
id = id + "-" + (tree.length - 1);
nodes[i].id = id + "-section";
tree = tree[tree.length - 1];
}
if ("box2" == nodes[i].className.substr(0, 4)) {
nodes[i].id = id + "-" + tree.length;
tree[tree.length] = new Array();
eval('nodes[i].onmouseover = function() { self.box2over("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
eval('nodes[i].onmouseout = function() { self.box2out("'+nodes[i].id+'", "'+nodes[i].className+'"); }');
}
}
if (this.highlightActive && nodes[i].tagName && nodes[i].tagName == "A") {
if (document.location.href == nodes[i].href) {
nodes[i].className = (nodes[i].className ? ' active' : 'active')
}
}
if (nodes[i].childNodes) {
this.parse(nodes[i].childNodes, tree, id);
}
}
}
this.box1over = function(id) {
if (!this.box1Hover) return;
if (!document.getElementById(id)) return;
document.getElementById(id).className = (this.id_openbox == id ? "box1-open-hover" : "box1-hover");
}
this.box1out = function(id) {
if (!this.box1Hover) return;
if (!document.getElementById(id)) return;
document.getElementById(id).className = (this.id_openbox == id ? "box1-open" : "box1");
}
this.box1click = function(id) {
if (!document.getElementById(id)) {
return;
}
var id_openbox = this.id_openbox;
if (this.id_openbox) {
if (!document.getElementById(id + "-section")) {
return;
}
this.hide();
if (id_openbox == id) {
if (this.box1hover) {
document.getElementById(id_openbox).className = "box1-hover";
} else {
document.getElementById(id_openbox).className = "box1";
}
} else {
document.getElementById(id_openbox).className = "box1";
}
}
if (id_openbox != id) {
this.show(id);
var className = document.getElementById(id).className;
if ("box1-hover" == className) {
document.getElementById(id).className = "box1-open-hover";
}
if ("box1" == className) {
document.getElementById(id).className = "box1-open";
}
}
}
this.box2over = function(id, className) {
if (!this.box2Hover) return;
if (!document.getElementById(id)) return;
document.getElementById(id).className = className + "-hover";
}
this.box2out = function(id, className) {
if (!this.box2Hover) return;
if (!document.getElementById(id)) return;
document.getElementById(id).className = className;
}
this.show = function(id) {
if (document.getElementById(id + "-section")) {
document.getElementById(id + "-section").style.display = "block";
this.id_openbox = id;
}
}
this.hide = function() {
document.getElementById(this.id_openbox + "-section").style.display = "none";
this.id_openbox = "";
}
this.save = function() {
if (this.id_openbox) {
this.cookie.set(this.id, this.id_openbox);
} else {
this.cookie.del(this.id);
}
}
this.load = function() {
var id_openbox = this.cookie.get(this.id);
if (id_openbox) {
this.show(id_openbox);
document.getElementById(id_openbox).className = "box1-open";
}
}
function Cookie() {
this.get = function(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var a = cookies[i].split("=");
if (a.length == 2) {
a[0] = a[0].trim();
a[1] = a[1].trim();
if (a[0] == name) {
return unescape(a[1]);
}
}
}
return "";
}
this.set = function(name, value) {
document.cookie = name + "=" + escape(value);
}
this.del = function(name) {
document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
var self = this;
this.id = id;
this.tree = new Array();
this.cookie = new Cookie();
this.id_openbox = "";
}
if (typeof String.prototype.trim == "undefined") {
String.prototype.trim = function() {
var s = this.replace(/^\s*/, "");
return s.replace(/\s*$/, "");
}
}
</script>
</head>
<body>
<ul id="navi">
<li><a href="_meny.asp?node=1&ID=7">1</a></li>
<li><a href="_meny.asp?node=1&ID=168">2</a></li>
<li class="box1"><a href="#">3</a></li>
<ul class="section">
<li><a href="_meny.asp?node=2&ID=81">31</a></li>
<li><a href="_meny.asp?node=2&ID=82">32</a></li>
<li><a href="_meny.asp?node=2&ID=104">33</a></li>
</ul>
<li class="box1"><a href="#">4</a></li>
<ul class="section">
<li><a href="_meny.asp?node=1&ID=164&div2=display">41</a></li>
<li><a href="_meny.asp?node=1&ID=167&div2=display">42</a></li>
<li><a href="_meny.asp?node=1&ID=169&div2=display">43</a></li>
</ul>
<li><a href="_meny.asp?node=1&ID=165">5</a></li>
</ul>
<script type="text/javascript">
var navitest = new ClickShowHideMenu('navi');
navitest.init();
</script>
</body>
</html>