NewSchool Learning

Some of our themes come with a javascript dropdown menu that requires manual editing to add and remove links. This quick tutorial will show you how to read and edit that menu.

1. Inside the theme folder, you’ll find a file called menu.php. Don’t be alarmed by the PHP file extension. This is just a simple text file that can be edited using any basic text editor (TextEdit or Notepad are probably best here). Open that file.
2. The first thing you’ll find is a noticeable pattern within the code. Each submenu within the dummy menu structure is indented further than the one it’s within. This organizes the code making it easier to read.
3. The entire menu is not much more than one large unordered list. This list starts with the <ul> element tag and ends with the final </ul> element tag in the file.
4. Within the unordered list are list items (<li></li>). Each list item contains a link and text that will appear in your menu.
5. Some list items contain more unordered lists. This makes up the basic structure of the menu. Here’s a simple menu:

   <ul>
   	<li><a href="path/to/file">Link Text</a></li>
   	<li><a href="path/to/file">Link Text</a>
   		<ul>
   		<li><a href="path/to/submenu/file">Link Sub</a></li>
   		</ul>
   	</li>
   </ul> 

   We have one unordered list with two list items. The second list item contains another unordered list, which has it’s own list item. Here’s what the above code would look like (with style added):

Hopefully this explanation along with the dummy menu we’ve included in your theme will help you understand the menu structure. Now let’s turn our attention to the links themselves.

1. Within each list item is an anchor element that doesn’t go anywhere.

   <a href="#">Building Block</a>

2. It doesn’t go anywhere because the hyperlink reference (href) points to “#”.

3. To point the link to your desired page, just change this href value to a real URL. For example, say I wanted to create a link to Google. Here’s the code I would use:

   <a href="http://google.com">Google</a>

4. Notice in the above example, that I also changed the text that appears within the anchor tags (<a></a>) to display the text I want the user to see when clicking my link.