hi,
Here's a question to be sure: how do I modularize CSS menus? In other words, I want to define a menu (e.g., orange Tree Horizontal Menu) once, and then call/invoke it from any number of pages. Is this possible, or must I duplicate the HTML code in every page? Seems to me that last method would be inefficient, since a change to the menu would require a change to each and every page. Please help.
Thanks
How to modularize CSS menus
Started by
_*Ogflsnnbs_*
, Aug 12 2011 01:11 AM
1 reply to this topic
#2
Demonslay
-
- Members
-
- 973 posts
P2L Jedi
- Gender:Male
- Location:A strange world where water falls out of the sky... for no reason.
- Interests:Graphic Design, Coding, Splinter Cell, Cats
Posted 21 August 2011 - 11:56 AM
IF you are using PHP or another server-side language, you could separate your menu into a different file and then include it on your pages.
Example:
header.php
index.php
You can then put your HTML head element in the header.php file, as well as any other things like your banner or anything else. Then you are including it into every page using PHP. You can also do the same for the footer.
This is generally the simplest approach of doing this. Another way I like to utilize is wrapping the header and footer into functions that I can then call with parameters to alter things such as the page title and anything else I'd need. This also allows me to send output when I need, in the event the page needs to re-direct the user or send other headers first for example.
Another approach if you do not have access or know-how to use a server-side language, you could utilize JavaScript to pull the navigation dynamically. I'll use jQuery to make a quick example for you.
menu.html
index.html
main.js
Example:
header.php
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
index.php
<?php
include('header.php');
// Rest of the page follows
?>
You can then put your HTML head element in the header.php file, as well as any other things like your banner or anything else. Then you are including it into every page using PHP. You can also do the same for the footer.
This is generally the simplest approach of doing this. Another way I like to utilize is wrapping the header and footer into functions that I can then call with parameters to alter things such as the page title and anything else I'd need. This also allows me to send output when I need, in the event the page needs to re-direct the user or send other headers first for example.
Another approach if you do not have access or know-how to use a server-side language, you could utilize JavaScript to pull the navigation dynamically. I'll use jQuery to make a quick example for you.
menu.html
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
index.html
<head>
...
<script language="Javascript" src="jquery.js"></script>
<script language="Javascript" src="main.js"></script>
...
</head>
<body>
...
<div id="menu"></div>
...
</body>
main.js
// Execute this code when the DOM is loaded
$(function(){
// Grab the menu DIV and load our menu.html into it
$('#menu').load('menu.html');
});
Edited by Demonslay, 21 August 2011 - 12:03 PM.
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
