Jump to content

joshpit2003

Recommended Posts

Hello.

My existing website (here) uses a side-nav.

 

It's currently coded such that I need to copy/paste and then modify the nav code onto every one of my pages... totally lame.

I'd like to be able to easily add primary tabs and secondary tabs to this nav in one master-nav document.

 

Apparently one easy way to allow for using a master-nav document is through the use of PHP "Include" (or "require"), as explained (here) on w3schools.

I followed the above example, and got it working great as a single-level nav (a 1-level nave with only primary tabs).

 

Unfortunately, the PHP "include" example doesn't show an example of a 2-level nav (one with primary tabs and secondary tabs).

 

My questions to you guys:

 

1. What would be the best way for me to go about coding in order to get a single master-nav document that I can easily edit, and said master-nav will also have the functionality of a 2-level nav?

(I'm guessing I'll be needing some JQuery)

2. Can you point me in the correct direction of an example / tutorial?

 

Thanks.

-Josh!

 

Link to comment
Share on other sites

A multiple level menu does not need JavaScript/jQuery (well except for really old IE browser version (6 maybe 7) that would not allow hover on any other element except a anchor link), JavaScript/jQuery in modern browser is only use for effects such as slide down/up fade in/out mainly, but even these can be accomplished with new CSS3 animation, transition now.

 

google suckerfish, son of suckerfish menus these will give an idea on how these menus are setup and work.

Link to comment
Share on other sites

I remember looking into the suckerfish tutorials a while back, thanks for the refresh.

 

The existing functionality of my nav:

- click on 1st-level tab brings user to new page (the page that is associated with the first of the 2nd-level tab)

 

I'm struggling how to get that same functionality with a maser-nav PHP page and CSS.

 

 

An alternative functionality (but slightly less desirable since it takes multiple clicks to get to the content):

- click on 1st-level tab reveals the 2nd-level tabs that were previously hidden.

- click on 2nd-level tab to bring user to new page.

 

I'm also puzzled as to how the CSS / master Nav PHP combo would know what part of the Nav to reveal.

For example:

 

If user is in the 2nd-level page,

then I want the 2nd-level Nav to be visible (showing the user where they are in the site).

My current website does this quite well, but again... it isn't using a master-nav page.

 

Thoughts?

Link to comment
Share on other sites

The PHP scripts would each include the appropriate nav for that page. If the PHP script is a 2nd level page, then it includes the menus you want to show on that page. If you have a single PHP page handling everything for your site then you can pass values in the URL to tell it what to include and what to show, so you could have templates for the content for each page and the PHP script would figure out what you clicked on based on URL variables, include the appropriate nav, and then include the appropriate content for that page. Although with that you'll end up with URLs that aren't as good for SEO.

 

Other than that, just think of PHP as a way to get HTML to the browser. The nav itself doesn't have anything to do with PHP, you just use PHP on the server to send the appropriate HTML to the browser.

  • Like 1
Link to comment
Share on other sites

The PHP scripts would each include the appropriate nav for that page. If the PHP script is a 2nd level page, then it includes the menus you want to show on that page. If you have a single PHP page handling everything for your site then you can pass values in the URL to tell it what to include and what to show, so you could have templates for the content for each page and the PHP script would figure out what you clicked on based on URL variables, include the appropriate nav, and then include the appropriate content for that page. Although with that you'll end up with URLs that aren't as good for SEO.

 

Other than that, just think of PHP as a way to get HTML to the browser. The nav itself doesn't have anything to do with PHP, you just use PHP on the server to send the appropriate HTML to the browser.

 

This is starting to make more sense to me now.

So, if I understand correctly, I should break my "master" PHP nav/menu page into a bunch of smaller pieces (multiple PHP pages). Example:

 

a nav that looked like this:

 

- nav1.0

- subNav1.1

- subNav1.2

- nav2.0

- subNav2.1

- subNav2.2

- subNav2.3

- nav3.0

- subNav3.1

 

 

I would want a PHP page for:

- nav1.0

- nav2.0

- nav3.0

 

another PHP page for:

- subNav1.1

- subNav1.2

 

another PHP page for:

- subNav2.1

- subNav2.2

- subNav2.3

 

another PHP page for:

- subNav3.1

 

unfortunately, this isn't as ideal as a single master-nav page for me, and I'm still having a hard time understanding how I would indicate which subNav the user is currently viewing.

 

