Dropdown menu on every pages of my site

**drcolt45** · 03-06-2014, 03:52 PM

Hi everyone!

I have a dropdown menu which repeat itself on every pages of my website. This menu is in a div named "Header" at the top of my page.

The problem is that if I have a modification in that menu, I have to make it to all of my pages, one by one !

What is the way to place that menu so that every time I'll have a modification to this menu, modifications will be applied on every pages of my website ?

Thank you !!

**Beverleyh** · 03-06-2014, 04:23 PM

Look in to PHP includes http://www.tizag.com/phpT/include.php

or

Server Side Includes http://www.javascriptkit.com/howto/ssi.shtml

With these, you can put your header/menu/footer/whatever markup snippet into an external file, and then 'include' them back in to all the pages of your website. All pages will reference the same markup snippet so that in future, you only make one edit (to the snippet file) and the change is reflected on all the pages of your website.

**molendijk** · 03-06-2014, 06:39 PM

If you can't use Beverleyh's method, you can use jquery to do the job on the client.
Here's one way to do it.
1. Put your menu in a separate file menu.html. (All the js and css for the menu should be inside menu.html).
2. In the body of all your files except menu.html, put something like <div id="menu_div"></div>. You may style the div if you want.
3. In the head of all your files except menu.html, put:

Example of a page loading menu.html:

<!DOCTYPE html>
<html>

<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#menu_div").load("menu.html");
});
</script>
</head>

<body>
<div id="menu_div"></div>
<br>
This is a page containing menu.html
</body>

</html>

**drcolt45** · 03-07-2014, 01:32 AM

Ok. Honnestly I gave up Beverleyh's method (but thank you so much!).

Now I'm trying molendijk's method.

I'm a bit confused about what should I include into "menu.html" and the other files. Should I include all of my Divs in that file ? What I mean is what should be in that "menu.html" ?

Here is my menu:

<ul id="menu" class="menu">
<li id="toggle"><a href="#menu"><i class="icon-reorder"></i></a></li>
<li id="hide"><a href="#toggle"><i class="icon-reorder"></i></a></li>
<li class="active"><a href="../accueil.html"><i class="icon-home"></i> Accueil</a></li>
<li><a href="../apropos.html" title="Cliquez ici"><i class="icon-tags"></i>A Propos</a></li>
<li><a href="#" title="Choisir..."><i class="icon-cogs"></i>Services <span class="arrow"></span></a>
<ul>
<li><a href="../sites.html" title="Cliquez ici">Sites Internet</a></li>
<li><a href="../cartes.html" title="Cliquez ici">Cartes d'affaires</a></li>
<li><a href="../depliant.html" title="Cliquez ici">Dépliant publicitaire</a></li>
<li><a href="../logos.html" title="Cliquez ici">Logos Corporatifs</a></li>
<li><a href="../reproduction.html" title="Cliquez ici">Reproduction</a></li>
<li><a href="../cours.html" title="Cliquez ici">Cours personnalisés</a></li>
</ul>
</li>
<li><a href="#" title="Choisir..."><i class="icon-briefcase"></i>Portfolio <span class="arrow"></span></a>
<ul>
<li><a href="#" title="Choisir...">Cartes d'affaires<span class="arrow"></span></a>

<ul>
<li><a href="../cartes_entreposage.html" title="Cliquez ici">Entreposage Gélinas</a></li>
<li><a href="../cartes_atelierSB.html" title="Cliquez ici">Atelier SB Inc.</a></li>
<li><a href="../cartes_digitaldesign.html" title="Cliquez ici">Digital Design Inc.</a></li>
<li><a href="../cartes_coffrage.html" title="Cliquez ici">Coffrage Martial</a></li>
<li><a href="../cartes_dramex.html" title="Cliquez ici">Dramex Multimédia</a></li>
<li><a href="../cartes_denver.html" title="Cliquez ici">Denver Composition</a></li>
</ul>

