I was looking up tutorials on how to do this, and I read quite a few of them and got a basic idea on how to do this.
So, I decided to make one too.
Here's the tutorial:
First, if you have a separate stylesheet file, place the code below in there. If you don't, you will have to put it in the <style type="text/css"></style> tags.
Here is the code:
Next, open up the page you want the menu to be on in a text editor. (Notepad )
Place this code in the <head></head> tag:
Now place the following code wherever you want the menu to be:
Remember, the bold fields MUST match, or the script will not function correctly.
And there you have it, an expandable/collapsible menu using JavaScript and CSS.
This exact script is used on my website.
(Live example: www.arsonistx.whdot.com - right side of the page)
So, I decided to make one too.
Here's the tutorial:
First, if you have a separate stylesheet file, place the code below in there. If you don't, you will have to put it in the <style type="text/css"></style> tags.
Here is the code:
Code:
.plus {
font-size: 10px;
font-weight: normal;
padding: 1px 5px 1px 5px;
margin: 0px 0px;
background: #262626; //Replace with any color
color: #fff; //Replace with any color
border: 1px solid #fff; //Replace with any color
cursor: hand;
cursor: pointer
}
.plus:hover {
background: #262626; //Replace with any color
border: 1px solid #fff; //Replace with any color
}Place this code in the <head></head> tag:
Code:
<script type="text/javascript">
function toggle(button,area) {
var tog=document.getElementById(area);
if(tog.style.display) {
tog.style.display="";
} else {
tog.style.display="none";
}
button.innerHTML=(tog.style.display)?'+':'−';
}
</script>
Code:
<h1><span class="plus" onclick="toggle(this,'[B]dis[/B]');" title="Click to show/hide">-</span> Navigation</h1>
<div id="[B]dis[/B]" style="" align="center">
place content here
</div>And there you have it, an expandable/collapsible menu using JavaScript and CSS.
This exact script is used on my website.
(Live example: www.arsonistx.whdot.com - right side of the page)
