为响应式导航菜单添加向下滑动效果
Posted
技术标签:
【中文标题】为响应式导航菜单添加向下滑动效果【英文标题】：adding slide down effect to responsive navigation menu 【发布时间】：2020-04-25 12:43:31 【问题描述】：我有以下jsfiddle，我试图让下拉菜单具有向下滑动的效果（或任何可以软化默认悬停效果的效果）。问题仅发生在桌面布局中，即 >= 600px 屏幕
到目前为止，我已经尝试向 css 样式添加过渡，但这不起作用：
header > div#bottom-container nav > ul > li > nav
max-height:0
transition: height 1s ease;
header > div#bottom-container nav > ul > li:hover > nav
max-height:500px
我也尝试添加一个 jQuery 悬停功能，但也无法让它工作。 jQuery 似乎是最好的选择，但我的代码似乎超级不稳定：
$("header > div#bottom-container > nav > ul > li").hover(function (e)
e.preventDefault();
if($( window ).width() >= "600")
if($(this).siblings().size() > 0 )
$(this).siblings().slideToggle("slow");
);
想知道是否有人能指出我在这里做错了什么？
【问题讨论】：
似乎显示和隐藏下拉菜单仅由 CSS 管理。我删除了所有 JS，下拉菜单仍在切换。也许您需要禁用 CSS 切换并通过 JQuery 或通过 CSS 控制速度..仍在调查中 @MohamedFarouk 这就是我的想法，但我的 Jquery 脚本对我来说仍然很奇怪 【参考方案1】： 删除了header>div#bottom-container nav>ul>li:hover>nav 类
将id="test1" 添加到<nav>（可以替换为查找子导航）
为单击添加了切换（可以用悬停代替）
希望这会有所帮助
更新 2：
- 将 $("header > div#bottom-container > nav > ul > li").mouseenter(function(e) 更改为目标 li 而不是
- 添加了$("header > div#bottom-container > nav > ul > li").mouseleave(function(e)
- 动态检测子导航$(this).find("nav").show("slow")
$(document).ready(function()
$("#navToggle a").click(function(e)
e.preventDefault();
$("header > div#top-container").slideToggle("slow");
$("header > div#bottom-container > nav").slideToggle("slow");
$("#logo").toggleClass("menuUp menuDown");
);
$(window).resize(function()
if ($(window).width() >= "600")
$("header > div#top-container").show();
$("header > div#bottom-container > nav").show();
if ($("#logo").attr('class') == "menuDown")
$("#logo").toggleClass("menuUp menuDown");
else
$("header > div#top-container").hide();
$("header > div#bottom-container > nav").hide();
);
$("header > div#bottom-container > nav > ul > li").mouseenter(function(e)
$(this).find("nav").show("slow")
if ($(window).width() <= "600")
if ($(this).siblings().size() > 0)
e.preventDefault();
console.log($("#test1"))
$("#test1").css("display", "block !Important")
);
$("header > div#bottom-container > nav > ul > li").mouseleave(function(e)
$(this).find("nav").hide("slow")
if ($(window).width() <= "600")
if ($(this).siblings().size() > 0)
e.preventDefault();
console.log($("#test1"))
$("#test1").css("display", "block !Important")
);
);*
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
/* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */
@media (min-width: 48rem)
:root
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
/* Stop font scaling above 1920px */
@media (min-width: 120em)
:root
font-size: 2rem;
body
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
header
/* background-color: rgb(140, 193, 193);
border-bottom: 1px solid rgba(0,0,0,.15);
text-align: center; */
header>.menuDown
box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
header>.menuUp
box-shadow: none;
header>div#navToggle
background-color: rgba(0, 0, 0, .15);
position: absolute;
right: 0;
top: 0;
transition: all 300ms ease;
header>div#navToggle:hover
background-color: rgba(0, 0, 0, .1);
header>div#navToggle>a
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
header>div#navToggle:hover>a
color: rgba(255, 255, 255, 1);
header>#top-container
display: none;
header>div#bottom-container
display: flex;
flex-direction: column;
text-align: center;
header>div#bottom-container>nav
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
flex-grow: 1;
transform: all 300ms ease;
header>div#bottom-container nav>ul
list-style-type: none;
header>div#bottom-container nav>ul>li
border-bottom: 1px dotted rgba(0, 0, 0, .1);
position: relative;
header>div#bottom-container nav>ul>li:last-of-type
border-bottom: none;
header>div#bottom-container nav>ul>li>a
display: block;
color: rgba(0, 0, 0, .65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: all 250ms ease;
header>div#bottom-container nav>ul>li>a span.toggle
background-color: rgba(0, 0, 0, .05);
border-radius: 3rem;
color: rgba(0, 0, 0, .25);
/* font-size: 0.75em; */
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
header>div#bottom-container nav>ul>li>a span.caret
display: none;
header>div#bottom-container>nav>ul>li:hover>a
color: rgba(42, 35, 0, .5);
header>div#bottom-container>nav>ul>li>nav
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(51, 51, 51);
/**
header nav > ul > li > nav
display: none;
overflow: hidden;
position: absolute;
left: 0;
top: 87px;
width: 100%;
border-top: 3px solid #176071;
z-index: 100;
background: #ffffff;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
-webkit-transition: all .25s ease .25s;
-moz-transition: all .25s ease .25s;
-o-transition: all .25s ease .25s;
-ms-transition: all .25s ease .25s;
transition: all .25s ease .25s
*/
header>nav>ul>li>nav>ul>li>a
color: rgba(255, 255, 255, .85);
transition: all 300ms ease;
header>nav>ul>li>nav>ul>li:hover>a
background-color: rgba(0, 0, 0, .6);
color: rgba(255, 255, 255, 1);
/**
header > nav > ul > li:hover > nav.desk
display:block!Important;
*/
/* Medium screens */
@media all and (min-width: 600px)
header>#top-container
background-color: red;
display: flex !Important;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
text-align: left;
width: 100%;
header>#top-container>div#box
flex: 1;
/* display: flex;
flex-flow: row wrap;
justify-content: center;
display: block; */
header>#top-container>.box1
background-color: green;
flex-basis: 400px;
header>div#navToggle
display: none;
header>div#bottom-container
background-color: rgb(250, 209, 14);
color: rgba(42, 35, 0, 1);
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
border-top: .3rem solid #F9E484;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.65);
header>div#bottom-container>nav
background-color: transparent;
display: block;
header>div#bottom-container>nav>ul
display: flex;
flex-flow: row wrap;
justify-content: center;
header>div#bottom-container nav>ul>li
border-bottom: none;
position: static;
header>div#bottom-container nav>ul>li>a
padding: 0 1.25rem;
header>div#bottom-container nav>ul>li>a span.toggle
display: none;
header>div#bottom-container nav>ul>li>a span.caret
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(42, 35, 0, 1);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id='top-container'>
<div id="box" class='box1'>logo</div>
<div id="box" class='box2'>our story</div>
<div id="box" class='box3'>contact us</div>
<div id="box" class='box4'>gift us a review</div>
</div>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Blog <span class="toggle">Expand</span><span class="caret"></span></a>
<nav id="test1">
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Humour</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Music</a></li>
</ul>
</nav>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</header>【讨论】：
感谢您对此的建议。似乎工作好多了。我试图将您的 jQuery 转换为悬停功能，但遇到了问题。它可以工作，但是一旦将光标移动到下拉菜单，下拉菜单就会消失。有什么想法吗？ 更新了 sn-p.. 现在悬停应该没问题以上是关于为响应式导航菜单添加向下滑动效果的主要内容，如果未能解决你的问题，请参考以下文章
使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari