fitodac / bsnav Goto Github PK

View Code? Open in Web Editor NEW

87.0 10.0 24.0 28.5 MB

An extended Bootstrap 4 menu with a bunch of utilities

Home Page: https://fitodac.github.io/bsnav/

License: MIT License

JavaScript 5.72% SCSS 26.03% Pug 68.26%

bootstrap4 navbar menu nav navigation navigationbar css bootstrap-menu

bsnav's Introduction

This project is no longer being maintained. Thanks.

bsnav

Bsnav adds features to the Bootstrap 4 navbar element.

See the demo

How to use it

To start using it, include the css and js files.

Just add a link to the css file in your <head>:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fitodac/bsnav@master/dist/bsnav.min.css">

Then, before your closing <body> tag add:

<script src="https://cdn.jsdelivr.net/gh/fitodac/bsnav@master/dist/bsnav.min.js"></script>

Where you want to show the menu, you must include the following code:

<div class="navbar navbar-expand-lg bsnav bsnav-light">

  <a class="navbar-brand" href="#">bsnav</a>

  <button class="navbar-toggler toggler-spring"><span class="navbar-toggler-icon"></span></button>

  <div class="collapse navbar-collapse justify-content-md-end">
    <ul class="navbar-nav navbar-mobile mr-0">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</div>

In the demo you can find other styles for navabars.

Mobile navbar

Bsnav includes a mobile sidebar menu. To work, you must include the following html code before closing the <body> tag, then, the bsnav javascript will be responsible for cloning the menu to use it for mobile versions.

<div class="bsnav-mobile">
  <div class="bsnav-mobile-overlay"></div>
  <div class="navbar"></div>
</div>

Contributing

PLEASE review CONTRIBUTING.md prior to requesting a feature, filing a pull request or filing an issue.

Traducciones

Honestly, I do not speak English very well. If you are interested in helping me improve this documentation you are welcome. And if you want to translate the documentation into other languages even better. ** Bsnav ** is open source and we do it together. ;)

bsnav's People

Contributors

Stargazers

Watchers

bsnav's Issues

Repo is very large for a navbar

Why so big? Over 22Mb and I stopped downloading it.

Mega menu not working on mobile view port

Mega menu does not open/show dropdown items on mobile view port.

You just broke the jquery dependency

This was running alright 2 days ago. Since you've made changes to js files, it is now dependent on older jquery versions. As BS4 recommends jquery 3.3 in their copy paste codes, consider upgrading the js to version jquery 3.3.

Specifically .indexof and .load functions needs to be handled.

submenu dropdown not working IE 11

Hi i'm using bsnav for my website. there is some problem.

Chrome is fine but IE11 is not working when using the sub menu :(
Mouse hover function is working well in chrome, but not working in IE 11.

If you have IE 11 Browser, you can find issues in your site below link.
https://fitodac.github.io/bsnav/submenu-dropdown.html

Tell me any work-around this issues.

sidebar-problems

Your bsnav is a great navigation which i immediately implement for 2 CMS'es.
I just found a small unperfection at sidebar-levels.html : If it is shiftet into less than 960 px, then the content goes under the navigation (non-responsive wrapper) - and so is not full readable for tablets. A solution could be, to put the sidebar into a grid - col-2 or some other grid or with flex-shrinking.
sidebar-levels-right.html has a similar problem, and sidebar-condensed.html opens suddenly instead of a hamburger.
These examples are of course only a demonstration of possibilities and relativ easy to adapt.

Submenu dropdown's class: .nav-item.dropdown>.navbar-nav.in

in bsnav.css code:
.nav-item.dropdown>.navbar-nav.in {
pointer-events: initial;
clip: rect(0,50vw,2000px,0);
transition: 1.5s ease-in;
}
but it's cropping like this:

I changed clip property and then it worked:
.nav-item.dropdown>.navbar-nav.in {
clip: rect(0,100vw,2000px,0); // or (clip: unset;)
}
My question: why clip property is needed here?

side nav not opening on Button Click

i have implemented this exactly as said and I couldn't get it to work. The menu button works but on click the sidenav wont open and the styling for the navigation is not applied.

If submenu is out of viewport

If a submenu goes out of the viewport is it possible to change its position so it opens on the left of the parent submenu instead of right side?

Submenu fade

Is there a way to change the submenu effect as fade? Dropdowns do have the fade option. But as far as I can see submenus don't?

Feature Request: auto-adjust left/right submenus

Hi, I have a menu that is generated programmatically by the software and it is impossible to know if a submenu item should require a "dropdown-right".
Also, if a standard drop-down menu item with some submenus is located at the end of the menu, they overflow the document and the scrollbars appear in the window.
Look at this: https://codepen.io/Rombecchi/pen/eYmmqKV : a scrollbar appears in the desktop view because the third option has many submenus.
It would be great if a function could check if some dropdown items needed a "dropdown-right" class to add.
Thinking of multiple submenus should support multiple alignment (such as: left-right-left-left-right-right).

breakpoints

In Your bsnav submenu dropdown transparent You use < div class="navbar navbar-expand-lg bsnav bsnav-transparent" > . This causes a breakpoint at 970 px - a change from navbar-expand-lg to navbar-expand-md causes a correct breakpoint at 760px .

Scroll Spy Doesn't work on mobile. Also the demo code doesn't

Can you check the scrollspy version on mobile. It doesn't scroll down and the nav doesn't get closed also. Same in the case of internal hyperlinks.