In the seventh part of our series on programming, we will continue with the menu navigation system and using Javascript.
So far, we have built navigation section buttons that represent the three content types that we have defined in content.inc: pages, news and FAQ’s. When the button is pressed, a Javascript popup alerts the user as to what button was clicked via the onclick event (Figure 1). We now need to add additional functionality – when the page is loaded, by default the page’s links should be displayed, the menu option (or filter) needs to be displayed to the user, and when the button is clicked, the menu content needs to be rebuilt (Figure 2). Later we will build a more sophisticated menu using the Jquery library.
Step 1 – Handling the user interaction
Ensure you have downloaded the Jquery libraries as detailed in the previous article. If you view the page source for any page, it should be similar to (Figure 3). Modify postload.js and menu.inc as follows (Listing 1 – 2).
If you now navigate to http://yoursiteip/faq/1, you should now see a page similar to (Figure 4). If you click on the buttons, instead of a Javascript popup you should see the navigation menu title changing to reflect the new selection. Using Firebug and the Cookie console, you will see the content of the cookie changing when a new menu item is selected. Deleting the cookie and refreshing the page should load the default menu type of Pages (Figure 5). The titles have also been cleaned up using the PHP ucfirst() function call to uppercase the first character of the selection, and we have added a sequential option number to each menu item.
One disadvantage of this method is the following piece of code as shown in (Figure 6). Each button has two pieces of Javascript attached, setnavitem() and document.location.reload(). The former sets the cookie via our function call in postload.js (and subsequently via the jquery.cookie.js script) and then refreshes the page. This causes the page to flicker every so often when the content is reloaded. A better way of implementing this would be to use Ajax, but for the time being, we will demonstrate a useful Jquery call – Fade in. Add the following code to preload.js (Listing 3) and core. inc (Listing 4 and Listing 5).
This will halt the display of the page, allow the menu to be built etc. and the page will then fade in. The time can be adjusted by incrementing or decrementing the fadeIn() parameter. While this is not an ideal solution, it does demonstrate the ease of integrating Jquery with a web page.
Step 2 – Displaying the links
Now we need to plug in the SQL result to our menu module. Add the following code (Listing 6-8). We now need to make a few minor modifications at the theme and CSS levels, so change faq_template.inc to display the menu before the content (Listing 9).
This will float the navigation menu on the FAQ page to the right and increase the height of our news, page, and FAQ content to accommodate the new menu. See (Figure 7-9) for the final result. I added an extra “Ipsum Lorem” to pad the content out in FAQ 3. Note how the menu responds to user input decoupled from the content that the user is currently visiting.
Step 3 – Global website menu
Jquery provides an extensive library for the user interface. Rather than building the Javascript and CSS from scratch, we can install the CSS and JS libraries quickly into our CMS.
Download Jquery-ui-1.10.3.zip and extract Jquery-ui.css into the stylesheets directory and Jquery-ui.min.js into the javascript directory. Use MC, or extract the file into a temporary area using unzip. Add the global menu to all of our content templates (news_templates.inc, pages_template.inc and faqs_tempate.inc) and add the Javascript function to preload.js. Add the Javascript and CSS files to the header.inc file and add a new menu option to menu.inc and finally tweak our CSS file to reduce the width of the menu (Listing 11-15).
Finally, visit the homepage of your site with your browser, refresh the page and voila, one multi-level menu (Figure 10).
In the next part
We will continue refining the menu system and start building the user interface.
About the Author
Rob Somerville has been passionate about technology since his early teens. A keen advocate of open systems since the mid-eighties, he has worked in many corporate sectors including finance, automotive, airlines, government and media in a variety of roles from technical support, system administrator, developer, systems integrator and IT manager. He has moved on from CP/M and nixie tubes but keeps a soldering iron handy just in case.
This article was re-published with the permission of BSD Magazine. To Learn More about iXsystem’s commitment to open source check us out here: https://www.ixsystems.com/about-ix/
