changing custom menu for mega menu

changing custom menu for mega menu

by Gary Greer -
Number of replies: 17
Hi all,

Trying to make a mega menu witht he custom menu. I've got strange things happening in the way that divs are opened and closed. What I'm trying to do is at http://shanejeffers.com/blog/megadrop-mega-drop-down-menu-css-framework

I've set up the following renderer (please ignore the commented out bits - I've been slashing away at this)

 * Renders a custom menu node as part of a submenu
     *
     * @see render_custom_menu()
     *
     * @staticvar int $submenucount
     * @param custom_menu_item $menunode
     * @return string
     */
    protected function render_custom_menu_item(custom_menu_item $menunode) {
        // Required to ensure we get unique trackable id's
        static $submenucount = 0;
        if ($menunode->has_children()) {
            // If the child has menus render it as a sub menu
           $submenucount++;
         //this only fires when submenu present
        // echo $menunode->get_title();
            //if array($menunode->get_title()=="column") {
            //print ('Nothing');
            //}
            $content .= "<li>";
            $content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title()));
            $content .= "<div class='container-4'><div class='col2'>";
    //$content .= html_writer::start_tag('div',array('class'=>'col2'));
            if ($menunode->get_url() !== null) {
                $url = $menunode->get_url();
            } else {
                $url = '#cm_submenu_'.$submenucount;
            }
            //echo $menunode->get_text();
           
           
    //$content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title()));
            //$content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title()));
    //    $content .=" <div class=\"col2\">";   
    //$content .= html_writer::start_tag('div',array('class'=>'container-4'));
            foreach ($menunode->get_children() as $menunode) {
            if ($menunode->get_text() == "columnStart") {
                $content .=" <div class=\"col2\">";
                }
                elseif ($menunode->get_text() == "columnEnd") {
                $content .="</div>fred";
                }
                else {
                $content .= $this->render_custom_menu_item($menunode);
   
                }
           
            }
           
            $content .= html_writer::end_tag('li');
            //$content .= html_writer::end_tag('div');
        } else {
            // The node doesn't have children so produce a final menuitem
            $content = html_writer::start_tag('li');
            if ($menunode->get_url() !== null) {
                $url = $menunode->get_url();
            } else {
                $url = '#';
            }
            $content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title()));
            $content .= html_writer::end_tag('li');
        }
        // Return the sub menu
        return $content;
    }

and it produced this HTML

          <ul id="yui_3_13_0_2_1402197781732_13" class="nav clearfix"><li id="yui_3_13_0_2_1402197781732_12"><a id="yui_3_13_0_2_1402197781732_11" title="Current Students" href="http://127.0.0.1/">Current Students</a></li><li><a title="Centres of Excellence">Centres of Excellence</a><div class="container-4"><div class="col2"></div></div></li><li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li><li><a title="Moodle development" href="https://moodle.org/development">Moodle development</a></li> <div class="col2"><li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle  Docs</a></li></div>fred<li><a title="Resources" href="http://127.0.0.1/">Resources</a></li><li><a title="Library" href="http://127.0.0.1/">Library</a></li><li><a title="Contact Us" href="http://127.0.0.1/">Contact Us</a></li></ul>    

If you look, you can see that as soon as the divs 'container-4' and 'col2' are opened, they're shut again. Where are the closing div tags coming from???

Many thanks for any help.

Gary


Average of ratings: -
In reply to Gary Greer

Re: changing custom menu for mega menu

by Mary Evans -

Check this renderer out if you read through it you will see the opening ul tag and closing ul tag as well as open closing li tags too.

https://github.com/lazydaisy/tiny-bootstrap-project/blob/master/renderers.php#L348-L405

Average of ratings: -
In reply to Mary Evans

Re: changing custom menu for mega menu

by Mary Evans -

Actually looking at the menu, you would be better coding this by hand in a file called menu.php and adding it to the header using <?php include('menu.php');:?>

Average of ratings: -
In reply to Mary Evans

Re: changing custom menu for mega menu

by Gary Greer -

Ok, but how do I get access to the objects in php that I need? I'm learning fast, and any pointers would be welcome.

Average of ratings: -
In reply to Mary Evans

Re: changing custom menu for mega menu

by Gary Greer -

Hi Mary and all.


I've been trying to get this to work, but I keep coming up against the DIVs being closed by something apparently outside my control. Even when I build the div tag by hand, and comment out all the html_writer commands related to divs, I am still seeing the closing tag inserted. I'd love to know where it is created, so I can stop it!

Average of ratings: -
In reply to Gary Greer

Re: changing custom menu for mega menu

by Mary Evans -

Hi Gary,

I have been thinking about this and really looking at the menu itself from a purely HTML point of view it is not dissimilar to how the menu is created normally, where each dropdown can have a set of sub directory menu items.

Main header | URL | top level menu title| en

- Sub header 1

-- sub-sub Menu item 1.1
-- sub-sub Menu item 1.2
-- sub-sub Menu item 1.3

- Sub header 2

-- sub-sub Menu item 2.1
-- sub-sub Menu item 2.2
-- sub-sub Menu item 2.3

etc...

So how you build it is the same. So technically all you need to add are the extra divs and classes or rename the classes that are there already.

I'm going to see if I can do this as it would be useful to add to a theme.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: changing custom menu for mega menu

by Gary Greer -

I'd be very interested in what you develop. The mega menu doesn't have seem to have made it to moodle yet. I'm handling the division of the menu sub items into columns by using keywords to indicate the start and end of the column, which are replaced in the code with divs.


