Hej!
Jag har sökt med ljus och lykta genom nätet för att få hjälp med en expanderande meny. Nu har jag börjat få ihop något - men inte sjutton expanderar den! Den gjorde det precis i början (jag var överlycklig!) men så la jag till css-filen och ändrade lite och då försvann expanderingen... :q
Finns någon som har lust att hjälpa mig?
här kommer min HTML fil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="hovercss.css" type="text/css">
<script type="text/javascript" src="expandingMenu.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Menu Item 1</a></li>
<ul>
<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>
</ul>
</li>
<li>Menu Item 2
<ul>
<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>
</ul>
</li>
<li>Menu Item 3
<ul>
<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>
</ul>
</li>
<li>Menu Item 4
<ul>
<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>
</ul>
</li>
<li>Menu Item 5
<ul>
<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>
</ul>
</li>
</ul></div>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>
</body>
</html>
här kommer min css fil
/* CSS Document */
/* bredd på menyn 150
ingen marginal el padding runt boxen
*/
#menu
{
width: 150px;
margin: 0;
padding: 0;
font: 11px Verdana, Arial, Helvetica, sans-serif;
}
/* inge listpunkter
7px marg under listan skapar mellanrum till nästa rubrik
ingen padding*/
#menu ul
{
list-style-type: none;
margin: 0 0 7px 0;
padding: 0;
}
/* ingen marginal el padding
varje länkbox inom li skall ha en linje till höger, under och till vänster
*/
#menu li
{
margin: 0;
padding: 0;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
border-left: 1px solid #aaab9c;
}
/* alla länkar i listan visas som block
ingen marginal
padding runt länktext top&bott, right&left
bakgrundsbild
ingen understrykning på länkarna*/
#menu a, #menu span
{
display: block;
margin: 0;
padding: 5px 10px;
background-image: url(../menytest/iframe%20test/meny%20med%20hover/meny_bg.gif);
color: #000000;
text-decoration: none;
}
/* gäller endast aktuell sida - text i fetstil*/
#menu span#aktuell { font-weight: bold; }
/* visas som block, pädding, bild, textfärg*/
#menu a:hover
{
display: block;
padding: 5px 10px;
background-image: url(../menytest/iframe%20test/meny%20med%20hover/meny_over.gif);
color: #333333;
}
/* visas som block, ingen marginal!
padding 5 - 7px åt vänster
bakgrundsbild
ingen fetstil i det här spanblocket
samma kanter som menybox li*/
#menu span.rubrik
{
display: block;
margin: 0;
padding: 5px 5px 5px 12px;
background-image: url(../menytest/iframe%20test/meny%20med%20hover/meny_rubrik.gif);
font-size: 12px;
color: #ffffff;
font-weight: normal;
border-right: 1px solid #aaab9c;
border-bottom: 1px solid #aaab9c;
border-left: 1px solid #aaab9c;
}
här kommer min js-fil
// JavaScript Document
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
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*, filter)) result[result.length] = children*;
}
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*;
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*;
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;
Mycket tacksam!!!!
//Xenia****