...

View Full Version : Importing Menu contents via external javascript file?



pippao
08-22-2008, 02:11 AM
Hi!!

Wondering if you could help a lady in distress!!!

I was wondering if there is any possibility at all of possibly placing the menu contents of this:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

Into an external javascript or file rather than having it in the HTML source code?

I am trying to utilise a menu for a large training site (300+ pages) and finding a navigation is difficult. I've had a look at a few Javascript tree menus, but visually they aren't suitable. I don't particularly want to insert the same menu into 300+ pages, the code starts getting messy with large amounts of content and if I have to make a change then it's a pain in the ***.

On top of that I'm limited to working within a Interwoven Teamsite template (a bit like having to enter in code straight into this editor without access to the overarching CSS files, page source code etc.)

I can upload and run external javascripts though.

Thankyou,

Pippa

rangana
08-22-2008, 06:56 AM
The best way I could think of is to use server-side.

Try PHP include() (http://us3.php.net/include/).

Save the markups involved into on PHP file (try accordion.php):


<div class="arrowlistmenu">

<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/" class="subexpandable">Menu Gallery</a>
<ul class="subcategoryitems" style="margin-left: 15px">
<li><a href="http://www.cssdrive.com/index.php/main/category/C34/">Blue Color</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/category/C36/">Green Color</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/category/C37/">Orange Color</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/category/C33/">Red Color</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/category/C38/">Brown Color</a></li>
</ul>
</li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>

<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>

<p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>
<p>
- <a href="current.htm?expandable=0">Expand 1st header within "expandable" header group</a><br />
- <a href="current.htm?expandable=1&subexpandable=0">Expand 2nd header within "expandable" header group and 1st header within nested "subexpandable" group</a><br />
</p>

<p>Helpful links: </p>
<p>
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br />
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br />
</p>


And call that file (accordion.php) into the pages you want them to be placed:


<?php include('accordion.php'); ?>


Hope that makes sense.

shae marks
05-25-2009, 03:03 AM
I was wondering if there is any possibility at all of possibly placing the menu contents of this:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

Into an external javascript or file rather than having it in the HTML source code?

I am trying to utilise a menu for a large training site (300+ pages) and finding a navigation is difficult. I've had a look at a few Javascript tree menus, but visually they aren't suitable. I don't particularly want to insert the same menu into 300+ pages, the code starts getting messy with large amounts of content and if I have to make a change then it's a pain in the ***.

On top of that I'm limited to working within a Interwoven Teamsite template (a bit like having to enter in code straight into this editor without access to the overarching CSS files, page source code etc.)

I can upload and run external javascripts though.
shae marks (http://mielofon.com/model/shae_marks)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum