Hallåååå!
Är det ingen som har en meny(vertical) som https://www.eklid.com fast med flera nivåer, alltså submenyerna ska ha undermenyer och alla ska vara klickbara länkar.
/Bettan
Menyer igen
6 svar · 404 visningar · startad av Bettan
Jag söker efter samma sak. Skulle även vilja ha en funktion där man kan välja att ha en meny öppen när man går in på en sida och jag skulle även vilja ha möjligheten att ha undermenyer. Vore ju självklart bra om den funkar med NS, IE, Mozilla, Opera etc (vet att detta är svårt).
Har letat en del på nätet, men de flesta som finns är lite för komlicerade, det skall vara lätt och enkelt. Tacksam för alla tips ni har. :)
Exempel:
Sida 1 med Meny 1 öppen:
- Meny1
Länk 1
Länk 2
Länk 3
- Undermeny 1
Länk 1
+ Meny 2
+ Meny 3
Sida 2 med Meny 2 öppen:
+ Meny1
- Meny 2
Länk 1
Länk 2
Länk 3
+ Meny 3
<html>
<head>
<elsberndmenu id="elsbernd" name="elsbernd">
<script language="javascript">
<!--
//Expands and contracts the menu (if in Internet Explorer 4.0 or higher)
function change() {
if(!document.all)
return
if (event.srcElement.className=="expandable"){
var x=event.srcElement.parentElement
if (x.all[2].style.display=="none"){
x.all[2].style.display='';
}
else {
x.all[2].style.display="none"
}
}
if (event.srcElement.className=="expandable2"){
var x=event.srcElement.parentElement
if (x.all[2].style.display=="none"){
x.all[2].style.display='';
}
else {
x.all[2].style.display="none"
}
}
}
document.onclick=change
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="1" rules="rows">
<tr>
<td class="mainsection"> <a class="expandable" href="#">MENY</a><br>
<p class="subsection" style="display:none"> <a href="min.html" target="main">innehåll1</a>
<br>
<a href="min.html" target="main">innehåll2</a> <br>
<a href="min.html" target="main">innehåll3</a> <br>
<a href="min.html" target="main">innehåll4</a> </p>
</td>
</tr>
</table>
</body>
</html>
så här???
Tack, men den verkar bara funka i IE. Behöver ha ett script som åtminstone funkar i Netscape 6.x, Mozilla 0.9.x och även Opera, om nu detta är möjligt. :q
Hej,
Jag har hittat en här:
http://www.dhtmlcentral.com/script/script.asp?id=25
Den heter FouldOutMenu2 av Thomas Brattli, kontrollerar flera olika browsers och har flera nivåer.
Det där med att välja öppen meny fattade jag inte riktigt men du får kolla hur det står till med den saken.
Om någon har sett en liknande meny som klarar flera nivåer fast något enklare (bara för IE4 och frammåt) så hade jag varit väldigt tacksam för lite info. Jag är ingen fena på javascript och har lite svårt att förstå den här menyns kod.
Man vill ju ha koll på saker och ting!
/Bettan
Ursprungligen av Bettan Hej,
Jag har hittat en här:
http://www.dhtmlcentral.com/script/script.asp?id=25
Tack, skall se om den är vad jag söker :)
Jag tror jag har en som passar dig:
<html>
<head>
<!-- This material created and produced by Colin Barron email:
[email]cbarron@cgocable.net[/email] . . [url]www.cgocable.net/~cbarron[/url] . . ©copyright 1997, 1998, 1999-->
<title>Cascading Menu</title>
<style type="text/css">
.subhead { cursor: hand ;color: navy ; font-size:16; }
a {cursor: hand ; color: navy ; text-decoration:none }
a:active {cursor: hand ; color: red ; }
a:hover {cursor: hand ; color: red ; text-decoration:underline }
span.indent2 {position:relative; left: 25px }
.list {position:relative; left: 35px}
</style>
<script language="JavaScript">
function openIt() {
currEl = event.srcElement;
if (currEl.className == "subhead") {
newId = currEl.id + "vis"
imgId = currEl.id
showIt = document.all(newId) ;
if (showIt.style.display == "none") {
showIt.style.display = "" ;
document.images(imgId).src = "minus.gif"
} else {
showIt.style.display = "none" ;
document.images(imgId).src = "plus.gif"
}
}
}
</script>
</head>
<body bgcolor="#ffffff" onclick="openIt()" topmargin="10">
<a name="1"></a>
<p>Here is my simple version of a cascading menu</p>
<img src="plus.gif" id="group0" class=subhead width="11" height="9">
<a href="#1" id="group0" class=subhead> Cascading Menu</a><br>
<div id="group0vis" style="display:None">
<!-- section 1 -->
<span class=indent2><img src="plus.gif" class=subhead id="group1" width="11" height="9">
<a href="#1" class=subhead id="group1" >Section 1 </a></span><br>
<div id="group1vis" class=list style="display:None" >
<img src="green.gif" width="10" height="10">
<a href='../scripts.htm' >Back To Scripts Page</a><br>
<img src="green.gif" width="10" height="10">
<a href='somepage.htm' >Your Link Here</a><br>
<img src="green.gif" width="10" height="10">
<a href='somepage.htm' >Your Link Here</a><br>
</div>
<!-- section 2 -->
<span class=indent2><img src="plus.gif" class=subhead id="group2" width="11" height="9">
<a href="#1" class=subhead id="group2" >Section 2 </a></span><br>
<div id="group2vis" class=list style="display:None">
<img src="green.gif" width="10" height="10">
<a href='../scripts.htm' >Back To Scripts Page</a><br>
<img src="green.gif" width="10" height="10">
<a href='somepage.htm' >Your Link Here</a><br>
<img src="green.gif" width="10" height="10">
<a href='somepage.htm' >Your Link Here</a><br>
<img src="green.gif" width="10" height="10">
<a href='somepage.htm' >Your Link Here</a><br>
<!-- ********** Nested Section 2a ************* -->
<span class=indent2><img src="plus.gif" class=subhead id="group1a" width="11" height="9">
<a href="#1" class=subhead id="group1a" >Sub Section 2 </a> </span><br>
<div id="group1avis" class=list style="display:None" >
<img src="green.gif" width="10" height="10">
<a href='../scripts.htm' >Back To Scripts Page</a><br>
<img src="green.gif" width="10" height="10">
<a href='somepage.htm' >Your Link Here</a><br>
<img src="green.gif" width="10" height="10">
<a href='somepage.htm' >Your Link Here</a><br>
</div>
<!-- ********** End of Nested Section 2a *************** -->
</div>
</body>
</html>