Link to home
Start Free TrialLog in
Avatar of kdschool
kdschool

asked on

jquery two menus one not working after adding second one.

I am attaching the code for this.  If I use the top menu by itself works fine.  When I add the second jquery menu which I need to have then the top one works except the drop down menus. I listed.  Here are the main page and two menu files.  I can provide other if necessary.  What happens is the side menu works fine but the two drop down menus on the top stop working when I add the second menu.
MainPage.pdf
topmenu.pdf
SideMenu.pdf
Avatar of Ioannis Paraskevopoulos
Ioannis Paraskevopoulos
Flag of Greece image
Hi,

The way you have given the code is very hard for any of us o read. topmenu.pdf seems to be the code of the js library you are using, so really not needed. The best way for you would be to use the code button when you write your question and put all related code in there. This way you help us help you.

Now, reading your code it is not very clear which file calls which, as you have changed the names, but i would guess you are trying to load what is in SideMenu.pdf from what is in MAinPage.pdf. An issue i see there is having proper HTML headers in your SideMenu. When you include a file then what you actuually do is replacing  '<!--include.....-->' with the contents of the file indicated by the include. In your case you will end up with an HTML document containing two DOCUMENT declarations and two head elements. Moreover, the second declaration and head element will be in the body element of the main page leading to a malformed html.

I would suggest as a first step to remove rows 1-12 and 78-81 from SideMenu.pdf.

Try that and let us know how did it go.

Giannis
Avatar of kdschool
kdschool

ASKER

The side menu works fine.  It's the top menu.  It does not show the two submenus dropdowns on the last two items on the menu.  I named them dropdown.  I don't see the code loader.  Can you direct me where it is and I can load all the files.

The topmenu opens inside the MainPage.  That is theone not working.
Avatar of Ioannis Paraskevopoulos
Ioannis Paraskevopoulos
Flag of Greece image
Hi,

Pls check the screenshot in order to find the button.
User generated image
I would also like if you can to open your page in the browser. This will have the final code after setting all the includes etc. If you could get the page source of that (usually it is ctrl + U) and paste it in a comment, it might give us an idea of what is wrong.

Disclaimer: when i refer to us, i do not mean to be a megalomaniac who tries to refer to himself in the third plural... :) . I just refer to the Experts in general, because someone else could also provide an answer.

Thanks,
Giannis
Avatar of kdschool
kdschool

ASKER

Here is the main page code and the jquery (menu.shtml) that are not working from the source file in browser.  let me know what other code you need. Thank you.


<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
	<title>Home Page</title>
	

</head>
<body>
<div id="hronline" class="small_text">
    	<div class="container">
		<div class="grid_14">
   	<div id="nav">
		<ul class="navigation">
            <li><a href="#">HOME</a></li>
			<li><a href="#">LINK</a></li>
			<li><a href="#">LINK</a></li>
		</ul>
	</div>
</div>
            
<div class="grid_13">
       <!-- People Finder -->
       <div class="search_pad">
       <div class="search">

            <form action="#" method="post" name="PeopleDirLookupBox" target="_parent">
				<input class="gray_text textbox" type="text" name="Search" size="12" value="People Finder..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'People Finder...';}"  onfocus="if (this.value == 'People Finder...') {this.value = '';}">
                <input type="image" class="magnify" name="search" src="images/search.gif" alt="Search">
    			<!-- <input class="small_text submit" type="submit" name="goButton" value="Go"> -->
    			<input type="hidden" name="Button" value="Search">
			</form>         
      </div>
      </div>
</div>
            
<div class="grid_13">
      <!-- Keyword Search -->
      <div class="search_pad">
      <div class="search">
            
<form name="kform" method="get" action="#" target="_parent">
    <input class="gray_text textbox" name="keyword" size="12" maxlength="30" value="Keyword Search..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'Keyword Search...';}"  onfocus="if (this.value == 'Keyword Search...') {this.value = '';}">
     <input type="image" class="magnify" name="search" src="images/search.gif" alt="Search">
    <!-- <input class="small_text submit" type="submit" value="Go" name="submit"> -->
</form>
      </div>
      </div>
</div>
            
 <div class="grid_13">
        <!-- Google Search -->
        <div class="search_pad">
        <div class="search">
   		<form name="gs" method="GET" action="#"> 
      	<input class="gray_text textbox" type="text" name="q" size="12" maxlength="256" value="Google Search..." onclick='this.value = "";' onblur="if (this.value == '') {this.value = 'Google Search...';}"  onfocus="if (this.value == 'Google Search...') {this.value = '';}" />
         <input type="image" class="magnify" name="search" src="images/search.gif" alt="Search">
      	<!-- <input class="small_text submit" name="btnG" value="Go" type="submit" /> -->
		 <input type="hidden" name="entqr" value="3" />
		<input type="hidden" name="output" value="xml_no_dtd" />
		<input type="hidden" name="sort" value="date:D:L:d1" />
		<input type="hidden" name="ud" value="1" />
		<input type="hidden" name="lr" value="">
		<input type="hidden" name="num" value="10">
		<input type="hidden" name="client" value="fedex_search_frontend">
		<input type="hidden" name="proxystylesheet" value="fedex_search_frontend">
		</form>
       </div>
       </div>
</div>

        </div>
</div>
    
