Welcome to the MacNN Forums.

Cube13 · Oct 26, 2003, 08:19 PM

Hi All,

Hope someone can help me out here.

Creating a website in html and I have a couple of frames. Frame on the left has a menu, simple links right now, and when you click on a link it appears in the frame on the right. Simple stuff.

What I would like to do is the following. Heres a sample.

Entertainment (would be on the list on the left) when you click on it the following would happen

Entertainment
------- Movies
------- Sports Events
------- TV

The new list would be more indented. Then when you click on one of the new sublists it would open in the right frame.

Is this possible? (i've seen it somewhere before) in html?

Any and all help is greatly appreciated!

mzllr · Oct 26, 2003, 09:17 PM

you can modify this script to do want you need... just adjust the height to fit extra links and right align the text to give the indented look...

[php]
<html>

<head>

<script language="JavaScript" type="text/javascript">
function hide(i, n, h)
{
var layer = document.getElementById(i);
var nav = document.getElementById(n);

layer.style.visibility = "hidden";
nav.style.height = h;
}

function show(i, n, h)
{
var layer = document.getElementById(i);
var nav = document.getElementById(n);

layer.style.visibility = "visible";
nav.style.height = h;
}
</script>

<style type="text/css">
#nav1 { height: 20px; top: 5px; overflow: hidden; z-index: 1 }

#nav2 { height: 20px; top: 20px; overflow: hidden; z-index: 1 }

#nav3 { height: 20px; top: 35px; overflow: hidden; z-index: 1 }

#one { visibility: hidden; }

#two { visibility: hidden; }

#three { visibility: hidden; }
</style>

</head>

<body>

<div id="nav1">
<a href="javascript:show('one', 'nav1', 45); javascript:hide('two', 'nav2', 20); javascript:hide('three', 'nav3', 20)">Link 1</a>
<div id="one">Now you see me</div>
</div>

<div id="nav2">
<a href="javascript:hide('one', 'nav1', 20); javascript:show('two', 'nav2', 45); javascript:hide('three', 'nav3', 20)">Link 2</a>
<div id="two">Now you see me</div>
</div>

<div id="nav3">
<a href="javascript:hide('one', 'nav1', 20); javascript:hide('two', 'nav2', 20); javascript:show('three', 'nav3', 45)">Link 3</a>
<div id="three">Now you see me</div>
</div>

</body>

</html>
[/php]

see it here