PHP: How to automate building a 100 <UL>/<LI> menuitems, while keeping the Menu Structure File Flat / Simply Managable?

Posted by Sam on Stack Overflow See other posts from Stack Overflow or by Sam
Published on 2010-12-24T05:05:46Z Indexed on 2010/12/24 15:54 UTC
Read the original article Hit count: 226

Filed under:
|
|
|
|

alt text Above: current "stupid" menu. (entire ul/li menu for javascript menu system) + (some li lines as page-specific submenu)

Hi folks! With passion for automation and elegancy, but limited knowledge/knowhow, im stuck with "my hands in my hair" as we Dutch say, for my current menu system works perfectly, but is a pain in the a*s to update! So, i would appreciate it greatly, if you can suggest how to automate this in php: how to let the php generate the html menu code basing on a flat menu input file with TABS indented.

OLD SITUATION

<ul>
<!-- about 100 of these <li>....</li> lines -->
<li><a href="carrot.php"><p class="mnu" style="background-position:0 -820px"><? echo __("carrot juice") ?></p></a></li>
<!-- lots of data, with only little bit thats really the menu itself-->
</ul
  1. a javascript file reads a ul/li structure as input to build menu of format
  2. in that ul/li, the items with a hyperlink and sprite-bg position represent webpages, (inside LI)
  3. while items without hyperlink and sprite-bg are just headers of that menusection, (inside H6)
  4. to highlight the current page in the menu, the javascript menumaker uses an id number.
    1. this number corresponds to the consequtive li that is a webpage, skips h6 headers correctly.
    2. these h6 headers are only there for when importing sections of the same menu as submenu.
    3. non-li headers are not shown in menu, nore counted by the javascript menu for their ID.
  5. to know which page should be shown, i have to count from ID 0, the li items till finding the current webpage in the li structure and then manually put it in each webpage!
  6. BUT: changing an item in li order, means stupidly re-counting their entire li again!
  7. each webpage has an icon (= sprite bg-position numer), which is also used in the webpage.

INTENDED RESULT

I dream of, once setting what the current webpage is (e.g carrot.php) the menu system automatically "finds" and "counts" the li's and returns the id nr (for proper highlight of main menu); generates the entire menu html, and depending on which headings are set for submenu, (e.g. meals, drinks) generates those submenu (entire section below each given header); ginally adds h5 highlight inside the li of that submenu item.

For the menu, i wish an easily readable, simple plain txt menu that is indented with tabs, (each tab is one depth for example) and further tabs follow for url and sprite position of icon.

MY DREAM MENU-MANAGEMENT FILE

|>TAB SEPARATED/INDENTED FLATMENU FILE           |MUST BE CALCULATED BY PHP:
|>MENUTEXT============URL=============SPRITE=====|ID===TAG==================
|>about              "#"             -520        |00   li 
|>   INFORMATION                                 |——   h6
|>   physical state  "physical.php"  -920        |01   li
|>   mental health   "mental.php"    -10         |02   li
|>                                            
|>apetite            "#"             -1290       |03   li
|>   meals           "#"             -600        |04   li
|>      COLD MEAL                                |——   h6
|>      egg salade   "salad.php"     -1040       |05   li
|>      salmon fish  "salmon.php"    -540        |06   li
|>      HOT MEAL                                 |——   h6
|>      spare ribs   "spareribs.php" -120        |07   li
|>      di macaroni  "macaroni.php"  -870        |08   li
|>                                             
|>   drinks          "#"             -230        |09   li
|>      JUCY DRINK                               |——   h6
|>      carrot juice "carrot.php"    -820        |10   li
|>      mango hive   "mango.php"     -270        |11   li

DESIRED CHRONOLOGY

  1. php outputs the entire ul/li html so the javascript can show the menu: webpage items go inside li tags, and header items go inside h6 tags, e.g. <h6>JUCY DRINK</h6>
  2. Each website page has a url filename [eg: salad.php]. Based on this given fact, the php menu generator detects the pagename, gives the IDnr of the position of that page according to the li-item nr and sets variable for javascript to highlight current menu item.
  3. the menu items below the specified headers are loaded as submenu
  4. in which the current page.php is wrapped inside h5 to highlight current page in submenu: e.g. (<li><h5><a href="carrot.php"><p>..etc..</p></h5></li>

Question

Which methods / steps / (chronological)ways are there for doing this? I am no good in php programming, but am learning it so please dont write any code without a line of comment why I should use that method etc. Where do I start? If I am unclear in my question, please ask. Thanks. Much appreciated!!

Concrete Task List from the provided Comments/Answers, sofar:

  1. (RobertB) First, get some PHP code working that can read through a tab-delimited file and put the data into an appropriate data structure. NOW WORKING AT THIS

© Stack Overflow or respective owner

Related posts about php

Related posts about data-structures