Page 2 of 2

Posted: Mon Apr 11, 2005 5:56 pm
by ra
i think we are straying from the point... CSS cannot create expanding navigation...

Here is my question:

I want to take the above model and create a changing nav that calls the links from a mysql database with the following structure:

on the index page-
menu_1
sub_1a
sub_1b
sub_1c
menu_2
menu_3
menu_4
etc....

All options (menu and sub) link to real pages and the only time the nav changes is when the user switches to a new parent menu link. So if i clicked on menu_2, the nav would now look like this:

menu_1
menu_2
sub_2a
sub_2b
menu_3
menu_4

This can be done, right? How would i set up the code to accomodate this concept?

Thanks a ton.

Posted: Mon Apr 11, 2005 5:59 pm
by Burrito
umm...look at the code I posted :?

PHP 'Dynamic' Content

Posted: Tue Apr 12, 2005 10:58 am
by marike
Sorry I didn't read your post carefully.

First thing:
n00b Saibot wrote: "This can be accomplished by using JS. PHP isn't in any way 'dynamic'."

Say what? You have static web content and dynamic web content. PHP creates the latter, meaning it can alter content based on whether certain conditions are met. That's dynamic. Don't believe me, do a search on google for 'Dynamic Web Content' and see how many results mention PHP.

More importantly, your question:
Try running this script. I think you'll find it does what you looking for, dynamically:

Code: Select all

<font face="Verdana,Arial" size="2"> 
<b> 
Sub Menu Example 
</b> 
<br><hr><br> 

<?php
if (isset($_GET['s'])){$s=$_GET['s'];}else{$s=0;}
if (isset($_GET['b'])){$b=$_GET['b'];}else{$b=0;}

$headers=array( 
	'Header1'=>'submenu.php?s=1', 
	'Header2'=>'submenu.php?s=2', 
	'Header3'=>'submenu.php?s=3' 
	); 

$sub_1=array( 
	'SubHeader1'=>'http://pear.php.net', 
	'SubHeader2'=>'http://www.zend.com', 
	'SubHeader3'=>'http://www.php.net' 
	); 

$sub_2=array( 
	'SubHeader1'=>'http://www.perdue.net', 
	'Layer_example'=>'submenu.php?s=2&b=1', 
	'SubHeader3'=>'http://www.sourceforge.net' 
	); 

$sub_2_layer=array( 
	'SubSubHeader1'=>'http://www.zend.com/', 
	'SubSubHeader2'=>'http://www.php.net', 
	'SubSubHeader3'=>'http://smarty.php.net' 
	); 

$sub_3=array( 
	'SubHeader1'=>'http://www.fastsearch.com', 
	'SubHeader2'=>'http://www.alltheweb.com', 
	'SubHeader3'=>'http://www.gravitonic.com' 
	); 

foreach ($headers as $key=>$value){ 
echo "<a href='$value'>$key</a><br>"; 
if (($key=="Header1") && ($s=="1")){ 
foreach($sub_1 as $key=>$value){ 
echo "<ul><a href='$value'>$key</a></ul>"; 
	} 

} 
if (($key=="Header2") && ($s=="2")){ 
foreach($sub_2 as $key=>$value){ 
echo "<ul><a href='$value'>$key</a></ul>"; 
if(($key=="Layer_example") && ($s=="2") && ($b=="1")) 
{ 
foreach($sub_2_layer as $key=>$value) 
{ 
echo "<ul><ul><a href='$value'>$key</a></ul></ul>"; 
if ($key=="SubSubHeader3") {$b="2";} 
		} 
	} 
} 
} 

if (($key=="Header3") && ($s=="3")){ 
foreach($sub_3 as $key=>$value){ 
echo "<ul><a href='$value'>$key</a></ul>";} 
	} 
} 
?>
All you have to do is change the links for your page. Hope this helps. Best of luck.

Posted: Tue Apr 12, 2005 11:16 am
by Burrito
I think what n00b sailbot was referring to was the client side (which would make sense for this issue as it's user navigation related). In which case he's dead on, php isn't dynamic in any way on the client side. JS is much better suited for issues like this as it doesn't require page reloads to show more information and provides a much cleaner/more efficient experience to the end user.

Let's be honest folks, how many people don't have JS enabled any more??? I'd venture a guess that it's less than 2%...but that's pure speculation. Maybe it's my naivety, maybe not. But I quit worrying about that crowd a long time ago.

PHP Dynamic Menu

Posted: Tue Apr 12, 2005 1:19 pm
by marike
"php isn't dynamic in any way on the client side"

This might have something to do with the fact that PHP is a server side scripting language.

As far as this specific case, a simple Menu that has submenus, I think I'd rather code this in PHP with something like the example I posted. That way solution will be more accessible to more people and I wouldn't have to worry about degrading my menu gracifully for those browsers that don't have Javascript enabled.

Cheers.

Posted: Tue Apr 12, 2005 3:58 pm
by ra
marike-

that works great! how would one apply styles to that code?

for example: alignment (left, in this case), different backgrounds & font styles for main links and sub links, etc...

the sub links appear indented and spaced... could this model be put into tables?

PHP 'Dynamic' Navigation Menu

Posted: Tue Apr 12, 2005 11:49 pm
by marike
The easiest way, for me, to apply CSS to PHP code is to look at the HTML source that a script produces, make the page a complete HTML page, and simply add <div> tags around the HTML elements produced by the script.

Hope this helps. If you need help with CSS there are tons of tutorials online. You could check out anything by Eric Meyer or some of the great articles at http://www.alistapart.com

Good Luck & Cheers.

Posted: Wed Apr 13, 2005 10:57 am
by ra
I have a good idea of how to use css; but the nav bar i am planning has image backgrounds for the parent links, custom row heights, and a solid color or alternative background image for the sub links...

In summary, the customization i have planned make the css idea incomplete, and table rows would appear to be the best option... the question is, how?

Posted: Wed Apr 13, 2005 2:10 pm
by ra
here is my code for the design of the nav (minus any of the aforementioned php):

Code: Select all

<style type=&quote;text/css&quote;>
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2px;
	color: #000000;
}
body {
	margin-top: 0px;
	margin-bottom: 0px;
}
h1 {
	font-size: 24px;
	color: #000033;
}
a:link {
	color: #000033;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #333333;
}
a:active {
	text-decoration: none;
}
-->
</style>
<link href=&quote;../navbox.css&quote; rel=&quote;stylesheet&quote; type=&quote;text/css&quote;>
<style type=&quote;text/css&quote;>
<!--
.style1 {font-size: 24px}
-->
</style>
</head>

<body>
<table width=&quote;112&quote; border=&quote;0&quote; align=&quote;left&quote; cellpadding=&quote;5&quote; cellspacing=&quote;0&quote;>
  <tr>
    <td width=&quote;112&quote; class=&quote;navbox&quote;><a href=&quote;#&quote;>News</a></td>
  </tr>
  <tr>
    <td width=&quote;112&quote; height=&quote;0&quote; class=&quote;navbox&quote;>Letters to the Editor </td>
  </tr>
  <tr>
    <td width=&quote;112&quote; class=&quote;navbox&quote;>Subscriber Services </td>
  </tr>
  <tr>
    <td width=&quote;112&quote; class=&quote;navbox&quote;>&nbsp;</td>

Posted: Thu Apr 14, 2005 2:45 pm
by ra
Anyone there?