<li><a href="#" title="Choisir...">Sites Internet <span class="arrow"></span></a>
<ul>
<li><a href="../sites_coffrage.html" title="Cliquez ici">Coffrage Martial</a></li>
<li><a href="../sites_efg.html" title="Cliquez ici">EFG Exacavation</a></li>
<li><a href="../sites_gg.html" title="Cliquez ici">GG Alternateurs</a></li>
<li><a href="../sites_aciers.html" title="Cliquez ici">A.C.I.E.R.S. Inc</a></li>
<li><a href="../sites_clubmini.html" title="Cliquez ici">Club Mini-Entrepôts</a></li>
</ul>
</li>
<li><a href="#" title="Choisir...">Design 3D<span class="arrow"></span></a>
<ul>
<li><a href="../3d_gelinas.html" title="Cliquez ici">Entreposage Gélinas</a></li>
<li><a href="../3d_tr411.html" title="Cliquez ici">Trois-Rivières 411</a></li>
<li><a href="../3d_riofix.html" title="Cliquez ici">RioFix Inc.</a></li>
<li><a href="../3d_efg.html" title="Cliquez ici">EFG Excavation</a></li>
<li><a href="../3d_coffrage.html" title="Cliquez ici">Coffrage Martial Inc.</a></li>
<li><a href="../3d_cooke.html" title="Cliquez ici">Cooke & Fils</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="../forfaits.html" title="Cliquez ici"><i class="icon-tasks" style=" color:#c3ff0c"></i>Forfaits</a></li>
<li><a href="../coord.html" title="Cliquez ici"><i class="icon-envelope"></i>Coordonnées</a></li>
</ul>

And my second question is:

Where should I put the *JS script ? Within my actual <div "header"> ?

* <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#menu_div").load("header.html");
});
</script>

THANK YOU SO MUCH FOR YOUR HELP !

**Beverleyh** · 03-07-2014, 06:47 AM

Bear in mind that the JavaScript method will only work on the client side (in a visitors web browser), meaning that you may be inadvertently hiding content from Google and other helpful bots. In the case of a menu, this could be detrimental to your site - bots typically use menus to spider your site pages, but if its hidden off in a separate file that they can't get to (because they don't run on the client side), they might not be able to index any other page of your site (not easily anyway). This could leave lots of dead-ends, orphan pages and unindexed content. In the case of other page content, Google might have a hard time finding and prioritising it and then putting it all in to context (what fragment goes where on which page).

You would also hit a problem with folks who have JavaScript turned off. I know most of the world does have JavaScript enabled, but there are still people and organisations that have it disabled for speed and security - How will they access your menu?

As least with PHP or SSI, the work is done at server level so all the pieces are knitted back together before they get to a web browser. Google bots just see complete web pages this way.

I'm not saving that you shouldn't use the JavaScript method at all - I'm just making you aware of possible side-effects and saying that you shouldn't use it for critical content without providing a fallback.

**molendijk** · 03-07-2014, 11:06 AM

