Results 1 to 9 of 9

Thread: Dropdown menu on every pages of my site

  1. #1
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Dropdown menu on every pages of my site

    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 !!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

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

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

    drcolt45 (03-07-2014)

  5. #4
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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 !

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

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

    drcolt45 (03-07-2014)

  8. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

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

    <head>
    <!--THE JS AND CSS FOR MENU.HTML HERE -->
    </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.

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

    drcolt45 (03-07-2014)

  10. #7
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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">

    <!--#include virtual="header.shtml"-->

    </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 !

  11. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    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.

  12. #9
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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 !

Similar Threads

  1. Loading the content pages of a site in an iframe without the disadvantages
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 4
    Last Post: 11-27-2012, 07:17 PM
  2. How do I add a dropdown search suggestion box to my site?
    By vjboc in forum Looking for such a script or service
    Replies: 0
    Last Post: 11-14-2011, 08:57 PM
  3. Replies: 0
    Last Post: 11-14-2006, 01:37 PM
  4. Combo-Box Dropdown + box on different pages?
    By SusanneZ in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-08-2006, 01:50 PM
  5. need a script to browse pages on my site
    By killerz in forum JavaScript
    Replies: 15
    Last Post: 07-16-2006, 06:11 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •