vsn4ik / bootstrap-submenu Goto Github PK

I tried to build bootstrap-submenu.less using Symfony2 assetics, but the file begins with:

@import "../node_modules/bootstrap/less/variables.less";

This file does not exist when using Composer (bootstrap isn't located there).

FYI, my assetic config is:

assetic:
    # ...
    assets:
       # ...
       bootstrap_submenu_css:
          inputs:
             - %kernel.root_dir%/../vendor/vsn4ik/bootstrap-submenu/less/bootstrap-submenu.less
          filters:
              - lessphp
              - cssrewrite
          output: css/bootstrap-submenu.css
       bootstrap_submenu_js:
          inputs:
             - %kernel.root_dir%/../vendor/vsn4ik/bootstrap-submenu/js/bootstrap-submenu.js
          output: js/bootstrap-submenu.js

The link for "Download the latest release" gives a 404. It is linking to
https://github.com/vsn4ik/bootstrap-submenu/releases/download/v2.0.3/bootstrap-submenu-2.0.3-dist.zip

which apparently is incorrect.

Hi,

1.Submenu version 1.2.13 is working fine.Click the drop down opening the Action menu, Action clicking opened display submenu sub action,... Refer this image

Sample js fiddle link using ver 1.2.13 - https://jsfiddle.net/sattu/rvxuhgjv/1/

2.Latest ver 2.0.4, Click the drop down opening the Action menu, Action clicking not opening next level menu. Plz refer the image

Sample js fiddle link using ver 2.0.4 - https://jsfiddle.net/sattu/zpua4oww/15/

3. In git hub, https://github.com/vsn4ik/bootstrap-submenu/releases docs folder missing from ver 2.0.0 to ver 2.0.4. What is the reason? Up to ver 1.2.13 docs folder available.

Using ver 2.0.4 what I missed? Why submenu level 2 not working.

i try without success to display a submenu

i put a button action on top of a bootstrap-table
Payer submenu is not displayed

i created an example
http://jsfiddle.net/r9o45y0k/

if i put the screen very tiny, the submenu is displayed on the bottom and i can see the submenu

ParseError: Unrecognised input
in mixins.less on line 3, column 15:

2 // dashed: fix caret size for Mozilla Firefox
3 border-@{base}: @caret-width-base dashed;
4

when i add bootstrap-submenu to my project base on electron, the style is wrong, how can i adjust it.

Hi Folks,

I tried implementing bootstrap-submenu in my DoJo page but ended up getting this TyeError for this line of code in "bootstrap-submenu.js" Line No. 67

$.extend(SubmenuItem.prototype, Item.prototype, {

Due to which I am unable to get the submenu-Dropdown in my page

Template of the page is as below

• Another action

                <ul class="dropdown-menu">
                  <li class="dropdown-header">Dropdown header</li>
                  <li><a tabindex="0">Sub action</a></li>
                  <li class="disabled"><a tabindex="0">Another sub action</a></li>
                  <li><a tabindex="0">Something else here</a></li>
                </ul>
  

  ---

  Can you please guide me resolve this issue?

  Regards,
  Amrish

I think it would be useful to have an option to expand the submenu to the left, instead of right, especially when combined with bootstrap's .dropdown-menu-right class.

Do you plan on adding support for version 4, even though it's in alpha at the moment?

Hi!
My menu seems have some problem. When i click on the second submenus the first one disappear.
I've tried to add the script
$('.dropdown-submenu > a').submenupicker();

But nothing happens!!

Here's the link of the site www.tecnopackspaimballaggi.com/prova

Thanks for your help

Giulia

I've been looking at your script. And I really like your menu. I am on the lookout for a similar menu but with accordion submenus instead of "pullouts" like you have in this menu.
I also need it to automatically collapse when it loose focus on mouseOut / mouseleave.
I also need a script that allows for multiple independent instances on a page (hence the collapse on lost Focus)

Is there anyway possible easily achieve this using your menu ?

I am working on a responsive website, where I'd like to keep things as compact as possible, and expanding submenus may cause a problem for me on small mobilescreens, which is why I'd rather go for an accordion style submenu.

thank you in advance for any answer or tips to something already created 👍

On Safari (v9.1.1) when a submenu is clicked, it briefly shows the blue rounded rectangle. This doesn't show for normal Bootstrap menus.

I was able to turn it off via:

.navbar .dropdown-submenu a {
    outline: none;
}

but I would suggest having this turned off in bootstrap-submenu's CSS directly.

When the website is loaded on a mobile device (ie anything lower that 768px width). The submenus within a navbar are always open when the parent dropdown is opened.

It add the display:block element to each submenu dropdown-menu.

However when you load a browser window above 768px and then resize to a mobile device the menu then works.

Any ideas?

Screenshot from the documentation. On my Google Chrome, the cursor is not changed to pointer.

I have a customized bootstrap.css file which sets the min-width: 992px for all navbar related classes. I adjusted the bootstrap-submenu.css file to min-width: 992px. However, when my navbar goes into responsive mode the submenus still come out of the side instead of accordion style. They switch to the standard accordion style at 768px regardless of what is in the css file.

submenu-clicking, going per page.How do I stop going per page?

I downloaded the latest version of bootstrap submenu. My submenus are opening on hover itself, but i want them to be on click. What should i do ??

I have not added the bootstrap.theme file. I dont think that would make the difference.

Because they are floated right, the arrows tend to get hidden under scrollbars when the menu collapses down to mobile. Ideally, they should be aligned to the right of the text in the same way the default carets are.

Current:

Correct:

I have a fix for this already and will submit a pull request momentarily.

I have submenu under normal button in bootstrap and when I click an element in the primary menu it closes the menu and doesn't not show the submenu. This is my menu code http://pastebin.com/8xZm89M3 (sorry for the li elements, they are cloned from other element) and witch this line i initialize it:
$('[data-submenu]').submenupicker();

have like in npm?
I'm doing a project in angular and typescript, starting in the language now, I'm using the visual code and wanted to know if it has how to use only with npm

after debugging with chrome i discover that the open class in the parent dropdown clear off when the submenu dropdown is clicked, is there a way to fix this, am very new to jquery, i tried this $("#firstdrop").on('click', '.dropdown-menu', function (e) { $(this).parent().is('.open') && e.stopPropagation() }); but its definitely not working

Hey @vsn4ik,

I'm having an issue programmatically triggering a dropdown using your plugin. I was trying to just use $('#dropdownToBeClicked').click() but can't get it to work. Is there a specific way to trigger this programmatically?

Thanks!

I installed through yarn and imported into application.js application.scss but it doesn't work. How can I solve it?

I need to open the submenu on hover. Please help. Thanks.

Is this by chance available for bootstrap 3?

Not sure whether to consider it a bug or not but it definitely bit me while trying to implement an angular wrapper... nested submenus must be initialized in the outer > inner order.

If you do it the other way around, individial submenus don't get closed when another is open on the same level, but only if the newly opened one is above the previously opened one.

If you decide it's not a bug, please mention it in the docs?
Thanks

Maybe i missed a documentation, but i didn't see how to have your example having the menus/submenus opening on hover instead of click.

Do you have a list of otions available for your plugin ?

I believe there should be a call to preventDefault() bound to the click event: I'm adding a href attribute to my anchors for sameness' sake, and the browser gets sent around the page on click events on submenus.

What do you think?
Thanks for your work.

I've never used event.stopPropagation(), but I assume it's supposed to work similarly to event.preventDefault() when clicking on anchors. I've only tested in the latest release of Chrome, but when I click a submenu item, the page scrolls to the top like I would expect if I clicked on <a href="#">.

Adding event.preventDefault() fixed this for me, and the page no longer scrolls to the top when a submenu item is clicked.

I added it at this location:

Hello, does anyone encounter this? the page go to the start of the page when i clicked it. this only happen when i view my website on mobile, and i am using the bootstrap menu bar responsive.

How can i make this stop?

Wondering if there is a polyfill solution? I have to support IE 11, unfortunately.

For example, :not(.disabled, .divider, .dropdown-header) at https://github.com/vsn4ik/bootstrap-submenu/blob/master/js/bootstrap-submenu.js#L23

I have added the bootstrap submenu CSS and JS to get submenus to appear since this is not a mobile web site. Here is the code:
@code
Dim AppMenuController As New Controllers.AppMenuController
Dim AppMenus = AppMenuController.GetAppMenu
Dim AppMenuRoots = AppMenuController.GetAppMenuRoots

For Each Menu In AppMenuRoots

            @:<td>
                @:<div class="dropdown" style="width:100%">

                @:<ul class="nav navbar-nav navbar-left">
                @:<li class="dropdown">
                @:<a href = "#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:35px">
                @Menu.Title
                @:<span class="caret"></span></a>

    Dim AppMenuItems = AppMenus.Where(Function(x) x.ParentId IsNot Nothing AndAlso x.ParentId = Menu.MenuId).ToList
    If AppMenuItems IsNot Nothing AndAlso AppMenuItems.Count > 0 Then

                @:<ul class="dropdown-menu" role="menu" style="font-size:12px">

        For Each Item In AppMenuItems

            If AppMenuController.HasAccessToAppMenu(Item.AppLevel) Then

                If String.IsNullOrEmpty(Item.URL) Then
                    Dim SubItems = AppMenus.Where(Function(x) x.ParentId IsNot Nothing AndAlso x.ParentId = Item.MenuId).ToList


                                @:<li class="dropdown-submenu" role="menu"  >
                                @:<a href="#">@Item.Title</a>
                                @:<ul class="dropdown-menu" role="menu" style="font-size:10px">


                    For each SItem In SubItems
                        If AppMenuController.HasAccessToAppMenu(SItem.AppLevel) Then

                                        @:<li style="font-size:10px;white-space:nowrap"><a href [email protected]>@SItem.Title</a></li>

                        End If
                    Next

                                @:</ul> 
                                @:</li> 


                Else
                                @:<li style="font-size:10px"><a href [email protected]> @Item.Title</a></li>

                End If


            End If

        Next

                    @:</ul>

                End If

               @:</ul> 
             @:</div>
           @:</td>

Next

For Spacers As Integer = 0 To 10

            @:<td>&nbsp;&nbsp;&nbsp;</td>

Next


    End code

All of the sub menus open the second I hover over the top link. I added this to the bootstrap.css to enable the hover to open the link:
.dropdown:hover .dropdown-menu { display: block; }
Any ideas why all the submenus open at once instead of only when I hover over the submenu link?

Hi, we've recently migrated to bootstrap v4.1.1 in our Ruby on Rails app, so we upgraded bootstrap-submenu v3.0.0 because we were using v2.x. We are very pleased how it looks and it was a life-safer after bootstrap v3.x dropped submenu support, thanks for your work.

After migration, everything looks fine, but this particular app is being feature tested with phantomjs v2.1.1. This driver doesn't supports all the new ES6 features, so the code on /dist that uses Symbol produces this error.

Because your source doesn't uses Symbol, I'm pretty sure this is being added on transpilaton with Babel, but not being JS my primary language or node my toolset I'm a little lost. I'm pretty sure there is some setting I can modify on package.json to output ES5 compatible code..

But do you thing is a good idea to output non ES5 compatible code on dist? Browser compatibilty will suffer (for example IE won't support it even now).

Hi all,

using Bootstrap-Submenu 1.2.13, Bootstrap v3.3.2, jQuery v2.1.3, testing with Firefox 40.0.3, over menu items I normally see the mouse cursor in the shape of a hand with a pointing finger.

However, menu items that open a submenu are different: When the cursor is over the item text, it has I-beam shape (indicating that text can be selected), left and right of the text it has arrow shape.

I cannot reproduce this problem at http://vsn4ik.github.io/bootstrap-submenu/ (Navbar example), but from there I got my local testing code and I cannot see anything wrong.

What can I do please?

In Bootstrap-3.3.6 and Bootstrap-submenu-2.0.3:
Following the installation directions at the demo page https://vsn4ik.github.io/bootstrap-submenu, bootstrap-submenu works fine for mouse use. Not for touchscreens.
But bootstrap-submenu works for touchscreens if I add:

• <link rel="stylesheet" href="https://vsn4ik.github.io/bootstrap-submenu/assets/css/docs.css">
• <script src="https://vsn4ik.github.io/bootstrap-submenu/assets/js/docs.js" defer></script>

I found the above in the demo page https://vsn4ik.github.io/bootstrap-submenu (tho I prefixed the domain and parent folder to the file paths). Why does the demo page not follow the template recommended as the installation? If the demo page did follow the template, it would be more convincing proof of concept, and more useful to users.
Are the "assets" files part of the distribution? If not, how can I make bootstrap-submenu work for touchscreens?
Thanks.

I'm new to this and unsure how to present the problem. Any help would be appreciated. My index.html file that I made using a bootstrap 4 package runs properly locally, but when I commit the files to Github, the resulting site shows neither the images nor the submenu. The issue is the same for all browsers. The same files were cloned in a different repository and it worked there. How do I fix this? Thanks.

I have created a menu component for my Angular2 app as such:

import { AfterViewInit, Component } from '@angular/core';
import * as $ from 'jquery/dist/jquery.min.js';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap-submenu/dist/js/bootstrap-submenu';

require("style-loader!bootstrap-submenu/dist/css/bootstrap-submenu.min.css");

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements AfterViewInit {

  private _subMenu: any;

  constructor() { }

  ngAfterViewInit() {

      this._subMenu = $('[data-submenu]');
      console.log(this._subMenu);

      $('[data-submenu]').submenupicker();
  }
}

But when I run the app - I get the following exception:
query_dist_jquery_min_js__(...).submenupicker is not a function ;

So what am I doing wrong?

If a submenu is added to a menu of class .navbar-right, and the submenu items have a long/wide text, then the submenu does not grow beyond a width of 160px. This rule is needed to overcome the problem:

    .navbar-right .dropdown-submenu .dropdown-menu {
        right: auto;
    }

ie11:Array.From is not support!

When the page is loaded in a lower resolution device due to responsiveness , clicking to open the menus they do not appear.
http://prntscr.com/akgie0

I'm having an issue where I cannot view my submenu because the 1st dropdown closes on the click of one of the items in its list. I'm assuming this is because of the normal Bootstrap dropdown behavior. Is there something I need to do about this? For reference I'm using Bootstrap 3.3.5

How do I use bootstrap-submenu to open the submenu on hover? That's how bootstrap 2 did it: http://getbootstrap.com/2.3.2/components.html#dropdowns

I've been trying to figure out why it didn't look right for me, and then realized it's broken on the examples too if I make a submenu on something with .navbar-right. The items won't expand the ul.dropdown-menu they are inside of beyond the 160px width set in the CSS.

It works on primary and secondary menu levels.

If you don't put this code:

a {
  cursor: pointer;
}

the Pills navigation doesn't work on mobile. :)
Don't ask how did I found it.

We are using the submenu within a navbar . We found that the root menus are not the pointer cursor. In the example page we see that there is a css dependency that is not in the downloadable content ( the file name is docs.css ) . To fix this is simple, just declare the desired cursor style to tag , or even declare the style inline : 0, but for others not go through this problem would be interesting to see what really necessary dependencies for project. We found that @carstenf went through the same situation.

Thanks for attention.

Hey,
thank you for the nice plugin! It's really helpful.

Do you have any suggestions on how can I populate submenu via async js call?
As plugin's been initialized only on page load it does not see new items I added after it. I kinda got stuck on this issue.

downloaded this package from github and just added .min.css file to project.
But on load, it tries to hit .map file and error occurs, Please share right way to stop downloading.css.map file.