Your menu.html should look like this (you may have used another doctype, that's not relevant here):

<!DOCTYPE html>
<html>

<head>

</head>

<body>
<ul id="menu" class="menu">
<li id="toggle"><a href="#menu"><i class="icon-reorder"></i></a></li>
<li id="hide"><a href="#toggle"><i class="icon-reorder"></i></a></li>
<li class="active"><a href="../accueil.html"><i class="icon-home"></i> Accueil</a></li>
<li><a href="../apropos.html" title="Cliquez ici"><i class="icon-tags"></i>A Propos</a></li>
<li><a href="#" title="Choisir..."><i class="icon-cogs"></i>Services <span class="arrow"></span></a>
<ul>
<li><a href="../sites.html" title="Cliquez ici">Sites Internet</a></li>
<li><a href="../cartes.html" title="Cliquez ici">Cartes d'affaires</a></li>
<li><a href="../depliant.html" title="Cliquez ici">Dépliant publicitaire</a></li>
<li><a href="../logos.html" title="Cliquez ici">Logos Corporatifs</a></li>
<li><a href="../reproduction.html" title="Cliquez ici">Reproduction</a></li>
<li><a href="../cours.html" title="Cliquez ici">Cours personnalisés</a></li>
</ul>
</li>
<li><a href="#" title="Choisir..."><i class="icon-briefcase"></i>Portfolio <span class="arrow"></span></a>
<ul>
<li><a href="#" title="Choisir...">Cartes d'affaires<span class="arrow"></span></a>

<ul>
<li><a href="../cartes_entreposage.html" title="Cliquez ici">Entreposage Gélinas</a></li>
<li><a href="../cartes_atelierSB.html" title="Cliquez ici">Atelier SB Inc.</a></li>
<li><a href="../cartes_digitaldesign.html" title="Cliquez ici">Digital Design Inc.</a></li>
<li><a href="../cartes_coffrage.html" title="Cliquez ici">Coffrage Martial</a></li>
<li><a href="../cartes_dramex.html" title="Cliquez ici">Dramex Multimédia</a></li>
<li><a href="../cartes_denver.html" title="Cliquez ici">Denver Composition</a></li>
</ul>
</body>

</html>

Your other files:

<!DOCTYPE html>
<html>

<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#menu_div").load("menu.html");
});
</script>
</head>

<body>
<div id="menu_div"></div>
Bla bla
</body>

</html>

As for Beverleyh's remarks about visitors having javascript disabled, I wouldn't be worried too much about that. There's only a very very small minority of folks that don't want javascript to be enabled.
What Beverleyh mentions about the indexibility of the pages of your site, yes, that might be an issue. But if you are happy enough with Google and other bots being able to find and index your index.html, then there's no problem if you put the whole menu there (in the body, without <div id="menu_div"></div> and without the jquery script in the head).
You could alternatively use the method described here for having your menu on every page. That method is search engin friendly, but you may find it hard to understand at first sight.

**drcolt45** · 03-07-2014, 08:05 PM

Still not working guys

Can anyone tell me where I go wrong ? BTW, the server I'm doest support iss/shtml.

But here is the content of "header.shtml" ( no tags at all except for the <ul> ):

<ul id="menu" class="menu">
<li id="toggle"><a href="#menu"><i class="icon-reorder"></i></a></li>
<li id="hide"><a href="#toggle"><i class="icon-reorder"></i></a></li>
<li class="active"><a href="../accueil.html"><i class="icon-home"></i> Accueil</a></li>
<li><a href="../apropos.html" title="Cliquez ici"><i class="icon-tags"></i>A Propos</a></li>
<li><a href="#" title="Choisir..."><i class="icon-cogs"></i>Services <span class="arrow"></span></a>
<ul>
<li><a href="../sites.html" title="Cliquez ici">Sites Internet</a></li>
<li><a href="../cartes.html" title="Cliquez ici">Cartes d'affaires</a></li>
<li><a href="../depliant.html" title="Cliquez ici">Dépliant publicitaire</a></li>
<li><a href="../logos.html" title="Cliquez ici">Logos Corporatifs</a></li>
<li><a href="../reproduction.html" title="Cliquez ici">Reproduction</a></li>
<li><a href="../cours.html" title="Cliquez ici">Cours personnalisés</a></li>
</ul>
</li>
<li><a href="#" title="Choisir..."><i class="icon-briefcase"></i>Portfolio <span class="arrow"></span></a>
<ul>
<li><a href="#" title="Choisir...">Cartes d'affaires<span class="arrow"></span></a>

<ul>
<li><a href="../cartes_entreposage.html" title="Cliquez ici">Entreposage Gélinas</a></li>
<li><a href="../cartes_atelierSB.html" title="Cliquez ici">Atelier SB Inc.</a></li>
<li><a href="../cartes_digitaldesign.html" title="Cliquez ici">Digital Design Inc.</a></li>
<li><a href="../cartes_coffrage.html" title="Cliquez ici">Coffrage Martial</a></li>
<li><a href="../cartes_dramex.html" title="Cliquez ici">Dramex Multimédia</a></li>
<li><a href="../cartes_denver.html" title="Cliquez ici">Denver Composition</a></li>
</ul>

