Hello everyone.
How do I get a collapsible menu in an HTML Block. I want to to plac links to external pages, but the list is long. So collapsible menu is the way to go.
Anyone?
Running Moodle 2.1
There are out there many css solutions which work on bulleted lists. You organize the links in a bulleted list and add the css at the backend of the block (html mode). Just google and you should be able to find something to your liking and we can take it from there if you need help putting it together.
i see there are a lot, but i am not sure where to place the css files that comes with the script.
In searching moodle forums, i see many people talking about Collapsible Menu Bloack but in Moodle 2.1, I dont see that option.
Case in point: http://moodle.org/mod/forum/discuss.php?d=96236&parent=461937
There will be a CMB for 2.1 as soon as someone finds the time/money to implement it.
The simplest way to apply the css is to copy it from the file(s) and paste it inside a style tag which you can add to the block in html mode.
<style type="text/css">
... paste here css code...
</style>
Where shall I place the Javascript file that goes with it?
This goes in the header section:
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
$("#secondpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
//slides the element with class "menu_body" when mouse is over the paragraph
//$("#secondpane p.menu_head").mouseover(function()
//{
// $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
// $(this).siblings().css({backgroundImage:"url(left.png)"});
//});
});
</script>
This is my menu in the body section:
<div style="float:left" > <!--This is the first division of left-->
<div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
<p class="menu_head"><font color="#6295DA" style="font-size: 11pt">Histología Introducción</font></p>
<div class="menu_body"><font size="2">
<a href="http://aprendemedicina.com/Histologia_Introduccion.html"><img src="http://aprendemedicina.com/moodle/theme/image.php?theme=aardvark_makeover&image=icon&rev=173&component=page" class="activityicon" style="border:0px initial initial; vertical-align: middle; height: 10px; width: 10px"> Histología Introducción</a>
<a href="http://aprendemedicina.com/moodle/mod/page/view.php?id=12"><img src="http://aprendemedicina.com/moodle/theme/image.php?theme=aardvark_makeover&image=icon&rev=173&component=page" class="activityicon" style="border:0px initial initial; vertical-align: middle; height: 10px; width: 10px"> Microscopía</a>
<a href="http://aprendemedicina.com/moodle/mod/page/view.php?id=13"><img src="http://aprendemedicina.com/moodle/theme/image.php?theme=aardvark_makeover&image=icon&rev=173&component=page" class="activityicon" style="border:0px initial initial; vertical-align: middle; height: 10px; width: 10px"> Técnicas Histológicas</a>
<a href="http://aprendemedicina.com/moodle/mod/page/view.php?id=14"><img src="http://aprendemedicina.com/moodle/theme/image.php?theme=aardvark_makeover&image=icon&rev=173&component=page" class="activityicon" style="border:0px initial initial; vertical-align: middle; height: 10px; width: 10px"> Artefactos</a>
<a href="http://aprendemedicina.com/moodle/mod/page/view.php?id=15"><img src="http://aprendemedicina.com/moodle/theme/image.php?theme=aardvark_makeover&image=icon&rev=173&component=page" class="activityicon" style="border:0px initial initial; vertical-align: middle; height: 10px; width: 10px"> Colorantes</a>
</font>
</div>
</div> <!--Code for menu ends here-->
</div>
How Can I get this to work inside of Moodle HTML Block
Assuming this is a user end block (add and edited from the course page) you may be able to upload the file to a certain folder in the moodle file system (haven't tries that on 2.1) and refer to it from a script tag inside the block in the following way:
<script type="text/javascript" src="js-file-url-goes-here"></script>
Alternately you can dump the script into a script tag in the block in the following way:
<script type="text/javascript">
//<![CDATA[
js-code-goes-here
//]]>
</script>
hth
That worked. I placed the Javascript file in the root directory of moodle and made reference to it as you suggested.
Now one last issue I am having and its solved......
The menu starts of expanded. Its after you click on the Main topic does it collapse. What can I do to fix this.
I thank you in advance for your help.
Assuming that this is a part of the code in your js file, try adding the line in red. hth
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function() {
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
$("#secondpane p.menu_head").click(function() {
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
$("#firstpane p.menu_head").trigger('click');
//slides the element with class "menu_body" when mouse is over the paragraph
Mr GURU !!!!!!! Thanks man. I really Appreciate that.
Turn editor off in your moodle profile, edit the block and dump all that there. For subsequent editing of the block you will have to first turn the editor off.
That worked. I placed the Javascript file in the root directory of moodle and made reference to it as you suggested.
Now one last issue I am having and its solved......
The menu starts of expanded. Its after you click on the Main topic does it collapse. What can I do to fix this.
I thank you in advance for your help.