Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

adding spry menu to multiple pages

Status
Not open for further replies.
rrmcguire

rrmcguire

Programmer
Oct 13, 2010
304
US
I've created a spry menu on my main index page, rather than creating a template and having to recreate my spry menu, is there a better way to include it in my other pages, as it will be used on every page in my site, approx. 10 pages.

thanks
 
Sort by date Sort by votes
You can put the code for the menu in a separate document and include that document into every page. That's probably the easiest way to do it. All you need is some sort of scripting language to do so.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
How do I "include" it, plus how does it know where to put the menu within the page?

Thanks
 
Upvote 0 Downvote
You include it in the place where you want to the menu to appear. You would simply cut and paste the menu code from each file into separate file and in its space you would put the include statement.

How you would include it depends on the server side language you would use. Since you didn't tell us which language you are using (if any), we cannot tell you how to do it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
its a spry menu added in through Dreamweaver CS4, I believe from the below its Javascript



<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a class="MenuBarSubmenu" href="#">Services</a>
<ul>
<li><a href="#">Flatbed</a>
<li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
 
Upvote 0 Downvote
I found this in another forum about creating a template for my spry menu which I've done, sprymenu.dwt with my assets for my spry menu linked to it as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a class="MenuBarSubmenu" href="#">Services</a>
<ul>
<li><a href="#">Flatbed</a>
<li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>


<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>


I then go to my page which Im trying to put the template into by creating an editable region and draggin the template into it as was mentioned here:



but nothing comes up?
 
Upvote 0 Downvote
php is the scripting to use but when I put the include in as

?php include("menu.php"); ?>


where menu.php is:

<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a class="MenuBarSubmenu" href="#">Services</a>
<ul>
<li><a href="#">Flatbed</a>
<li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>


<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>


nothing shows up?
 
Upvote 0 Downvote
You also need to put the two lines
Code: 
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
in the head of every document. This is the main javascript and styles for the Spry Menu. When you have that, it should work.

You need not give your menu php extension, since it is only html code. By giving it php extension, you're needlessly sending it through php interpreter. The page that calls the include must however have php extension (or any other extension that is sent through php interpreter).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
ok, that didn't seem to work. I have my menu within my Includes folder as:

<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a class="MenuBarSubmenu" href="#">Services</a>
<ul>
<li><a href="#">Flatbed</a>
<li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>


<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>


my php included in my flatbedservicesnew.htm is as:

<?php include("/Includes/menu"); ?>

and I have the below in the head of my flatbedservicesnew.htm as well:

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
 
Upvote 0 Downvote
ok, so when I view it in dreamweaver now it shows up with the file page as but its not showing up when I upload it our webserver

this would be the correct format for the php include correct?

<?php include("/Includes/menu"); ?>

or does the menu need to be part of a web address?
 
Upvote 0 Downvote
It is the correct way to use php include, however, it might not be the correct path. You're looking for a file called "menu" with no extension that resides in the folder "Includes" in the root folder.

There are many things to consider here:

1. Your server could be *nix based and would be case sensitive so "includes" would not be the same folder as "Includes".
2. PHP can access files beyond your document root, so root folder will be different for PHP than it is for normal HTML files. You can read this for more insight on the matter.

As the first step, I would put the including page (flatbedservicesnew.php) and the included page (menu) in the same folder and try to include the menu without a path. If that works, then you only have to figure out the path problem, if you want to have the menu file reside in a different folder.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
putting the menu into the root directory worked. Yea!

Now, do I need to leave the extension on the pages which use this as .php?
 
Upvote 0 Downvote
Yes, it would be best to leave it as php. You can also modify the server settings to send htm/html through the interpreter as well, but that could just cause overhead when serving html files that have no php code.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
340
pmonett
pmonett
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
658
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
351
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
270
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
691
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top