<li><a href="#" title="Choisir...">Sites Internet <span class="arrow"></span></a>
<ul>
<li><a href="../sites_coffrage.html" title="Cliquez ici">Coffrage Martial</a></li>
<li><a href="../sites_efg.html" title="Cliquez ici">EFG Exacavation</a></li>
<li><a href="../sites_gg.html" title="Cliquez ici">GG Alternateurs</a></li>
<li><a href="../sites_aciers.html" title="Cliquez ici">A.C.I.E.R.S. Inc</a></li>
<li><a href="../sites_clubmini.html" title="Cliquez ici">Club Mini-Entrepôts</a></li>
</ul>
</li>
<li><a href="#" title="Choisir...">Design 3D<span class="arrow"></span></a>
<ul>
<li><a href="../3d_gelinas.html" title="Cliquez ici">Entreposage Gélinas</a></li>
<li><a href="../3d_tr411.html" title="Cliquez ici">Trois-Rivières 411</a></li>
<li><a href="../3d_riofix.html" title="Cliquez ici">RioFix Inc.</a></li>
<li><a href="../3d_efg.html" title="Cliquez ici">EFG Excavation</a></li>
<li><a href="../3d_coffrage.html" title="Cliquez ici">Coffrage Martial Inc.</a></li>
<li><a href="../3d_cooke.html" title="Cliquez ici">Cooke & Fils</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="../forfaits.html" title="Cliquez ici"><i class="icon-tasks" style=" color:#c3ff0c"></i>Forfaits</a></li>
<li><a href="../coord.html" title="Cliquez ici"><i class="icon-envelope"></i>Coordonnées</a></li>
</ul>

... and here is one of my page that uses the header.shtml :

-----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Colt Graphix</title>
<link href="../css/menu.css" rel="stylesheet">

<style>

a:hover {
color: #1a4058 ;
background-color: #6b93ad ;
}
body{
margin: 0;
padding: 0;
background-image:url(img/back.png);
}

</head>

<body>
<div id="wrapper">

<div id="header">



</div>

<div class="center">

<div id="left">
<img src="img/logo_left.png" align="absmiddle">
</div>

<div id="right">

</div>

</div>

THANKS TO ALL OF YOU !

**molendijk** · 03-07-2014, 09:28 PM

As you mention yourself, your server doesn't support iss/shtml. So what you are trying to accomplish is not supposed to work.
If you try what I suggested above, it should work. First replace the shtml extension with html.
After that:
header.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1252">

<title>Colt Graphix</title>
</head>

<body>
<ul id="menu" class="menu">
<li id="toggle"><a href="#menu"><i class="icon-reorder"></i></a></li>
<li id="hide"><a href="#toggle"><i class="icon-reorder"></i></a></li>
<li class="active"><a href="../accueil.html"><i class="icon-home"></i> Accueil</a></li>
<li><a href="../apropos.html" title="Cliquez ici"><i class="icon-tags"></i>A Propos</a></li>
<li><a href="#" title="Choisir..."><i class="icon-cogs"></i>Services <span class="arrow"></span></a>
<ul>
<li><a href="../sites.html" title="Cliquez ici">Sites Internet</a></li>
<li><a href="../cartes.html" title="Cliquez ici">Cartes d'affaires</a></li>
<li><a href="../depliant.html" title="Cliquez ici">Dépliant publicitaire</a></li>
<li><a href="../logos.html" title="Cliquez ici">Logos Corporatifs</a></li>
<li><a href="../reproduction.html" title="Cliquez ici">Reproduction</a></li>
<li><a href="../cours.html" title="Cliquez ici">Cours personnalisés</a></li>
</ul>
</li>
<li><a href="#" title="Choisir..."><i class="icon-briefcase"></i>Portfolio <span class="arrow"></span></a>
<ul>
<li><a href="#" title="Choisir...">Cartes d'affaires<span class="arrow"></span></a>

