How to program a navigation menu in Php?

[morbid_leathal92]

How to program a dynamic nested navigation menu in Php?

 

[essellar]

I hate to be "that guy", but I have to be: your question is really too broad to answer as it stands. To properly answer the question, we'd need to know something about your site's structure, and how that structure is stored.

In the most general sense, you want to create an HTML structure composed of unordered lists packaged in a <div> (HTML 4.01, XHTML) or <nav> (HTML5) element to identify it as the navigation area:

<nav id="top_navigation">
  <ul>
    <li><a href="/" title="Return to Home Page">Home</a></li>
    <li><a href="/about" title="Go to About Us">About</a></li>
<!-- dynamic stuff starts here -->
    <li><a href="/some_main_topic">Some Main Topic</a>
      <ul class="subcategory">
        <li><a href="/yadayada">A subtopic</a></li>
        <li><a href="/chachacha">Another subtopic</a></li>
        <li><a href="/yabadabadoo">A third subtopic</a></li>
      </ul>
    </li>
    <li><a href="/another_main_topic">Another Main Topic</a>
      <ul class="subcategory">
        <li><a href="/booyah">A different subtopic</a></li>
        <li><a href="/okeydokey">Yet another subtopic</a></li>
        <li><a href="/zippidydoodah">Enough subtopics Already</a></li>
      </ul>
    </li>
<!-- dynamic stuff ends here -->
    <li><a href="/contact" title="Leave a message or learn how else to contact us">Contact Us</a></li>
  </ul>
</nav>

