My multilevel menu with hover is working fine. But the dropdowns should be visible on-screen when pages become too narrow.
My menu has menutexts in dutch with tooltips in english (some jquery to get both working at the same time).
Almost all li and ul's are replaced with divs for cleaner html. (took a while to figure out how to do that with more levels).
I found a JQuery plugin by Sam Sehnert to keep the dropdowns on the page but that worked for menu's WITHOUT hover, only on Click. I cannot get it working for my menu, anybody know how to?
I use Bootstrap 4.0.0 and have little knowledge of JQuery.
I changed the "li" in the original plugincode to "div" because i use in the navbar.
I guess i have to change the "on('click', function(e)" into something for hover or mouseover or something. I tried but it was not succesfull.
(the menu might look strange but i left out a lot of the coloring and fonts. All i want is the hover AND the viewport check to work for now.)
The menu itself:
<!-- Centered navbar -->
<nav class="navbar navbar-expand-md navbar-mtw navbg-mtw">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span id="dimensions"></span><!-- page size here -->
<div class="collapse navbar-collapse justify-content-md-center" id="navbarCollapse">
<ul class="nav navbar-nav nav-tabs">
<!-- HOME -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown01" data-toggle="dropdown tooltip"
aria-haspopup="true" aria-expanded="false" data-placement="left"
title="Home">Home</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="News">Nieuws</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="Contact me">Contact</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="About me">Over mij</a>
</div>
</li>
<!-- GENEALOGIE -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown02" data-toggle="dropdown tooltip"
aria-haspopup="true" aria-expanded="false" data-placement="left"
title="Genealogy">Genealogie</a>
<div class="dropdown-menu" aria-labelledby="dropdown02">
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="My family tree">Stamboom Kosmis-Sipsma-Schouten-Rol</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="Links to information">Links naar informatie</a>
</div>
</li>
<!-- DEN HELDER -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown03" data-toggle="dropdown tooltip"
aria-haspopup="true" aria-expanded="false" data-placement="left"
title="My hometown: Den Helder">Den Helder</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="Where to find my city">Mijn woonplaats</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="A bit of history">Wat historie</a>
</div>
</li>
<!-- HOBBIES -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown04" data-toggle="dropdown tooltip"
aria-haspopup="true" aria-expanded="false" data-placement="left"
title="My hobbies">Hobbies</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="Programming">Programmeren</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="My dogs">Mijn honden</a>
<div class="dropdown-submenu">
<a href="#" class="dropdown-item dropdown-toggle mtw-dropdown" id="dropdown0401"
data-toggle="dropdown tooltip" aria-haspopup="false" aria-expanded="false"
data-placement="left" title="Webdesign">Webdesign</a>
<div class="dropdown-menu" aria-labelledby="dropdown0401">
<a href="#" class="dropdown-item" data-toggle="tooltip" data-placement="top"
title="Software">Software</a>
<a href="#" class="dropdown-item" data-toggle="tooltip" data-placement="left"
title="Fonts and dimensions">Fonts en maatvoering</a>
<!-- TESTPAGINA'S -->
<div class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle mtw-dropdown" id="dropdown0402"
data-toggle="dropdown tooltip" aria-haspopup="false" aria-expanded="false"
data-placement="left" title="Some testpages">Testpagina's</a>
<div class="dropdown-menu" aria-labelledby="dropdown0402">
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top"
title="Headings and Lorem Ipsum">Koppen en Lorem Ipsum</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="2 columns example">2 kolommen voorbeeld</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="Empty template">Leeg template</a>
<a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left"
title="1 centered column">1 kolom gecentreerd</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The javascript file:
//
// Javascript file for my stylesheet
//
// ----- BEGIN navbar fixed top
// ----- BEGIN navbar fixed top
// This is to have the navbar in a fixed top position when page scrolls down
$(document).ready(function () {
// Calculating the distance from the top of the page to the initial position of the navbar, and store it in a variable
var navbarOffest = $('.navbar').offset().top;
$(window).on('scroll', function () {
var navbarHeight = $('.navbar').outerHeight();
if ( $(window).scrollTop() >= navbarOffest ) {
$('.navbar').addClass('fixed-top');
$('body').css('padding-top', navbarHeight + 'px');
} else {
$('.navbar').removeClass('fixed-top');
$('body').css('padding-top', '0');
}
});
});
// ----- END navbar fixed top
// ----- END navbar fixed top
// ----- BEGIN tooltips
// ----- BEGIN tooltips
// ======== Needed to have tooltips function correctly
// initialize tooltips after page loading is complete
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
// needed for dropdown AND tooltip functioning together on dropdown-toggle classes
$('.mtw-dropdown').dropdown();
$('.mtw-dropdown').tooltip();
// ----- END tooltips
// ----- END tooltips
// ----- BEGIN Keep dropdowns and sub-dropdowns onscreen on small screens
// ----- BEGIN Keep dropdowns and sub-dropdowns onscreen on small screens
(function($){
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial,hidden,direction,container){
if (this.length < 1)
return;
var $t = this.length > 1 ? this.eq(0) : this,
isContained = typeof container !== 'undefined' && container !== null,
$w = isContained ? $(container) : $(window),
wPosition = isContained ? $w.position() : 0,
t = $t.get(0),
vpWidth = $w.outerWidth(),
vpHeight = $w.outerHeight(),
direction = (direction) ? direction : 'both',
clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
if (typeof t.getBoundingClientRect === 'function'){
// Use this native browser method, if available.
var rec = t.getBoundingClientRect(),
tViz = isContained ?
rec.top - wPosition.top >= 0 && rec.top < vpHeight + wPosition.top :
rec.top >= 0 && rec.top < vpHeight,
bViz = isContained ?
rec.bottom - wPosition.top > 0 && rec.bottom <= vpHeight + wPosition.top :
rec.bottom > 0 && rec.bottom <= vpHeight,
lViz = isContained ?
rec.left - wPosition.left >= 0 && rec.left < vpWidth + wPosition.left :
rec.left >= 0 && rec.left < vpWidth,
rViz = isContained ?
rec.right - wPosition.left > 0 && rec.right < vpWidth + wPosition.left :
rec.right > 0 && rec.right <= vpWidth,
vVisible = partial ? tViz || bViz : tViz && bViz,
hVisible = partial ? lViz || rViz : lViz && rViz;
if(direction === 'both')
return clientSize && vVisible && hVisible;
else if(direction === 'vertical')
return clientSize && vVisible;
else if(direction === 'horizontal')
return clientSize && hVisible;
} else {
var viewTop = isContained ? 0 : wPosition,
viewBottom = viewTop + vpHeight,
viewLeft = $w.scrollLeft(),
viewRight = viewLeft + vpWidth,
position = $t.position(),
_top = position.top,
_bottom = _top + $t.height(),
_left = position.left,
_right = _left + $t.width(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom,
compareLeft = partial === true ? _right : _left,
compareRight = partial === true ? _left : _right;
if(direction === 'both')
return !!clientSize && ((compareBottom <= viewBottom) &&
(compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >=
viewLeft));
else if(direction === 'vertical')
return !!clientSize && ((compareBottom <= viewBottom) &&
(compareTop >= viewTop));
else if(direction === 'horizontal')
return !!clientSize && ((compareRight <= viewRight) &&
(compareLeft >= viewLeft));
}
};
})(jQuery);
$(document).ready(function(){
$('a[data-toggle=dropdown]').on('click', function(e){
e.stopPropagation();
e.preventDefault();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
if($(window).width() > 767){
if($(this).parent('div').hasClass('open')){
if(!$(this).next('div').visible()){
console.log('not visible');
$(this).next('div').addClass('rev');
}
}else{
$(this).next('div').removeClass('rev');
}
}
});
});
// ----- END Keep dropdowns and sub-dropdowns onscreen on small screens
// ----- END Keep dropdowns and sub-dropdowns onscreen on small screens
// ----- BEGIN live screensize
// ----- BEGIN live screensize
$(window).resize(function() {
$("#dimensions").html("Page: " + $(window).width() + " x "
+$(window).height());
}).resize();
// ----- END live screensize
// ----- END live screensize
styles.css:
//class to replace navbar-light
.navbar-mtw .navbar-toggler {
color: #415a81 !important;
border-color: #415a81 !important; }
.navbar-mtw .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.navbg-mtw {
background-color: #8ca4d9;
font-style: bold !important;
font-size: 1.125rem; }
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
// for screenwidth detection:
.rev{
left:auto !important;
right:100% !important;
top:8px !important;
margin-right:-12px !important;
}
