Works as stand alone but not if ncluded in a page

Works as stand alone but not if ncluded in a page

I'm creating a template page. I am including a page called menu.php which creates a jquery vertical menu. If I run menu.php directly in the browser the menu displays and functions fine.

If I included the menu.php page into my template page the menu is broken with a console message:

  1. <!DOCTYPE html>
    <html>
    <head>
    <title>Template</title>
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../css/6807.css" />
  2. </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <? require ($_SERVER['DOCUMENT_ROOT'] . "/template/includes/header.php") ?>
            </div>
            <div id="leftcolumn">
                <? require ($_SERVER['DOCUMENT_ROOT'] . "/template/includes/menu/menu.php") ?>
            </div>
            <div id="content">
This is the console message that I get when including menu.php into my template page.

ReferenceError: $ is not defined 
$(function() {

This is part of the menu.php page

  1. <link rel="stylesheet" href="dropdown-menu.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="dropdown-menu.min.js"></script>
  2. <script type="text/javascript">
    $(function() {
        $('#example4').dropdown_menu({
            sub_indicators : true,
            vertical : true
        });
    });
    </script>
  3. <style type="text/css">
    #example4 {
        width: 250px;
    }
    </style>
  4. <ul id="example4" class="dropdown-menu">


I tried referencing jquery from both the menu.php page as shown and in the main template page.

Based on the error I assume jquery is not being loaded but I cannot see why.