Such a list is easily styled, using CSS, to look and act like one would expect a navigation menu to look and act. Several of the items on the navigation menu will be static (that is, they're unlikely to change), so you can hard-code them into the page. Beyond that, it's a matter of creating the elements between the comments, and how you do that depends on how the data is organised on your site and on how deep you want the navigation to go.

 

[fekete]

I hate to be that guy too but this looks wonderful and I am sure I could benefit immensely from the code but without the accompanying .css it is not doing what I expected. Any chance you could post the .css that makes this function?

( I was just poking around and found this gem).

I am sure I can adapt the colours etc.. once I get the required .css

Thanks in advance!

 

[essellar]

Take a look at this example. Site navigation is just a list of links, so lists are the HTML that best suit -- but you never need to accept the default rendering for any HTML element (other than a couple of form widgets that actually belong to the OS). List items are normally block elements, but you can make them inline, inline-block or float them; unordered list containers nested within list elements can be anchored "outside" of them, and so on. I didn't provide any CSS because the list can be presented in any number of different ways, from a horizontal drop-down (as in the exampled I linked to) to a vertical accordion, to a sidebar slide-in -- imagination (and the willingness to play with CSS) is the only limit.

 

[fekete]

Willinness to play requires a starting point! The example is just a pretty sample without the style sheet. Perhaps a novice like me need more then just a picture i.e. the style sheet that created the example. ... NOT giving up ...

 

[essellar]

Did you follow the link I gave you? Or try searching the web for the style of menu you're looking for? (There are, as I said, several, including drop-down, sliding and accordian.) "CSS drop-down menu" (without the quotes) is a good search term if you're looking for a drop-down solution. Your question is no less broad and unanswerable than the original.

 

[fekete]

Well I managed to find the .css your example uses with some help but now I have a new dilema. The alt="image name" no longer displays when the cursor is over the image. As for the question being too vauge, it is onlo so if you are reading past the specifics.
I was looking for the .css used in the eaxmple. I am learning but it is hard to understand some of the unexpected bugs (variables) that creep in unexpectedly. The example below produces dramatically different results with all the rest of the code being identical.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Talk about frustrating! Oh well this is beyond the scope of your original but much appreciated solution. If you are aware of a solution to the problem please feel free to post. (btw if you change to <! DOCTYPE html PUBLIC .... the alt text displays but other things go haywire)
Thanks again for your help!

 

[jcaldz198767]

Nice information

 

[essellar]

As for the question being too vauge, it is onlo so if you are reading past the specifics.
I was looking for the .css used in the example.

There was, as I said, no CSS "used in the example". It's just correct HTML. The HTML does not (and should not) create any specific behaviour; it's just a list of links. If your CSS can't be used (either because the browser failed to load the file, or because the page is being read by a machine -- like a search engine or a screen reader), the page still works and still makes sense; the hierarchy of lists exactly represents the hierarchy of menu options exactly.

The two doctype declaration stubs you included describe two very different types of documents (as the name suggests). The browser is supposed to react differently to them.* Pick a doctype, and write for that doctype.

If you leave a space between the exclamation point and the word DOCTYPE, it's not a valid declaration tag, so the browser assumes you are writing in HTML 3.2 or HTML 4 in "quirks mode". Since there are still old sites around that were written in HTML 3.2 or "quirks mode", it's actually a good thing (at least from one perspective) that browsers can still display them as they were meant to be. ("As they were meant to be" usually means the same thing as "the way that Internet Explorer 5/5.5/6 would have displayed them". IE had more than a 90% share at the time, so even if it was wrong, it was right -- if your site didn't work properly in IE, it simply didn't work as far as almost every user was concerned.)

Don't use ALT text for "tool tips"; that's not what it's meant for. ALT means "alternate text", and it is used when the image cannot be displayed (such as when images are turned off in the browser, or when a screen reader is interpreting the page for a blind user). A browser that displays an image doesn't have to display the ALT text at all. If you have text that's supposed to appear on hover, use the TITLE attribute instead.

______________
* I try never to use XHTML in any case -- it was a wrong-headed move to try to impose a "data" schema (XML) on a document-oriented medium. It did force people to be a bit less sloppy when writing code, but the drawbacks far outweighed the advantages. The W3C has since abandoned XHTML.

 

[fekete]

Thanks for taking the time to help. Sometimes we aren't smart enough to know what we don't know or what/how to ask the right questions.
I was referring to the example http://www.webdesignerwall.com/demo/css3-dropdown-menu/ which does use style.css to make things work. I appreciate your patience and help. As for "Pick a doctype, and write for that doctype" I am sure there are volumes on each but being a novice user I just recently noticed there were differences and always used HTML 3.2 till I found some things failed unless you modified the header. Well so much for copying others work without understanding the nuances.
But I must admit I am learning and benefiting from the wealth of knowledge and experience out there. Evidence that you CAN teach and old dog new tricks!

One who learns from their mistakes is smart.
The one who learns from other's mistakes is smarter.

 

[mavr1c]

One who learns from their mistakes is smart.
The one who learns from other's mistakes is smarter.

Great thread of support! I too have a dilema that has been beyond solution. Once a navigation menu is created I have to include it in every page (over 40 pages) and even the most modest change i.e. a typo or an addition necessitates
editing each and every page. Is there a way to imbed or call such a menu (as you call the style.css) without having to edit each and every file?? I have searched high and low for a solution without success, perhaps essellar, who seems most knowledgable has a solution!? Point me to a sample a tutorial or anything that saves a lot of work.

 

[essellar]

That's what includes are for -- you do the menu once and simply include it on every page. How you do the include depends on the tech you're using to create the site. You can use server-side includes for HTML, or either the include() or require() functions (or their x_once() variants) in PHP.

 

[fekete]

"That's what includes are for -- "
I have studied the information provide and tried everything I could think of to make the include work. I added XBitHack on
to .htaccess but can't figure out how to get the menu to get included in the html (how to call the include I guess). I got a great dropdown menu from the example you provided but I have to include it in each .html file (talk about a dumb user) becaus I have not figured out how to get include to do it automaticly. I guess spoonfeeding is the only thing left. I have done everything for the last few days, I can think of with no success. I know its asking too much and if I get no response I will just keep banging my head till it works or till I give up.

 

[morbid_leathal92]

I hate to be "that guy", but I have to be: your question is really too broad to answer as it stands. To properly answer the question, we'd need to know something about your site's structure, and how that structure is stored.

In the most general sense, you want to create an HTML structure composed of unordered lists packaged in a <div> (HTML 4.01, XHTML) or <nav> (HTML5) element to identify it as the navigation area:

<nav id="top_navigation">
  <ul>
    <li><a href="/" title="Return to Home Page">Home</a></li>
    <li><a href="/about" title="Go to About Us">About</a></li>
<!-- dynamic stuff starts here -->
    <li><a href="/some_main_topic">Some Main Topic</a>
      <ul class="subcategory">
        <li><a href="/yadayada">A subtopic</a></li>
        <li><a href="/chachacha">Another subtopic</a></li>
        <li><a href="/yabadabadoo">A third subtopic</a></li>
      </ul>
    </li>
    <li><a href="/another_main_topic">Another Main Topic</a>
      <ul class="subcategory">
        <li><a href="/booyah">A different subtopic</a></li>
        <li><a href="/okeydokey">Yet another subtopic</a></li>
        <li><a href="/zippidydoodah">Enough subtopics Already</a></li>
      </ul>
    </li>
<!-- dynamic stuff ends here -->
    <li><a href="/contact" title="Leave a message or learn how else to contact us">Contact Us</a></li>
  </ul>
</nav>

Such a list is easily styled, using CSS, to look and act like one would expect a navigation menu to look and act. Several of the items on the navigation menu will be static (that is, they're unlikely to change), so you can hard-code them into the page. Beyond that, it's a matter of creating the elements between the comments, and how you do that depends on how the data is organised on your site and on how deep you want the navigation to go.

this will work for static but i want to know how i can use it with a php template? like some things with id=? or other techniques

 

[essellar]

The example I provided is for a dynamic menu. The problem is that we know absolutely nothing about how your site is stored, so the is absolutely no way to tell you how to create the stuff that's within the "dynamic stuff" HTML comments. Presumably you are basing the categories, subcategories and individual entries on something (likely column values in your database), but to us it's an exercise in mind reading.

There is programming involved, and interaction with a database. You want to take what's in your database and use it to write HTML that looks like what I have posted. There is no "one size fits all" script I (or anyone else) can post if we don't know how you are accessing and storing your pages.