Bootstrap custom menus - this may help you

Bootstrap custom menus - this may help you

由Brian Merritt發表於
Number of replies: 16

Moodle 2.4 Bootstrap theme - may or may not apply to 2.5 clean theme.

Twitter Bootstrap by default does NOT support automatic drop down of custom menu items, nor can you click the top menu item.

Moodle users may find this contra to how they expect the menus to work.

I have worked out the following - feel free to improve on it!

For automatic Bootstrap dropdowns add this to your css:

/* Automatic drop down in Navbar Fix for Bootstrap */
.sidebar-nav {
 padding: 9px 0;
}
.dropdown-menu .sub-menu {
 left: 100%;
 position: absolute;
 top: 0;
 visibility: hidden;
 margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
 visibility: visible;
}
.dropdown:hover .dropdown-menu {
 display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
 margin-top: 0;
}
.navbar .sub-menu:before {
 border-bottom: 7px solid transparent;
 border-left: none;
 border-right: 7px solid rgba(0, 0, 0, 0.2);
 border-top: 7px solid transparent;
 left: -7px;
 top: 10px;
}
.navbar .sub-menu:after {
 border-top: 6px solid transparent;
 border-left: none;
 border-right: 6px solid #fff;
 border-bottom: 6px solid transparent;
 left: 10px;
 top: 11px;
 left: -6px;
}

To make the top menu item clickable, change the code in the bootstrap renderer (core.php)

$content .= html_writer::start_tag('a', array('href'=>$url, 'class'=>'dropdown-toggle', 'data-toggle'=>'dropdown'));

Should be changed to:

$content .= html_writer::start_tag('a', array('href'=>$url));

In other words, remove class and data toggle attributes to enable click on top menu items. Will try on 2.5 once I get round the parent child issue I am currently having with 2.5

評比平均分數： -
In reply to Brian Merritt

Re: Bootstrap custom menus - this may help you

由Mary Evans發表於

What do you mean the Bootstrap menu does not work?  It uses jQuery in 2.4 version, or mine Tiny bootstrap theme does, and you can use jQuery in Moodle 2.4 like you can any other type of .js script.

See my 'Tiny' bootstrap theme for guidance on how to do that the old way, as adding jQuery to Moodle has changed in 2.5.

Cheers

Mary

評比平均分數： -
In reply to Mary Evans

Re: Bootstrap custom menus - this may help you

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

I concur with Mary, it works for me.  I know that Julian had some issues with the Essential theme but that was to do with layering over the custom jQuery slider he has.  Also the latest Essential code on GitHub (see the other thread) now has the M2.5 way of using jQuery in a theme.  And you do need the dropdown toggle classes as that is what the YUI code is using to implement the functionality.

Odd! 微笑 - Does FireBug show errors?

評比平均分數： -
In reply to Mary Evans

Re: Bootstrap custom menus - this may help you

由Brian Merritt發表於

By default, Bootstrap requires the user to click the top menu item to see submenu items.  The CSS I showed above enables the navbar menu to drop automatically using CSS.

Also by default, Bootstrap does not allow a click on the top menu item.  For example:

My Courses (top menu item)

Course 1 (submenu item)

Course 2 (submenu item)

Course 3 (submenu item)

 

The bootstrap default is hovering over "My Courses" does not drop down unless the user clicks, nor is it possible to click on "My Courses" in order to go to that page.

A better phrase may have been - works, but not in the way Moodle users expect it to work ?

評比平均分數： -
In reply to Brian Merritt

Re: Bootstrap custom menus - this may help you

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Ok 微笑 - so is this a new usability issue for the Fontend team in the tracker to decide?

評比平均分數： -
In reply to Gareth J Barnard

Re: Bootstrap custom menus - this may help you

由Brian Merritt發表於

OK, so now I am back on 2.5 (Thanks Gareth for straightening me out)

If I put the following into the custom menu area under appearance/theme/settings

Home|http://www.google.com|Google Home Page
My Courses|https://www.google.co.uk/|Top Menu Item
-Course 1|https://www.google.co.uk/|Course 1
-Course 2|https://www.google.co.uk/|Course 2
-Course 3|https://www.google.co.uk/|Course 3

Then the drop down useability issue has gone, but there is still one strange effect on the Top Menu Item.

The Bootstrap Theme doesn't output "My Courses" for the top menu, it outputs "Top Menu Item".  This is because the coding logic in the renderer takes a different variable compared to most Moodle Themes.

Also, Top Menu Item (which should read "My Courses" is NOT clickable.

Please see the image below:

 

Not sure how crucial this is in terms of modifying custom menu behaviour, but users do expect to be able to click on Menu items.

評比平均分數： -
In reply to Brian Merritt

Re: Bootstrap custom menus - this may help you

由Mary Evans發表於

The syntax for the menu is ...

Title | URL | Alt | Lang

Moodle HQ | http://moodle.com | Moodle HQ | en

Since you don't need to have a multi-lingual menu you can leave the language 'en' off but try adding the | just after you Alt title like so...

Home|http://www.google.com|Google Home Page|
My Courses|https://www.google.co.uk/|Top Menu Item|
-Course 1|https://www.google.co.uk/|Course 1|
-Course 2|https://www.google.co.uk/|Course 2|
-Course 3|https://www.google.co.uk/|Course 3|


評比平均分數： -
In reply to Mary Evans

Re: Bootstrap custom menus - this may help you

由Mary Evans發表於

But then again it may be you have altered some code in the renderer for the menu, you being a bit of a hacker! 微笑

評比平均分數： -
In reply to Brian Merritt

Re: Bootstrap custom menus - this may help you

由Mary Evans發表於

Hi Brian,

I have just tested this on demo.moodle.net and it is indeed a BUG.

Can you report it as such in Moodle Tracker and add the screenshot and description of the problem. Many thanks

Mary

評比平均分數： -
In reply to Gareth J Barnard

Re: Bootstrap custom menus - this may help you

由David Scotson發表於
I'm fairly sure this was already covered before. I think the key issue hinged on "hover" not making any sense on touch devices. I don't remember if it was in the forums or bug tracker though.
評比平均分數： -
In reply to Brian Merritt

Re: Bootstrap custom menus - this may help you

由Mary Evans發表於

Is there a my course menu in Bootstrap? Or are you talking about the one you added?

評比平均分數： -
In reply to Brian Merritt

Re: Bootstrap custom menus - this may help you

由Brian Merritt發表於

Please note the original message applies only to 2.4.  There is an issue with 2.5, and that is highlighted separately below

評比平均分數： -
In reply to Brian Merritt

Re: Bootstrap custom menus - this may help you

由Sean Marx發表於
Testers的相片

Hi Brian

Just a quick FYI. I had a problem in Moodle 2.5 where I built a theme based on the bootstrap-master. The custom menu dropdown did not work but your patch at the top of the post worked like a charm.

Thanks
Sean

 

 

評比平均分數： -
In reply to Sean Marx

Re: Bootstrap custom menus - this may help you

由Muddasar Amin發表於

Hi, 

can we use bootstrap theme on moodle 2.4?
if yes please tell the steps or any helpful link

regards.

評比平均分數： -