How do I add a javascript menu?

How do I add a javascript menu?

by Rena P -
Number of replies: 3
Hi Moodlers

I'm trying to add a JS menu to my Moodle site, but am somewhat flummoxed as to where I should put the JS files and associated folder.

Am I correct in assuming it would have to be horizontal nav bar? Is there any way I can put it into a HTML block? (I think I know the answer to this, but figure you've got to be in it to win it!!! wink )

I've looked at some of the plugins for this, and none of them seem quite "sexy" enough ... sad I have all the JS coding I need, I'm just not really sure where to put it!

I'm on version 1.8.3 + (2007021532).

Any takers?

Rena
Average of ratings: -
In reply to Rena P

Re: How do I add a javascript menu?

by Chad Outten -
Hello Rena,

it really depends on the actual nature of the js & what function is serves. for example the YUI menu is a js style menu that can be added as a block instance in every course. process as follows...
  1. download from url below
  2. extract files
  3. copy yui_menu folder & all sub-folders, files to 'blocks' directory of your moodle install
  4. copy lang folder to lang dir on moodle install
  5. go to http://www.yourmoodle.com/admin
-final step adds necessary structure to your moodle db

http://moodle.org/mod/data/view.php?d=13&rid=915


pls provide more detail in terms of what you're trying to achieve > it will help us help you! do you intend to use the js on the site page, course pages, in a block? what does the script do?

fyi > the html block is generally used to insert html or media such as images, audio, video or flash.

HTH
In reply to Chad Outten

Re: How do I add a javascript menu?

by Rena P -
Hi Chad

Many thanks for your help and suggestions. The JS I was wanting to use is a fairly simple navigation menu, created with a program called All Web Menus. It would allow users to navigate through what is quite a complex set of materials without having a seriously long menu; the YUI course menu looked like it would still be too long for my needs.

The structure of the menu is outlined in the attached image, but the basic issues are that there are 32 units ("courses" in Moodle, coz I've put it together as a metacourse) divided into 3 modules, plus animated tutorials, support forums, and an introductory unit etc. As the YUI course menu includes links to all sorts of other bits and bobs from each course, I think it would be unwieldy at best ...

I thought it might be easier to put the menu in a top nav bar rather than on the LHS, but am slightly concerned that this would look a bit clunky given that there is already the Moodle "breadcrumb" navigation at the top.

blush I'm not sure what the difference is between a "site page" and a "course page". If it was possible to have all my courses use something akin to a frame I'd be over the moon, but I think this is less likely to happen in Moodle.

Hmm, not sure what to do next really. shy

Any help and suggestions, as ever, greatly appreciated! smile


Attachment Navigation_menu.jpg
In reply to Rena P

Re: How do I add a javascript menu?

by Ms. Royce -

Hello Rena,

Welcome to Moodle. I am also new and we have several .js menus on our site. Our site is very customized and we are considering creating separate files to embed menu links instead of dealing with designing Moodle elements. We're doing this because we don't want every item we create to show up in the menu for the header or sidebar. But for now, our horizontal header menu is located in a separate header directory that contains the .js file. The header picture is in the pix directory. Then, we placed the menu design code into the layout stylesheet (we included all features color, font, etc... for the .js file in this location). Make sure all of your links are correct and the style sheet location is placed correctly in your .js file. 

Contents of header.html:

    <div class="headermain"><img src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/pix/home.jpg" ></div>
   <div class="headermain"><script type="text/javascript" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/header/your.js"></script></div>
   <div class="headermenu"><?php echo $menu ?></div>
</div>

<?php } else if ($heading) {  // This is what gets printed on any other page with a heading
?>

   <div id="header" class="clearfix">
      <div class="headermain"> <img src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/pix/home.jpg" ></div>       
 <div class="headermain"><script type="text/javascript" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/header/your.js"></script>
           </div></div>

<?php } ?> 

Here is another link on editing the header.html file: http://moodle.org/mod/forum/discuss.php?d=87562

A vertical .js file menu can also be placed in a "label" block. I would not use an html block because that only links you to an html page. Make sure your design elements and links are correct. You will do just fine.

Best Wishes...