I've got something else that's working better a.I'll post it here.


Gary

Average of ratings: -
In reply to Gary Greer

Re: changing custom menu for mega menu

by Mary Evans -

I gave up on it mainly because it was taking me too long...and also becasue I forgot there is Javascript involved as normally dropdown menus don't work easily without it.

Average of ratings: -
In reply to Mary Evans

Re: changing custom menu for mega menu

by anurag gaur -

Hi i want to create Mega Menu like this

check the link :-

Is it possible to create that kind of menu in Moodle.

(Edited by Mary Evans - to remove advertising link - original submission Wednesday, 11 June 2014, 11:34 AM)

 

Average of ratings: -
In reply to anurag gaur

Re: changing custom menu for mega menu

by Mary Evans -

Technically YES if you can make it work in an ordinary webpage then you would be able to code it into a Moodle theme. However what you would not be able to do is use the menu structure of the Moodle menu without lots of hacking.

That said, I am sure the link you added goes against Moodle policy on advertising, because the link contains a product that you have to purchase for you to use it. As such I have to remove it. Sorry about that.

Mary

Average of ratings:Useful (1)
In reply to Mary Evans

Re: changing custom menu for mega menu

by anurag gaur -

Thanks for your reply

But i have no idea how to create that menu by changing custom menu for mega menu.

I have HTML, css and js file but know idea where to put all that files .


Average of ratings: -
In reply to anurag gaur

Re: changing custom menu for mega menu

by Mary Evans -

OK...this is easy...

You add the HTML for the menu into the area of the theme where you want the menu to be. Lts assume just below the header in the Clean theme...OK?

So you would add it like this...
For example where the greyed out code is in theme/clean/layout/column3.php

<div id="page" class="container-fluid">

    <header id="page-header" class="clearfix">
        <?php echo $html->heading; ?>
        <div id="page-navbar" class="clearfix">
            <nav class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></nav>
            <div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div>
        </div>
        <div id="course-header">
            <?php echo $OUTPUT->course_header(); ?>
        </div>
    </header>
<!-- START MegaMenu HTML here -->

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
       <div class="container-4">
           <div class="col2">
            <p>This is the left column</p>
          </div>
          <div class="col2">
            <p>This is the right column</p>
          </div>
       </div>
    </li>
    <li><a href="#">Contact</a></li>
</ul>


<!-- END MegaMenu -->
    <div id="page-content" class="row-fluid">
        <div id="<?php echo $regionbsid ?>" class="span9">
            <div class="row-fluid">
                <section id="region-main" class="span8 pull-right">
                    <?php
                    echo $OUTPUT->course_content_header();
                    echo $OUTPUT->main_content();
                    echo $OUTPUT->course_content_footer();
                    ?>
                </section>
                <?php echo $OUTPUT->blocks('side-pre', 'span4 desktop-first-column'); ?>
            </div>
        </div>
        <?php echo $OUTPUT->blocks('side-post', 'span3'); ?>
    </div>

Next you would need to add the CSS to theme/clean/custom.css

Next you need to add the jQuery. Since Moodle 2.5 Moodle keeps a copy of the most uptoday version of jQuery, and so you need to tall the theme you need to access that file. To do this you need to add the following to the very end of theme/clean/lib.php

<?php
function theme_clean_page_init(moodle_page $page) {
    $page->requires->jquery();
}

Next you can add the script.js that calls the jquery into a new directory called javascript like so...

theme/clean/javascript/script.js

Next you will need to tell Moodle where that file is. So add this line to the end of theme/clean/config.php

$THEME->javascripts_footer = array('script');

That done, you should find that the MegaMenu works. However if it does not then you will need to get back to me as I may have missed something out.

Cheers

Mary

PS: I am talking about this MegaMenu http://shanejeffers.com/blog/megadrop-mega-drop-down-menu-css-framework

Average of ratings:Useful (1)
In reply to Mary Evans

Re: changing custom menu for mega menu

by anurag gaur -

Thanks for your support  Mary..

But can we create Mega Menu like the example link  shared earlier?

I am using Essential theme ,so is it possible to create that kind of Mega menu with essential theme.

Thanks again for your support


Average of ratings: -
In reply to anurag gaur

Re: changing custom menu for mega menu

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

If it is built with the same kind of structure - html, css javascript - then follow the same instructions Mary has given above, with the code from the link you have. It should work.


Average of ratings: -
In reply to Richard Oelmann

Re: changing custom menu for mega menu

by anurag gaur -

Thanks

But with the clean theme or with essential theme

Average of ratings: -
In reply to anurag gaur

Re: changing custom menu for mega menu

by Mary Evans -

Whatever theme you are using, just as long as you remember to change the name clean to essential in the lib.php where you add the code telling Moodle you want to use jQuery,

So...

<?php
function theme_clean_page_init(moodle_page $page) {
    $page->requires->jquery();
}

needs to become... 

<?php
function theme_essential_page_init(moodle_page $page) {
    $page->requires->jquery();
}
Average of ratings: -
In reply to Mary Evans

Re: changing custom menu for mega menu

by anurag gaur -

According to your instruction shanejeffers megadrop-mega-drop-down-menu-css-framework is not working.

Plz help?

Average of ratings: -
In reply to Mary Evans

Re: changing custom menu for mega menu

by anurag gaur -

Great Thanks its working

Now i can follow these steps and create the actual menu which i want to create .

Thanks for your great support Mary...

Average of ratings: -