Free Favicons: Collapsing Div Menu

1. I'm saving the div as an html file and using a frame to insert the div element into the sidebar of a blog, like this:

I have used a <div> to provide a thin border around it.

2. Here's a sample of the "publication-list.html" file script, and the active html to the right of it.

<!doctype html>
<html>
<head>
<title>Frame</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="graphics, frame, javascript, collapsing div" name=keywords>
<meta content="Collapsing menu." name=description>
<meta content="index,follow" name=robots>
<style>body {font-family: verdana} a {color: #537d3f; text-decoration:none} a:hover{font-weight:bold} {background-color: #091708}</style>

</head>

<p><b>Blah, blah, blah</b></p>
<a id="displayText" href="javascript:toggle('toggleText0');">Click to open</a>
<div id="toggleText0" style="display: none" href="javascript:toggle();">
<div style="background: #000000; font-size: 11; color: #cccccc; border: 1px #0E2B0E solid; width: 240px; height:180px; overflow:auto; overflow-x:hidden">

</div>
<center><a id="displayText" href="javascript:toggle('toggleText0');">click to close</a></center>
</div>
</td>
</tr>

</td>
</tr>

<a id="displayText" href="javascript:toggle('toggleText2');">Click to open</a>
<div id="toggleText2" style="display: none" href="javascript:toggle();">
<div style="background: #000000; font-size: 11; color: #cccccc; border: 1px #0E2B0E solid; width: 240px; height:25px; overflow:auto; overflow-x:hidden">

</div>
<center><a id="displayText" href="javascript:toggle('toggleText2');">click to close</a></center>
</div>
</td>
</tr>

<a id="displayText" href="javascript:toggle('toggleText3');">Click to open</a>
<div id="toggleText3" style="display: none" href="javascript:toggle();">
<div style="background: #000000; font-size: 11; color: #cccccc; border: 1px #0E2B0E solid; width: 240px; height:250px; overflow:auto; overflow-x:hidden">

Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah

</div>
<center><a id="displayText" href="javascript:toggle('toggleText3');">click to close</a></center>
</div>
</td>
</tr>

<a id="displayText" href="javascript:toggle('toggleText4');">Click to open</a>
<div id="toggleText4" style="display: none" href="javascript:toggle();">
<div style="background: #091708; font-size: 11; color: #cccccc; border: 1px #091708 solid; width: 240px; height:200px; overflow:auto; overflow-x:hidden">

</div>
<center><a id="displayText" href="javascript:toggle('toggleText4');">click to close</a></center>
</div>
</td>
</tr>

<a id="displayText" href="javascript:toggle('toggleText5');">Click to open</a>
<div id="toggleText5" style="display: none" href="javascript:toggle();">
<div style="background: #000000; font-size: 11; color: #cccccc; border: 1px #0E2B0E solid; width: 240px; height:180px; overflow:auto; overflow-x:hidden">

Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah

</div>
<center><a id="displayText" href="javascript:toggle('toggleText5');">click to close</a></center>
</div>
</td>
</tr>

<tr>
<td valign="top">
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #8c8b8b inset;">
<p><b>Blah, blah, blah</b></p>
<a id="displayText" href="javascript:toggle('toggleText6');">Click to open</a>
<div id="toggleText6" style="display: none" href="javascript:toggle();">
<div style="background: #091708; font-size: 10px; color: #cccccc; border: 1px #0E2B0E solid; width: 240px; height:120px; overflow:auto; overflow-x:hidden">
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah<br>
Blah, blah, blah
</div>
<center><a id="displayText" href="javascript:toggle('toggleText6');">click to close</a></center>
</div>
</td>
</tr>

</tbody>
</table>
</div>
</body>
</html>

3. Here's an alternate footer using the same script, but in a different format

Again, I saved my <div> as an html on a server, and inserted into the blog using an iframe.

Here's the active iframe

Here's the code:

<!doctype html>
<html>
<head>
<title>Blah, blah, blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://example.com/frames/other-pubication-list.html">
<meta content="Blah, blah, blah, blah, blah, blah, blah" name=keywords>
<meta content="Blah, blah, blah Blah, blah, blah Blah, blah, blah." name=description>
<meta content="index,follow" name=robots>
<style>body {font-family: verdana} a {color: #537d3f; text-decoration:none} a:hover{font-weight:bold} {background-color: #091708}</style>

</head>

<p><b>Blah, blah, blah</b></p>
<a id="displayText" href="javascript:toggle('toggleText0');">Click to open</a>
<div id="toggleText0" style="display: none" href="javascript:toggle();">

</ul>
</div>
<center><a id="displayText" href="javascript:toggle('toggleText0');">click to close</a></center>
</div>
</td>
</tr>

<tr>
<td>
<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #8c8b8b inset;">
<p><b>Blah, blah, blah</b></p>
<div style="background: #000000; font-size: 11; color: #cccccc; border: 1px #0E2B0E solid; width: 498px; height:174px; overflow:auto; overflow-x:hidden"><center>IFRAME Blah, blah, blah IFRAME</center></div>
</td>
</tr>

<hr style="height: 10px; border: 0; box-shadow: 0 10px 10px -10px #8c8b8b inset;">
<p><strong><em>Blah, blah, blah</em></strong></p>
<a id="displayText" href="javascript:toggle('toggleText1');">Click to open</a>
<div id="toggleText1" style="display: none" href="javascript:toggle();">

<div style="background: #000000; font-size: 11; color: #cccccc; border: 1px #0E2B0E solid; width: 498px; height:300px; overflow:auto; overflow-x:hidden">
<ul>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
<li>Blah, blah, blah</li>
</ul>
</div>
<center><a id="displayText" href="javascript:toggle('toggleText1');">click to close</a></center>
</div>
</td>
</tr>

<p><b>Blah, blah, blah</b></p>
<a id="displayText" href="javascript:toggle('toggleText2');">Click to open</a>
<div id="toggleText2" style="display: none" href="javascript:toggle();">

<table align="right" border="0"><tr><td>
IFRAME Blah, blah, blah IFRAME
</td></tr></table>

<center><a id="displayText" href="javascript:toggle('toggleText2');">click to close</a></center>

</div>
</div>
</td>
</tr>

</td>
</tr>

</div>
</body>
</html>

Collapsing Div Menu

No comments:

Post a Comment

Pages