Compact Drop Down Menu -- Can there be an external file?

**CookieMonster** · 06-05-2016, 07:12 AM

1) Script Title: Compact Drop Down Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/compactmenu.htm

3) Describe problem: This script works perfectly, but I was trying to create an external file, such as the Smooth Menu Navigation Bar can have, and it is not working for me. Can I make an external file for the Compact Drop Down Menu Script? If so, could you tell me what I need to do?

I had put the section that needed to go in the body instead into a file called sitemapmobile.html, and then I put this as the body:

Code:

<div id="menu3">
<noscript>
<a href="sitemapmobile.html"></a>

</noscript>
</div>

What am I doing wrong, or will this code not work with an external file?

I have this as the head section on the page:

Code:

<!-- Required Libraries -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

<!-- Load Menu Specific Files -->
<script src="compactmenu.js"></script>
<link rel="stylesheet" type="text/css" href="compactmenu.css" />

<script>

    $(function() {

					 
					$("#menu3").menu({
						theme: 'theme-theme3',
						transition: 'set3'
					}); 
    });
</script>

**molendijk** · 06-05-2016, 10:12 AM

Your page:

Code:

<head>
<!-- Required Libraries -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

<!-- Load Menu Specific Files -->
<script src="compactmenu.js"></script>
<link rel="stylesheet" type="text/css" href="compactmenu.css" />

<script>

    $(function() {
					 
					$("#menu3").menu({
						theme: 'theme-theme3',
						transition: 'set3'
					}); 
    });
</script>

</head>

<body>

<div id="sitemapmobile_include"></div>
<script>$('#sitemapmobile_include').load('sitemapmobile.html')</script> 

</body>

External (sitemapmobile.html):

Code:

<div class="container" style="width: 200px;">
    <div id="menu3">
      <div class="icon compactanchor">
        
      </div>

      <ul>
        <li>
          <a href="#">Explore DD</a>

          <ul>
            <li><a href="http://www.dynamicdrive.com/">Home</a></li>

            <li><a href="http://www.dynamicdrive.com/new.htm">New Scripts</a></li>

            <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>

            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>

            <li><a href="http://tools.dynamicdrive.com">Tools</a></li>
          </ul>
        </li>

        <li><a href="#">Link Text</a></li>

        <li>
          <a href="#">Link Text</a>

          <ul>
            <li><a href="#">Sub Link Text</a></li>

            <li><a href="#">Sub Link Text</a></li>

            <li>
              <a href="#">Sub Link Text</a>

              <ul>
                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>
              </ul>
            </li>
          </ul>
        </li>

        <li>
          <a href="#">Link Text 2</a>

          <ul>
            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

**Beverleyh** · 06-05-2016, 11:10 AM

I wouldn't personally use JavaScript to insert primary website navigation into every web page, but if you *do* decide to use JavaScript to go this route, please include a basic HTML link to your sitemap so that visitors and search engines can access the whole of your website, in the event that JavaScript is unavailable for any reason (such as firewall blocks, corporate browser settings, use of assistive technologies, failure to load, and the old favourite, "I turned JavaScript off in the browser).

As an alternative, how about using a server-side PHP include instead? They're not affected by browser settings, network failures or corporate policies. Here's a nice tutorial http://www.tizag.com/phpT/include.php
Your web host may already be setup to parse PHP in HTML pages - in other words, you can run PHP in pages ending with a .htm or .html extension, without needing to rename them with a .php extension. Might be worth a look-in

**molendijk** · 06-05-2016, 11:55 AM

As Beverleyh points out, it's better to use PHP for including external content because javascript may be unavailable for users in certain cases.
But remember that only about 1% of users have javascript disabled, so if you can't use server-side means for including your menu, there will hardly be a problem.
I think that sacrificing javascript-functionality for 99% of users to accommodate 1% is something that the 'stats' don't justify. But it's a good idea indeed to put a basic link to your sitemap.

**Beverleyh** · 06-05-2016, 03:27 PM

I think that sacrificing javascript-functionality for 99% of users to accommodate 1% is something that the 'stats' don't justify.

Just to clarify for the benefit of the OP - JavaScript functionality is in no way sacrificed when a PHP include is used. A PHP include would serve all the necessary menu HTML as part of the web page; Knitted together by the web server before it reaches the browser, and as though the menu markup were coded into all the web page themselves. The JavaScript functionality of the menu would then be layered as an extra on top, only adding to the experience as an enhancement to the critical HTML that would always be there even if JavaScript were unavailable.

