我的带有悬停功能的多级菜单工作正常。但是当页面变得太窄时，下拉菜单应该在屏幕上可见。
我的菜单有荷兰语菜单文本和英语工具提示（一些 jquery 可以同时工作）。
几乎所有的 li 和 ul 都被替换为 div 以获得更简洁的 html。（花了一段时间才弄清楚如何使用更多级别来做到这一点）。
我找到了 Sam Sehnert 的 JQuery 插件，可以将下拉菜单保留在页面上，但该插件适用于没有悬停的菜单，仅适用于 Click。我不能让它为我的菜单工作，有人知道怎么做吗？我使用 Bootstrap 4.0.0，对 JQuery 知之甚少。
我将原始插件代码中的“li”更改为“div”，因为我在导航栏中使用。
我想我必须将“on（'click'，function（e）”更改为悬停或鼠标悬停之类的东西。我试过但没有成功。
（菜单可能看起来很奇怪，但我遗漏了很多颜色和字体。我想要的只是悬停和视口检查现在可以工作。）
菜单本身：
<!-- 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>
javascript文件：
//
// 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
样式.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;
}