Logged Out
Create an Account
Login:
Password:

Forgot your password?
Menu File

View Version History
The Menu file uses a specific set of commands designed to display a formatted list of menu options, and is designed to be flexible enough to accommodate most unique designs.

The particular use of this file is to make the site more modular - that is, to make the code overall easier to read by requiring less coding. By using this file, a designer can design a menu setup once, and use it as many times as is necessary without requiring a bunch of copy-and-paste.

The commands available for the menu file are as follows
<!--Menu:Title-->The Title of the Menu gets displayed here
<!--Menu:StaticName-->Similar to <!--Menu:Title--> in that in prints the title of the menu, with the exception that it doesn't modify the names of the 'Login' Box, 'Online' Box or others. This is used primarily if you wish to use an image for the titles of the box. It would typically be done in a manner similar to <td background='<!--Menu:StaticName-->.jpg'>
<!--Menu:StartItemList-->The item list is defined as something where a natural list will form. In this case, it's commonly a <li> or <tr><td> records. The Menu:StartItemList and Menu:EndItemList commands in the Menu File define the beginning and ending of the item list. It will be ignored for certain iterations of the Menu that utilize the StandAlone option ('Login' and 'Members Online')
<!--Menu:EndItemList-->This finishes the Item List definition
<!--Menu:StartItem-->Usuaully this will immediately follow the 'StartItemList' command, but it defines the actual beginning of an item.
<!--Menu:EndItem-->This ends a Menu Item
<!--Menu:Link-->Between the StartItem and EndItem commands, you must define where Links must go, and what must be displayed. The database will provide this information, as long as you tell it where to provide it. The Menu:Link command is the actual location of the link. Generally, it'll be in the format <a href='<!--Menu:Link-->'>
<!--Menu:LinkName-->LinkName is the actual Title used in the Menu Link. Typically displayed as <a href='whatever'><!-- Menu:LinkName --></a>
<!--Menu:Popup-->If there is popup information that must be provided, this will need to be stuck into the tag of the item that should trigger the popup on roll over. Generally it would be inside a span or A tag, in the format <a href='whatver' <!--Menu:Popup-->>Item Label</a>. In short, the average Item Link will look like: <a href='<!--Menu:Link-->' <!--Menu:Popup-->><!--Menu:LinkName--></a>
<!--Menu:StartStandAlone-->This defines the beginning of the 'chunk' where StandAlone options get displayed. This will be outlining the entire 'chunk' where the StandAlone stuff will be displayed
<!--Menu:EndStandAlone-->This just ends the StandAlone chunk
<!--Menu:StandAloneContent-->This the actual location where the StandAlone stuff gets inserted. It MUST fall between the StartStandAlone and the EndStandAlone commands


A Complete Menu File Example

This is from the Wrath Drop-In Template, and was chosen because it's the most complete example

<div class="menus">
	<h1><!--Menu:Title--></h1>
	<!--Menu:StartItemList-->
		<ul>
			<!--Menu:StartItem-->
				<li>
					<a href="<!--Menu:Link-->" <!--Menu:Popup -->>
						<!--Menu:LinkName-->
					</a>
				</li>
			<!--Menu:EndItem-->
		</ul>
	<!--Menu:EndItemList-->
	<!--Menu:StartStandalone-->
		<!--Menu:StandAloneContent-->
	<!--Menu:EndStandAlone-->
</div>
<div class="base"></div>


Here's the line-by-line explanation (some lines of non-import or aesthetic value only have been omitted from explanation).

Line 2: Displaying the Title of the Menu, also called the "Menu Category." This is "Resources", "Ventrilo Status", etc.
Line 3: Starting the Item List. If there are no Items in the menu, then Lines 2 through 13 will be hidden (Line 13 is the <!--Menu:EndItemList--> command).
Line 4: Starting the Unordered List <ul>. This only shows if there are menu items to show
Line 5: Start each item. Note that Lines 5 though 11 will show for every menu item
Lines 7-9: Displaying each link, complete with the target URL, hover-over and label. See Menu Links.
Line 11: The end of each item.
Line 12: Closing the Unordered List (</ul>)
Line 13: The end of the item list
Line 14-16: Show the standalone content, if it exists.

Incoming Guide Links
  • <!--Menu:StartItemList-->
  • Complete DKPSystem.com CSS Classes
  • Intro to the Advanced Layout Options
  • Layout Guide
  • Outgoing Guide Links
  • <!--Menu:StartItemList-->
  • <!--Menu:StartStandAlone-->
  • <!--Menu:StaticName-->
  • <!--Menu:Title-->
  • Menu Items and Links


  • Last Modified: 4/6/2008 11:41am
    Contributors: Chops
    Easy Link
    BBCode Link: [guide=MenuCommands]Menu File[/guide]
    URL: http://www.dkpsystem.com/guide/MenuCommands