diff --git a/app/assets/javascripts/bootstrap-dropdown-submenu.js b/app/assets/javascripts/bootstrap-dropdown-submenu.js new file mode 100644 index 00000000..bef1fa3c --- /dev/null +++ b/app/assets/javascripts/bootstrap-dropdown-submenu.js @@ -0,0 +1,17 @@ +$(document).ready(function () { + $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) { + event.preventDefault(); + event.stopPropagation(); + $(this).parent().addClass('open'); + + var menu = $(this).parent().find("ul"); + var menupos = menu.offset(); + + if ((menupos.left + menu.width()) + 30 > $(window).width()) { + var newpos = -menu.width(); + } else { + var newpos = $(this).parent().width(); + } + menu.css({left: newpos}); + }); +}); diff --git a/app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss b/app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss new file mode 100644 index 00000000..d0855298 --- /dev/null +++ b/app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss @@ -0,0 +1,38 @@ +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; +} + +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: #cccccc; + margin-top: 5px; + margin-right: -10px; +} + +.dropdown-submenu:hover > a:after { + border-left-color: #ffffff; +} + +.dropdown-submenu.pull-left { + float: none; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +}