Menu
I have a navigation bar for my website:
<div id='menu'><ul> <li><a href='index.html'>Home</a></li> <li><a href='about.html'>About Us</a></li> <li><a href='http://www.brownpapertickets.com' target=_blank>Ticket Sales</a></li> <li><a href='merch.html'>Merchandise</a> <ul> <li><a href='merch.html'>Products</a></li> <li><a href='cart.html'>Shopping Cart</a></li> </ul> </li> <li><a href='past.html'>Past Shows</a> <ul> <li><a href='photos.html'>Photo Gallery</a></li> <li><a href='vids.html'>Video Clips</a></li> </ul> </li> </ul></div> I want to store this in one central place so that every time I have to add a hyperlink or something I don't have to edit every single file. What's the best way to do this?
727
Create A SubnavUse any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.
It's completely up to you. You can either put them in the header or not, as long as the elements within them are internal navigation elements only (i.e. don't link to external sites such as a twitter or facebook account) then it's fine.
Assuming you are using a scripting language such as PHP, you simply save that HTML above in a php file called header.php (or something to your liking)
Then in your other php files you write:
include_once('header.php'); and it will plop that HTML right in there.
Some resources for you:
http://php.net/manual/en/function.include.php
http://www.php.net/manual/en/function.include-once.php
http://php.about.com/od/tutorials/ht/template_site.htm
Enjoy!
66
Update @AlienWebguy pointed out that these solutions will hurt your rankings in search engine results. If you care about that, don't use them. But in my opinion, as valid options, they are worth knowing about.
If a server-side include (using PHP or some other language) is not an option you could do it using :
Frames
In all your pages, include an iframe (styled to be without borders or scrollbars) and set the src to be an HTML file that holds your navigation markup. Of course, you're going to run in trouble with following links and you'll probably have to resort to JavaScript in order to get the 'right' behaviour. This is probably not worth the effort. To follow the links correctly, you'll need to use the target attribute in your navigation links to _top (or perhaps _parent). This is probably the simplest solution that should work even in user agents without scripting support.
For example, your page will look like this:
<html> <body> <iframe src="navbar.html" class="navbar" /> <!-- other content here --> </body> </html with navbar.html looking like this:
<html> <body> <div id='menu'><ul> <li><a href='index.html' target="_top">Home</a></li> <li><a href='about.html' target="_top">About Us</a></li> <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li> <li><a href='merch.html' target="_top">Merchandise</a> <ul> <li><a href='merch.html' target="_top">Products</a></li> <li><a href='cart.html' target="_top">Shopping Cart</a></li> </ul> </li> <li><a href='past.html' target="_top">Past Shows</a> <ul> <li><a href='photos.html' target="_top">Photo Gallery</a></li> <li><a href='vids.html' target="_top">Video Clips</a></li> </ul> </li> </ul></div> </body> </html> Ajax
Save the HTML you need for the navbar in the form of an HTML fragment (not a complete HTML document) and load it using ajax on page load. Here's an example using jQuery. On your page:
<html> <script type="text/javascript"> $(document).ready(function(){ $('#menu').('navbar.html'); }); </script> <body> <div id='menu' /> </body> </html> navbar.html
<ul> <li><a href='index.html' target="_top">Home</a></li> <li><a href='about.html' target="_top">About Us</a></li> <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li> <li><a href='merch.html' target="_top">Merchandise</a> <ul> <li><a href='merch.html' target="_top">Products</a></li> <li><a href='cart.html' target="_top">Shopping Cart</a></li> </ul> </li> <li><a href='past.html' target="_top">Past Shows</a> <ul> <li><a href='photos.html' target="_top">Photo Gallery</a></li> <li><a href='vids.html' target="_top">Video Clips</a></li> </ul> </li> </ul> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
