网页右下角增加导航菜单JS和css特效

2021-03-22 14:42:54 发布在学习园地

有时候菜单多都不知道一个网页能否装的下，在网页右下角设计一个下拉弹出导航条菜单的确可以分担下。又不影响整体网站样式，挺不错的效果。

网页右下角增加导航菜单JS和css特效(图1)

在角度增加以下JS代码：

<div id="cd-nav">
<a href="#0" class="cd-nav-trigger"><span></span></a>

<nav id="cd-main-nav">
<ul>
<li><a href="https://www.qiuhai.com" title="学习吧_一个不错的网站v">首页</a></li>
<li><a href="https://www.qiuhai.com/doc">易优手册</a></li>
<li><a href="https://www.qiuhai.com/copy">小秋建站</a></li>
<li><a href="https://www.qiuhai.com/erser/">商业源码</a></li>
<li><a href="https://www.qiuhai.com/demo.php">易优cms源码下载</a></li>
</ul>
</nav>
</div>

<script>
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "menu" link is shown
var offset = 300;

var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');

//hide or show the "menu" link
checkMenu();
$(window).scroll(function(){
checkMenu();
});

//open or close the menu clicking on the bottom "menu" link
$('.cd-nav-trigger').on('click', function(){
$(this).toggleClass('menu-is-open');
//we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');

});

function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
}
}
});
</script>