<ul>
<li><a href="../cartes_entreposage.html" title="Cliquez ici">Entreposage Gélinas</a></li>
<li><a href="../cartes_atelierSB.html" title="Cliquez ici">Atelier SB Inc.</a></li>
<li><a href="../cartes_digitaldesign.html" title="Cliquez ici">Digital Design Inc.</a></li>
<li><a href="../cartes_coffrage.html" title="Cliquez ici">Coffrage Martial</a></li>
<li><a href="../cartes_dramex.html" title="Cliquez ici">Dramex Multimédia</a></li>
<li><a href="../cartes_denver.html" title="Cliquez ici">Denver Composition</a></li>
</ul>

<li><a href="#" title="Choisir...">Sites Internet <span class="arrow"></span></a>
<ul>
<li><a href="../sites_coffrage.html" title="Cliquez ici">Coffrage Martial</a></li>
<li><a href="../sites_efg.html" title="Cliquez ici">EFG Exacavation</a></li>
<li><a href="../sites_gg.html" title="Cliquez ici">GG Alternateurs</a></li>
<li><a href="../sites_aciers.html" title="Cliquez ici">A.C.I.E.R.S. Inc</a></li>
<li><a href="../sites_clubmini.html" title="Cliquez ici">Club Mini-Entrepôts</a></li>
</ul>
</li>
<li><a href="#" title="Choisir...">Design 3D<span class="arrow"></span></a>
<ul>
<li><a href="../3d_gelinas.html" title="Cliquez ici">Entreposage Gélinas</a></li>
<li><a href="../3d_tr411.html" title="Cliquez ici">Trois-Rivières 411</a></li>
<li><a href="../3d_riofix.html" title="Cliquez ici">RioFix Inc.</a></li>
<li><a href="../3d_efg.html" title="Cliquez ici">EFG Excavation</a></li>
<li><a href="../3d_coffrage.html" title="Cliquez ici">Coffrage Martial Inc.</a></li>
<li><a href="../3d_cooke.html" title="Cliquez ici">Cooke & Fils</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="../forfaits.html" title="Cliquez ici"><i class="icon-tasks" style=" color:#c3ff0c"></i>Forfaits</a></li>
<li><a href="../coord.html" title="Cliquez ici"><i class="icon-envelope"></i>Coordonnées</a></li>
</ul>

</body>
</html>

Pages that use header.html:

<!DOCTYPE html>
<html>
<head>

<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Colt Graphix</title>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#header").load("header.html");
});
</script>

<link href="../css/menu.css" rel="stylesheet">

<style>

a:hover {
color: #1a4058 ;
background-color: #6b93ad ;
}
body{
margin: 0;
padding: 0;
background-image:url(img/back.png);
}
</style>

</head>

<body>

<div id="wrapper">

<div id="header"></div>

<div class="center">

<div id="left">
<img src="img/logo_left.png" align="absmiddle">
</div>

<div id="right"></div>

</div>
</div>

</body>

</html>

Notes:
1. For images, the align attribute is deprecated; use css.
2. Vous êtes français? Moi, je suis hollandais. And we are talking to each other in English. Funny.

**drcolt45** · 03-08-2014, 03:59 PM

molendijk:

Sorry for the delay, but I finnaly make it work

It's not perfect but at least something appears ! haha! I also watched a few Youtube tutorial to help me out.

Merci beaucoup pour ton aide !

Thread: Dropdown menu on every pages of my site

Thread Tools

Search Thread

Dropdown menu on every pages of my site

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

Similar Threads

Loading the content pages of a site in an iframe without the disadvantages

How do I add a dropdown search suggestion box to my site?

Getting Dropdown list to image swap and link to new pages

Combo-Box Dropdown + box on different pages?

need a script to browse pages on my site

Bookmarks

Bookmarks

Posting Permissions