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.