In my existing website, in order to indicate which subNav the user is viewing, I was changing the class id of the subNav to be "subNavSelected" (in the HTML), and then adjusting accordingly in CSS.

Link to comment
Share on other sites

It actually depends more on your existing HTML structure than anything else. Again, keep in mind that PHP is just there to send HTML to the browser (that's an over-simplification for this situation, but whatever). So, you decide which pieces of HTML need to go the browser in the correct order. You'll probably end up including a single file that will decide which other files to include. If you have an overly-simplified nav like this:

 

<ul>
  <li>Nav 1
    <ul>
      <li>Nav 1.1</li>
      <li>Nav 1.2</li>
    </ul>
  </li>
  <li>Nav 2
    <ul>
      <li>Nav 2.1</li>
      <li>Nav 2.2</li>
    </ul>
  </li>
  <li>Nav 3
    <ul>
      <li>Nav 3.1</li>
      <li>Nav 3.2</li>
    </ul>
  </li>
</ul>
Then you might have a PHP file like this for your main nav include:

 

<ul>
  <li>Nav 1
    <?php if ($include_subnav_1) { 
      include 'subnav1.php';
    } ?>
  </li>
  <li>Nav 2
    <?php if ($include_subnav_2) { 
      include 'subnav2.php';
    } ?>
  </li>
  <li>Nav 3
    <?php if ($include_subnav_3) { 
      include 'subnav3.php';
    } ?>
  </li>
</ul>
And then 3 other subnav include files that may get included based on whatever your conditions are (maybe with additional PHP code to determine other things about the nav). So you would only include that 1 file on each page, but the logic to include the other portions would be inside it. So you can set your variables based on whatever conditions in the parent file, then include the nav file, e.g.:

 

<?php

// however you determine these
$include_subnav_1 = true;
$include_subnav_2 = false;
$include_subnav_3 = true;

include 'nav.php';
Link to comment
Share on other sites

What you should do is have a menu with ALL links, (by the way, your menu construction is totally invalid and needs to be fixed first) then check current url against menu link and then apply active id or class identifier to show and highlight that specific menu item from the rest.

Link to comment
Share on other sites

after spending a little too long researching this, I found an alternate solution that uses PHP:

 

http://alistapart.com/article/keepingcurrent

 

The comment section seems to be filled with people complaining about the code though.

One guy claims he can get the same results using just CSS selectors, which I fail to see how that would work.

 

But it makes me wonder:

Is there a more universally accepted method to created a future-proof, easily editable Nav / Menu for a website?

 

*every one of the WYSIWYG website builders seems to have figured it out... adding another tab or sub-tab to your website is a simple click of a button.

Link to comment
Share on other sites

What you should do is have a menu with ALL links, (by the way, your menu construction is totally invalid and needs to be fixed first) then check current url against menu link and then apply active id or class identifier to show and highlight that specific menu item from the rest.

 

here's my menu code for a specific page on my site:

<ul class="nav">
          <a href="cad_services.html"><li id="navSelected">CAD</li></a>
          	<ul class="subNav">
                <a href="cad_services.html"><li id="subNavSelected">services</li></a>
                <a href="cad_examples.html"><li>examples</li></a>
                <a href="cad_quote.php"><li class="lastSubNav">request a quote</li></a>
            </ul>
          <a href="3d_printing_services.html"><li>3D Printing</li></a>
          <a href="laser_cutting.html"><li>Laser Cutting</li></a>
          <a href="photography_services.html"><li>Product Photography</li></a>
          <a href="contact.php"><li>Contact</li></a>
          <a href="about.html"><li>About</li></a>
        </ul>

Can you explain to me how that is a totally invalid menu?

Link to comment
Share on other sites

This php script stores the complete menu including ALL submenu links as text string and note as VALID menu layout, it then looks at url, retrieves filename, strips characters following last underscore for example '3d_printing_services.html' becomes '3d_printing_', looks for first occurrence of this and adds specific id to anchor, (note not li), it then finds second occurence of full '3d_printing_services.html' and applies a specific id to that anchor, any link without a underscore is treated as a single link with no submenu and is given a specific id as well.

<?php

$menu = '<div class="sidebar">
    <a href="index.html"><img width="160" height="97" alt="" src="images/rapid_whale_logo.png" id="logo"></a>
    <ul class="nav">
        <li><a href="cad_services.html">CAD</a>
            <ul class="subNav">
                <li><a href="cad_services.html">services</a></li>
                <li> <a href="cad_examples.html">examples</a></li>
                <li class="lastSubNav"><a href="cad_quote.html">request a quote</a></li>
            </ul>
        </li>
        <li><a href="3d_printing_services.html">3D Printing</a>
            <ul class="subNav">
                <li><a href="3d_printing_services.html">services</a></li>
                <li><a href="3d_printing_examples.html">examples</a></li>
                <li class="lastSubNav"><a href="3d_printing_quote.html">request a quote</a></li>
            </ul>
        </li>
        <li><a href="laser_cutting.html">Laser Cutting</a></li>
        <li><a href="photography_services.html">Product Photography</a>
            <ul class="subNav">
                <li><a href="photography_services.html">services</a></li>
                <li><a href="photography_examples.html">examples</a></li>
                <li class="lastSubNav"><a href="photography_quote.html">request a quote</a></li>
            </ul>

        </li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</div>
';

$currentURL = basename($_SERVER['SCRIPT_NAME']);
$currentURL = str_replace(substr(strrchr($currentURL, ".php"), 0), ".html", $currentURL);
$uscore = strpos($currentURL, '_');

if ($uscore !== false) {
    $menu = preg_replace('/href="' . str_replace(substr(strrchr($currentURL, "_"), 1), "", $currentURL) . '/', 'id="navSelected" href="' . str_replace(substr(strrchr($currentURL, "_"), 1), "", $currentURL), $menu, 1);
    $menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
} else {
    $menu = preg_replace('/href="' . $currentURL . '"/', '/id="navSelectedBlue" href="' . $currentURL . '"', $menu, 1);
}
echo $menu;

All specific id values are what you are currently using, extra css to hide none viewable submenu is

            .nav li a ~  ul {display: none;}
            .nav li:hover a ~  ul {display: block;}  /*   optional to show submenu on hover*/

            .nav > li:hover > a {    color: #666;
                                     font-weight: bold;} /*optional to show submenu styling on hover*/

            .nav li a#navSelected ~ ul {display: block;}
            .nav > li > a {
                margin-bottom: 1.6rem;
            }
Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Thanks for the help.

much appreciated.

 

I like your approach of using a url lookup. (I didn't realize that was possible or how to implement it).

 

I'll be trying to implement (and understand) this tonight.

Link to comment
Share on other sites

  • 4 months later...

Sorry to resurrect an old post,

But I just wanted to let anyone reading this know what I ended up with.

 

I slightly modified dsonesuk's code to create this:

<?PHP
/*
    Menu master code that every page should share.
    
    See these pages for more info:
    http://www.w3schools.com/PHP/php_includes.asp
	http://www.apaddedcell.com/how-automatically-include-your-header-navigation-and-footer-every-page
*/

$menu = '	
		<ul>
			<li class="dropDown"><a href="#">CAD</a>
				<ul class="subNav">
					<li><a href="cad.php">services</a></li>
					<li> <a href="cad-examples.php">examples</a></li>
					<li><a href="cad-quote.php">quote</a></li>
				</ul>
			</li>
			<li class="dropDown"><a href="#">3D Printing</a>
				<ul class="subNav">
					<li><a href="3d-printing.php">services</a></li>
					<li><a href="3d-printing-examples.php">examples</a></li>
					<li><a href="3d-printing-quote.php">quote</a></li>
				</ul>
			</li>
			<li class="dropDown"><a href="#">Laser Cutting</a>
				<ul class="subNav">
					<li><a href="laser-cutting.php">services</a></li>
					<li><a href="laser-cutting-examples.php">examples</a></li>
					<li><a href="laser-cutting-quote.php">quote</a></li>
				</ul>
			</li>
			<li class="dropDown"><a href="#">Photography</a>
				<ul class="subNav">
					<li><a href="photography.php">services</a></li>
					<li><a href="photography-examples.php">examples</a></li>
					<li><a href="photography-quote.php">quote</a></li>
				</ul>
			</li>
			<li class="dropDown"><a href="#">Products</a>
				<ul class="subNav">
					<li><a href="rc-wall-mount.php">RC Wall Mount</a></li>
					<!--
					<li><a href="scoreboard.php">Scoreboard</a></li>
					<li><a href="7-segment.php">7-Segment</a></li>
					<li><a href="wireless-button.php">Button</a></li>
					<li><a href="turn-timer.php">Turn Timer</a></li>
					-->
				</ul>
			</li>
			<li><a href="contact.php">Contact</a></li>
			<li><a href="about.php">About</a></li>
		</ul>
';

$currentURL = basename($_SERVER['SCRIPT_NAME']); /* Returns the filename from the path of the current script */
$currentURL = str_replace(substr(strrchr($currentURL, ".php"), 0), ".php", $currentURL); /* ensure the url ends in .php */

/* set the appropriate CSS id variable: */
switch ($currentURL) {
	
	case "cad.php":
		$menu = preg_replace('/<a href="#">CAD/', '<a id="navSelected" href="#">CAD', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "cad-examples.php":
		$menu = preg_replace('/<a href="#">CAD/', '<a id="navSelected" href="#">CAD', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "cad-quote.php":
		$menu = preg_replace('/<a href="#">CAD/', '<a id="navSelected" href="#">CAD', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "3d-printing.php":
		$menu = preg_replace('/<a href="#">3D Printing/', '<a id="navSelected" href="#">3D Printing', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "3d-printing-examples.php":
		$menu = preg_replace('/<a href="#">3D Printing/', '<a id="navSelected" href="#">3D Printing', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "3d-printing-quote.php":
		$menu = preg_replace('/<a href="#">3D Printing/', '<a id="navSelected" href="#">3D Printing', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "laser-cutting.php":
		$menu = preg_replace('/<a href="#">Laser Cutting/', '<a id="navSelected" href="#">Laser Cutting', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "laser-cutting-examples.php":
		$menu = preg_replace('/<a href="#">Laser Cutting/', '<a id="navSelected" href="#">Laser Cutting', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "laser-cutting-quote.php":
		$menu = preg_replace('/<a href="#">Laser Cutting/', '<a id="navSelected" href="#">Laser Cutting', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "photography.php":
		$menu = preg_replace('/<a href="#">Photography/', '<a id="navSelected" href="#">Photography', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "photography-examples.php":
		$menu = preg_replace('/<a href="#">Photography/', '<a id="navSelected" href="#">Photography', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "photography-quote.php":
		$menu = preg_replace('/<a href="#">Photography/', '<a id="navSelected" href="#">Photography', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "rc-wall-mount.php":
		$menu = preg_replace('/<a href="#">Products/', '<a id="navSelected" href="#">Products', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
	
	case "scoreboard.php":
		$menu = preg_replace('/<a href="#">Products/', '<a id="navSelected" href="#">Products', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "7-segment.php":
		$menu = preg_replace('/<a href="#">Products/', '<a id="navSelected" href="#">Products', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "wireless-button.php":
		$menu = preg_replace('/<a href="#">Products/', '<a id="navSelected" href="#">Products', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	case "turn-timer.php":
		$menu = preg_replace('/<a href="#">Products/', '<a id="navSelected" href="#">Products', $menu, 1);
		$menu = preg_replace('/<a href="' . $currentURL . '"/', '<a id="subNavSelected" href="' . $currentURL . '"', $menu, 1);
		break;
		
	
		
	case "contact.php":
		$menu = preg_replace('/<a href="contact.php">Contact/', '<a id="navSelected" href="contact.php">Contact', $menu, 1);
		break;
		
	case "about.php":
		$menu = preg_replace('/<a href="about.php">About/', '<a id="navSelected" href="about.php">About', $menu, 1);
		break;
		
	case "thank-you.php":
		break;
		
	case "index.php":
		break;
		
	default: // aka: something is wrong
		echo "Oops, something is BROKEN! Please send a whole-browser screenshot to Josh. Thanks.";
		break;
}

echo $menu;

The above code is what I'm currently using in my website. (as of 04-28-16)

 

It's a master file that allows me to easily edit a master Nav. Exactly what I asked for.

 

I'm very happy with the results... the only thing I would like to change (about the functionality of my website) is for the mobile site version to have a duplicate Nav already expanded along the bottom of every page. I could implement this easy enough, but have a lot of other things going on at the moment and even minor edits to my website take me hours to do. Forever a work in progress I guess.

 

Thanks a lot for all the help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...