PDA

View Full Version : Using a sidebar for navigation



Jackmason
24 May 2011, 10:28 PM
We are using CSS to create a sidebar for navigation. We want to have the user click on various items in the sidebar and the selected info (from a file on the server) display in the content area without having to reinvoke the page.

We use CSS, HTML, PHP, and JavaScript. If JavaScript could read a server file, that would make it easy. We would prefer not to have to preload the files into PHP variables if we don't have to do so.

Is there a way to do this? Here is what we have at present:


<html>
<style type="text/css">
input.btnhealth {
color:#FFF;
background-color: #1080FF;
background-image: url('images/goldon.gif');
height: 32px;
width: 122px;
font: bold 16px 'trebuchet ms',helvetica,sans-serif;
color:#000;
}

input.healthover {
color:#FFF;
background-color: #1080FF;
background-image: url('images/golden.gif');
height: 32px;
width: 120px;
font: bold 16px 'trebuchet ms',helvetica,sans-serif;
}

input.btnhealthclick {
color:#900;
background-color: #FFA;
height: 40px;
width: 150px;
font: bold 18px 'trebuchet ms',helvetica,sans-serif;
}
#outer-container {
width: 990px;
margin: 0 auto;
}
#header {
width: 990px;
height: 90px;
background-color: blue;
}
#footer {
width: 984px;
background-color: red;
float: center;
}
#content-container {
width: 800px;
height: 400px;
background-color: green;
margin: 2px 0px 2px 0px;
float: left;
}
#left-sidebar {
width: 146px;
height: 400px;
background-color: #FFFFAA;
margin: 2px 2px 2px 0px;
float: left;
text-align: center;
}
#top-Nav {
width: 990px;
height: 100px;
background-color: black;
margin: 2px 0px 0px 0px;
}
</style>
<body>
<div id="outer-container">
<div style="clear: both"></div>
<div id="top-Nav"></div>
<div style="clear: both"></div>
<div id="left-sidebar">
<br><br><br><h2>Subject:</h2>
<a href="" onclick="submit('cancer.htm')">Cancer</a><br>
<a href="" onclick="submit('diabetes.htm')">Diabetes</a><br>
<a href="" onclick="submit('obesity.htm')">Obesity</a><br>
</div>
<div id="content-container" name="display_area">
<h2>We need the file contents displayed here</h2>
</div>
<div style="clear: both">
</div>
</div>
</div>
<center>
<div id="footer">
<h2>Promotional blurb goes here!!</h1>
</div></center>
</div>
</body>
<script type=text/javascript>
function submit(text) { alert(text); return false; } // well, javascript cannot read files from the server... now what?
</script>
</html>