Javascript Menu
Okay, this code is a little complicated and it'll look like a lot at first, but it's really simple if you get used to it.
<div id="menu">
<span onclick=
"document.getElementById('info').innerHTML=document.getElementById('1').innerHTML; "><div id="a">Nav 1</div></span>
<span onclick=
"document.getElementById('info').innerHTML=document.getElementById('2').innerHTML; "><div id="a">Nav 2</div></span>
</div>
<div id="textArea">
<div id="info">
<p>This is the first text they'll see.</p>
</div>
<div id="1" style="display:none;">
<p>First Navigation button text</p?
</div>
<div id="2" style="display:none;">
<p>Second navigation text, and so on...</p>
</div>
</div>
<span onclick=
"document.getElementById('info').innerHTML=document.getElementById('1').innerHTML; "><div id="a">Nav 1</div></span>
<span onclick=
"document.getElementById('info').innerHTML=document.getElementById('2').innerHTML; "><div id="a">Nav 2</div></span>
</div>
<div id="textArea">
<div id="info">
<p>This is the first text they'll see.</p>
</div>
<div id="1" style="display:none;">
<p>First Navigation button text</p?
</div>
<div id="2" style="display:none;">
<p>Second navigation text, and so on...</p>
</div>
</div>
Okay, how this works.
Shhh... It's okay, I make it easy.
So, if you're familar with coding and been doing it awhile, you'll notice a few pieces missing from the puzzle. But we'll get to those.
So notice,
<span onclick=
"document.getElementById('info').innerHTML=document.getElementById('1').innerHTML; "><div id="a">Nav 1</div></span>
Those two things are the only things we need to edit if we want more than 2 choices. By modifying the number, you give it a page number.
By changing the text, you get a new title for it...
Then here's the second part you should notice.
<div id="1" style="display:none;">
<p>Page text, etc</p>
</div>
First thing you should notice, is that by Modifying the number in the span tag, it connects with the Div id.
So that's great and dandy but you're still missing a piece! Alright, if you're any good at css, you'll notice we named a lot of elements we didn't have in a style list. I can't do all of that for you, but I will leave you with a basic code for #a
#a {
display:inline-block;
position:relative;
padding-left:5px;
margin:2px 2px 2px 2px;
margin-top:2%;
width:10%;
height:20px;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
text-align:center;
color:black;
font-family:monospace;
font-size:16px;
text-shadow: 0 0 0 ####;
}
#a:hover {
text-decoration:underline;
}
So notice,
<span onclick=
"document.getElementById('info').innerHTML=document.getElementById('1').innerHTML; "><div id="a">Nav 1</div></span>
Those two things are the only things we need to edit if we want more than 2 choices. By modifying the number, you give it a page number.
By changing the text, you get a new title for it...
Then here's the second part you should notice.
<div id="1" style="display:none;">
<p>Page text, etc</p>
</div>
First thing you should notice, is that by Modifying the number in the span tag, it connects with the Div id.
So that's great and dandy but you're still missing a piece! Alright, if you're any good at css, you'll notice we named a lot of elements we didn't have in a style list. I can't do all of that for you, but I will leave you with a basic code for #a
#a {
display:inline-block;
position:relative;
padding-left:5px;
margin:2px 2px 2px 2px;
margin-top:2%;
width:10%;
height:20px;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
text-align:center;
color:black;
font-family:monospace;
font-size:16px;
text-shadow: 0 0 0 ####;
}
#a:hover {
text-decoration:underline;
}
Don't even start telling me that's hard. If you can copy and paste, you can probably do this code.