joshpit2003

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.

Thanks Dsonesuk! Unfortunately I didn't have any luck with your possible solution. I did manage to find this solution: $(".subNav").click(function (e) { e.stopPropagation(); }); as explained here: http://stackoverflow.com/questions/19344334/prevent-firing-its-parents-click-event-on-clicking-a-child-element and that seems to be working well. Is there anything wrong with this solution? And why do you think your solution isn't working for me? (I'm curious, because it seems like it should have worked) Thanks.

Hello. For my drop-down Nav, I've implemented this JQuery code: $("li").click(function () { $('li > ul').not($(this).children("ul")).slideUp(100); $(this).children("ul").slideToggle(100); }); I get the desired results: - click on nav button for sliding drop-down - click on another nav button slides the others up. minus this one issue: When I click on a child element I initiate a toggle. This is un-desirable, because I only want the toggle to happen when I click the parents: CAD, 3D Printing, Laser Cutting (in example below). here is my menu: <ul> <li><a href="#">CAD</a> <ul class="subNav"> <li><a href="cad-services.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><a href="#">3D Printing</a> <ul class="subNav"> <li><a href="3d-printing-services.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><a href="#">Laser Cutting</a> <ul class="subNav"> <li><a href="laser-cutting-services.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> </ul> What can I do to get the JQuery to function as I desire? Thanks. -Josh!

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.

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?

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.

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.

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?

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!