• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 445
  • Last Modified:

How to create a nice navigation pane for a web application

I have programmed in several languages and I still can't figure out how to make a nice navigation pane on the left side of my web app.
What kind of code is involved in created a navigation pane for a web app developed in php? How is is when one clicks on the navigation link, the new page only loads in a certain area? Can someone just write a brief example of like a left navigation pane with 2 links, each requesting a different php page. Then the results would be post in a dedicated area on the right side. Thanks.
0
alateos
Asked:
alateos
  • 6
  • 5
  • 4
2 Solutions
 
MasonWolfCommented:
Try using a frames page. Here's the basic source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
  <frame src="pathToSidebar.php" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
  <frame src="pathToInitialContent.php" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes><body><p>Your browser does not support frames.</p>
</body>
</noframes></html>

Then, with your sidebar links, use this pattern:

<a href="somefile.php" target="mainFrame">Some link text</a>

Only the content in the main frame will change
0
 
alateosAuthor Commented:
ok tx... so I guess this uses frames. Now I have a question for you. Why are many people against frames? And what is the alternative?
0
 
MasonWolfCommented:
Well, in the bad old days not all browsers supported them. These days, it's nearly impossible to find any browsers so old that frames are an issue.

As for the alternative, that would be to just have your left-hand links built into every one of your content pages. Personally though, I greatly prefer the look of frames-based navigation. But that may not be an opinion that you share. Here's an example I built similar to what you're trying to do. See what you think.

http://www.bestsellerpromotion.com/members/training/
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
oceanbeachCommented:
Hello alateos,

Another option you could try...

<?php
if (!isset($_GET['page'])) {
      $page='page1';
} else {
      $page=$_GET['page'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>
<style type="text/css">
#content { width: 75%; float: right; }
#sidebar { width: 25%; float: left; }
</style>
</head>
<body>
<div id="content">
<?php include($page.'.htm'); ?>
</div>
<div id="sidebar">
  <ul id="menu">
    <li><a href="ee2.php?page=page1">page 1</a></li>
    <li><a href="ee2.php?page=page2">page 2</a></li>
  </ul>
</div>
</body>
</html>

I hope this helps!

oceanbeach
0
 
MasonWolfCommented:
That's what I love about this site. So many different ways of solving a problem. I confess I like this latest one above more than my own idea. It's tidier.
0
 
alateosAuthor Commented:
oceanbeach your idea looks nice but can you give an example using it? I'm not sure I understand it well. I just like the aspect that it uses php to apply the layout.
0
 
oceanbeachCommented:
Hi alateos,

Sure thing...

First, it checks to see if a page has been selected, if not, it sets the current page ($page) to 'page1'.

The content div then includes the appropriate page.  In the case of the first visit, that would be page1.htm.  Page1.htm will simply have the content for page1.

sample page1.htm:
....
<h1>Welcome to Page 1</h1>
<p>Content...</p>
<img>
<p>More Content</p>
....

The navigation simply sets which page to load into the content div.  If 'page 2' is selected, the page2.htm will be included in the content div.

Page1.htm & page2.htm will only need the content specific to that page...no doctype, no header, no navigation, no footer, etc.

I hope I explained this well, if not, please let me know.

@MasonWolf...I agree, you never know when you will see a different approach to achieve the same results!  It never hurts to have another' tool on the tool belt'.

-OB
0
 
alateosAuthor Commented:
oceanbeach, tx for the explanation. Now my question is, will your above code show a left pane along with the right side showing different pages? Because that's pretty much what I'm aiming at having: a header, left pane, right pane for different pages, and a footer. But from your above code it doesn't look like the navigation pane in on the left side.
0
 
oceanbeachCommented:
Hi alateos,

Yes, the navigation pane will appear on the left side.  Here is the CSS style that makes the left & right panes...

<style type="text/css">
#content { width: 75%; float: right; }
#sidebar { width: 25%; float: left; }
</style>

If you like, you could place the navigation pane (#sidebar) before the content div.  Also, for illustration purposes, you could remove the PHP & take a look at the layout...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>
<style type="text/css">
#content { width: 75%; float: right; background: red; }
#sidebar { width: 25%; float: left; background: green; }
</style>
</head>
<body>
<div id="content">
<p>CONTENT</p>
</div>
<div id="sidebar">
  <ul id="menu">
    <li><a href="#">page 1</a></li>
    <li><a href="#">page 2</a></li>
  </ul>
</div>
</body>
</html>

I hope this helps!

-OB
0
 
alateosAuthor Commented:
i see.. well both of you guys helped me out... is there any way i can split points? Can an admin check this?
0
 
MasonWolfCommented:
Sure, just "Accept multiple solutions" and pick both my answer and oceanbeach's answer. Then split up the points between us however you feel is fair. I figure oceanbeach should get more, since his answer seemed more like what you were asking with your question.
0
 
alateosAuthor Commented:
ok I hope you guys are happy with the points division
0
 
oceanbeachCommented:
Hi alateos,

I have not looked, but I am sure the split is fine.  I am just happy to help out!

Have a great day!

oceanbeach
0
 
alateosAuthor Commented:
Thanks again to the both of you
0
 
MasonWolfCommented:
You're welcome. I was glad to help, and gladder still to learn a neat technique for templating from oceanbeach.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now