However, using JavaScript to include the menu would result in the menu markup being excluded from the page if JavaScript were unavailable. In this case you would provide a static link to your sitemap as a fallback to allow users and search engines to navigate/access your site, should the menu markup be unavailable (fail to load via JavaScript).

JavaScript being *disabled* is different to JavaScript being *unavailable*, and is a question of accessibility.

Hope that helps CookieMonster

**CookieMonster** · 06-05-2016, 08:03 PM

I have used php includes before, but for some reason it is not working with this menu. I'm sure I am doing something wrong, but I cannot figure it out.

I also tried the first option from molendijk (thanks for providing the code), but that did not work for me, either, though I am unsure why, because I copied it directly.

The old smooth menu script with the external file had this in the head section:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	customtheme: ["#730007", "#990000"],
	contentsource: ["smoothcontainer", "smoothmenu.html"] 	//"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	customtheme: ["#730007", "#990000"],
	contentsource: ["smoothcontainermobile", "smoothmenu.html"] 	//"markup" or ["container_id", "path_to_menu_file"]
})

</script>

I tried to create this in the head section for the new menu, but obviously I'm not very good with coding, so I guess I am goofing something up, because it is not working:

Code:

]


<!-- Required Libraries -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

<!-- Load Menu Specific Files -->
<script src="compactmenu.js"></script>
<link rel="stylesheet" type="text/css" href="compactmenu.css" />

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "menu3", //menu DIV id
	classname: 'container', //class added to menu's outer DIV
	customtheme: 'theme-theme3',
        transition: 'set3'
	contentsource: ["sitemapmobileinclude", "sitemapmobile.html"] 	//"markup" or ["container_id", "path_to_menu_file"]
})

</script>

Obviously, I am doing something wrong. :-) Any ideas?

**Beverleyh** · 06-05-2016, 08:43 PM

I have used php includes before, but for some reason it is not working with this menu. I'm sure I am doing something wrong, but I cannot figure it out.

It works fine for me here. If you show what code you're using we might be able to point out where you're going wrong.

**molendijk** · 06-05-2016, 09:16 PM

As for my javascript solution, I found that it has to do with an init issue in compactmenu.js
Maybe try this:
Your page:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>&nbsp;</title>

<!-- Required Libraries -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

<!-- Load Menu Specific Files -->
<script src="compactmenu.js"></script>
<link rel="stylesheet" type="text/css" href="compactmenu.css" />

</head>

<body>
<div id="sitemapmobile_include"></div>



<script>
function load_external()
{$('#sitemapmobile_include').load('sitemapmobile.html')}
load_external()
</script> 

</body>
</html>

External (sitemapmobile.html):

Code:

<script>
$(function() 
{
$("#menu3").menu({theme: 'theme-theme3',transition: 'set3'}); 
});
</script>


<div class="container" style="width: 200px;">
    <div id="menu3">
      <div class="icon compactanchor">
        
      </div>

      <ul>
        <li>
          <a href="#">Explore DD</a>

          <ul>
            <li><a href="http://www.dynamicdrive.com/">Home</a></li>

            <li><a href="http://www.dynamicdrive.com/new.htm">New Scripts</a></li>

            <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>

            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>

            <li><a href="http://tools.dynamicdrive.com">Tools</a></li>
          </ul>
        </li>

        <li><a href="#">Link Text</a></li>

        <li>
          <a href="#">Link Text</a>

          <ul>
            <li><a href="#">Sub Link Text</a></li>

            <li><a href="#">Sub Link Text</a></li>

            <li>
              <a href="#">Sub Link Text</a>

              <ul>
                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>
              </ul>
            </li>
          </ul>
        </li>

        <li>
          <a href="#">Link Text 2</a>

          <ul>
            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

That works for me. Demo here.

**jscheuer1** · 06-05-2016, 09:25 PM

As for an include under PHP not working, that's often a little hard to diagnose. I always start by viewing the finished page's source code (usually CTRL + U in most browsers) to see if something doesn't look right (paths, syntax, etc.) and/or to see any PHP error messages that might not be showing up otherwise. From there (if it looks good or you fix those things and there's still an issue), determine if the include was actually included. If so, did it produce the valid code as desired? If not, why not?