<div id="hrbanner">
    <div class="container">
        <div class="grid_15">    <br />        
        		<h4 class="grey_text timesnewroman ">WEB SITE NAME FOR PAGE</h4>                
        </div>
        <div class="grid_16 logo_space"></div>
     </div>
</div><br>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
	<title>Corp Safety Health &amp; Fire Prevention</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/jetmenu.css" rel="stylesheet"><br>

  	<script type="text/javascript" src="js/jetmenu.js"></script>
  	<script type="text/javascript">
			jQuery(document).ready(function(){  
				$().jetmenu();
			});
		</script>
</head>

<body>

<div id="menu_wrap">
    <div class="container">
 		<div class="content">
<ul id="jetmenu" class="jetmenu purple">
     	<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
        <li><a href="#">DROP DOWN NOT WORKING</a> 
         <ul class="dropdown"> 
		<li><a href="#" target="_blank">SUB MENU</a></li> 
		<li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        </ul></li>

		<li><a href="#">DROP DOWN NOT WORKING</a>
        <ul class="dropdown"> 
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU </a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SSUB MENU</a></li>
		</ul>
 		</div>
	</div>
</div>
</body>
</html>


<div class="container white_box">
<div class="grid_9"><br /></div>
	<div class="grid_9">
	  <div class="grid_12">

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Main Menu</span></a></li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='/adfwp/adfwpMain.shtml'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu </span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu </span></a></li>
         <li><a href='#'><span>Main Menu 
 </span></a></li>
      </ul>
   </li>
      <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
      </ul>
   </li>
    </li>
      <li class='has-sub'><a href='#'><span>Main Menu</span></a>
      <ul>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li class='last'><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Menu</span></a></li>
         <li><a href='#'><span>Main Mene</span></a></li>
      </ul>
   </li>
</div>

</div>
       <div class="grid_12a">
      <img src="images/LoadingAircraftC.jpg"  alt="image"></div><br />
      <div class="grid_2a ltgreen_box">
      <h3 class="oswald"><br />Reminders for the Team</h3>
 <p class="roboto">In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque<br /><br />
In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque
<br /><br />

</div>


</div>      <!--closes Grid 9--> 
    
<div class="grid_3 gray_box">
    	<h2 class="roboto white_text large_text underline">What's New for the Team</h2>  
		<p class="roboto white_text med_text">
<a href="#"> Item 1</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item21</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 3</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 4</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item51</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 6</a></p> 
		<p class="roboto white_text med_text">
        <a href="#"> Item 7</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 8</a></p>
		<p class="roboto white_text med_text">
       <a href="#"> Item 9</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 10</a></p>
		<p class="roboto white_text med_text">
        <a href="#"> Item 11</a></p>
</div>
    </div>
    
<div class="container">
   		<div class="grid_8a ltyellow_box">
      	<h2 class="oswald">MESSAGE FIELD ONE</h2>
      	<p class="roboto"> 
		In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque  <br />
 		</div>

		<div class="grid_8b ltyellow_box">
        <h2 class="oswald">MESSAGE FIELD TWO</h2>
        <p class="roboto">In explicari disputationi pro, erant legendos definitiones id qui, platonem reprimique sea an. Has ex noster detracto omnesque <br /></p>
		</div>
</div>      
<div class="grid_9"><br /></div>

	<div id="footer">
    	<div class="container">
		<div><h2 class="oswald white_text"> QUICK RESOURCES</h2> </div>

  	<div class="grid_3">
    <div><h3 class="oswald white_text"> HOT TOPICS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div> 


    <div class="grid_3">
    <div><h3 class="oswald white_text"> COMMUNICATIONS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div
    ></div>
    
    <div class="grid_3">
 <div><h3 class="oswald white_text"> CONTACTS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div
 ></div>
 
	<div class="grid_3">
<div><h3 class="oswald white_text"> MANUALS</h3> </div>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic One</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Two</a></p>
      <p class="roboto med_text white_text"><a href="#" target="_blank">Topic Three</a></p>
	</div
    ></div>
       	
<div class="grid_11"><br />
	<hr style="height:.25px" color="#999999" width="1110px">
	<p class="small_text white_text">This site is for users only that are inside the firewall.</p>
</div>

        </div>
    </div>
</body>
</html>

Open in new window


  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
	<title>Corp Safety Health &amp; Fire Prevention</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/jetmenu.css" rel="stylesheet"><br>

  	<script type="text/javascript" src="js/jetmenu.js"></script>
  	<script type="text/javascript">
			jQuery(document).ready(function(){  
				$().jetmenu();
			});
		</script>
</head>

<body>

<div id="menu_wrap">
    <div class="container">
 		<div class="content">
<ul id="jetmenu" class="jetmenu purple">
     	<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
		<li><a href="#">MAIN MENU</a></li>
        <li><a href="#">DROP DOWN NOT WORKING</a> 
         <ul class="dropdown"> 
		<li><a href="#" target="_blank">SUB MENU</a></li> 
		<li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        </ul></li>

		<li><a href="#">DROP DOWN NOT WORKING</a>
        <ul class="dropdown"> 
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU </a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SUB MENU</a></li>
        <li><a href="#" target="_blank">SSUB MENU</a></li>
		</ul>
 		</div>
	</div>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Ioannis Paraskevopoulos
Ioannis Paraskevopoulos
Flag of Greece image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial