隐藏导航栏直到鼠标悬停
[英] Make a navbar hidden until mouse hover
本文介绍了隐藏导航栏直到鼠标悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图隐藏一个导航栏(在名为导航容器的 div 中)，直到用户将鼠标悬停在它上面，在这种情况下它会滑出以显示自己.我在下面编写的 JQuery 代码似乎无法正常工作.非常感谢任何帮助！
HTML 导航栏代码:
<nav id = '导航栏'><div class="link-container"><a href='#' class="nav-link">首页</a>
<div class="link-container"><a href='#' class="nav-link">FAQ</a>
<div class="link-container"><a href='#' class="nav-link">列出硬币</a>
<div class="link-container"><a href='#' class="nav-link">联系我们</a>
</nav>
CSS 导航栏代码:
.nav-container{宽度:110px；高度:230px；背景颜色:RGB(48、162、255)；边框:实心 2px 无；边框半径:8px；显示:弹性；弹性方向:列；}#导航栏{位置:相对；保证金:自动；}.link-容器{边距:10px；字体大小:18px；宽度:100%；白颜色;}.导航链接{显示:内联块；}
JQuery 代码:
var hovering = function(){$("nav").show("slide", { direction: "right" }, 1000);};var 离开 = 函数(){$("nav").hide("slide", { direction: "left" }, 1000);};$("#nav-container").hover(悬停，离开);
解决方案
这是一个简单的例子.实际工作是:
#navbar {变换:translateY(-100%);/* 正常，隐藏状态 */}....nav-container:hover #navbar {变换:translateY(0);/* 当父级悬停时 */}
剩下的就是细节了.看到它工作:
#navbar {显示:弹性；背景颜色:黑色；变换:translateY(-100%);过渡:变换 .5s 三次贝塞尔曲线(.4,0,.2,1)；}#导航栏{白颜色;文字装饰:无；}#导航栏 >* {填充:1rem；}身体 {边距:0；}.nav-container:hover #navbar {变换:translateY(0);}
<nav id = '导航栏'><div class="link-container"><a href='#' class="nav-link">首页</a>
<div class="link-container"><a href='#' class="nav-link">FAQ</a>
<div class="link-container"><a href='#' class="nav-link">列出硬币</a>
<div class="link-container"><a href='#' class="nav-link">联系我们</a>
</nav>
您的示例采用相同的技术:
.nav-container {宽度:110px；高度:230px；显示:弹性；弹性方向:列；边距顶部:10px；}#导航栏{背景颜色:RGB(48、162、255)；边界半径:0 8px 8px 0;变换:translateX(calc(-100% + 10px));过渡:变换 .4s 立方贝塞尔曲线 (.4, 0, .2, 1) .2s;弹性增长:1；显示:弹性；弹性方向:列；对齐内容:居中；}.nav-container:hover #navbar {变换:translateX(0);转换延迟:0s；}#导航栏{位置:相对；}.link-容器{字体大小:18px；宽度:100%；}.link-container a {白颜色;文字装饰:无；显示:块；填充:6px 12px；}.link-container a:hover {文字装饰:下划线；背景颜色:#ffffff21；}.导航链接{显示:内联块；}身体 {边距:0；}.nav-容器，.nav 容器 * {box-sizing: 边框框；}
<nav id='导航栏'><div class="link-container"><a href='#' class="nav-link">首页</a>
<div class="link-container"><a href='#' class="nav-link">FAQ</a>
<div class="link-container"><a href='#' class="nav-link">列出硬币</a>
<div class="link-container"><a href='#' class="nav-link">联系我们</a>
</nav>
冒昧地省略了一点，以宣传菜单的存在.
I am trying to have a navbar (within a div called nav-container) be hidden until the user hovers their mouse over it, in which case it slides out to present itself. The JQuery code I have written below does not seem to be working properly. Any help is much appreciated!
HTML Navbar Code:
<div class="nav-container">
<nav id = 'navbar'>
<div class="link-container ">
<a href='#' class="nav-link">Home</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">FAQ</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">List a Coin</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">Contact Us</a>
</div>
</nav>
</div>
CSS Navbar Code:
.nav-container{
width: 110px;
height: 230px;
background-color: rgb(48, 162, 255);
border: solid 2px none;
border-radius: 8px;
display: flex;
flex-direction: column;
}
#navbar{
position: relative;
margin: auto;
}
.link-container {
margin: 10px;
font-size: 18px;
width: 100%;
color: white;
}
.nav-link{
display:inline-block;
}
JQuery Code:
var hovering = function(){
$("nav").show("slide", { direction: "right" }, 1000);
};
var leaving = function(){
$("nav").hide("slide", { direction: "left" }, 1000);
};
$("#nav-container").hover(hovering, leaving);
解决方案
Here's a simple example. What's actually doing the job is:
#navbar {
transform: translateY(-100%); /* normal, hidden state */
}
...
.nav-container:hover #navbar {
transform: translateY(0); /* when parent is hovered */
}
The rest are details. See it working:
#navbar {
display: flex;
background-color: black;
transform: translateY(-100%);
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
#navbar a {
color: white;
text-decoration: none;
}
#navbar > * {
padding: 1rem;
}
body {
margin: 0;
}
.nav-container:hover #navbar {
transform: translateY(0);
}
<div class="nav-container">
<nav id = 'navbar'>
<div class="link-container ">
<a href='#' class="nav-link">Home</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">FAQ</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">List a Coin</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">Contact Us</a>
</div>
</nav>
</div>
And here's same technique on your example:
.nav-container {
width: 110px;
height: 230px;
display: flex;
flex-direction: column;
margin-top: 10px;
}
#navbar {
background-color: rgb(48, 162, 255);
border-radius: 0 8px 8px 0;
transform: translateX(calc(-100% + 10px));
transition: transform .4s cubic-bezier(.4, 0, .2, 1) .2s;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.nav-container:hover #navbar {
transform: translateX(0);
transition-delay: 0s;
}
#navbar {
position: relative;
}
.link-container {
font-size: 18px;
width: 100%;
}
.link-container a {
color: white;
text-decoration: none;
display: block;
padding: 6px 12px;
}
.link-container a:hover {
text-decoration: underline;
background-color: #ffffff21;
}
.nav-link {
display: inline-block;
}
body {
margin: 0;
}
.nav-container,
.nav-container * {
box-sizing: border-box;
}
<div class="nav-container">
<nav id='navbar'>
<div class="link-container ">
<a href='#' class="nav-link">Home</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">FAQ</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">List a Coin</a>
</div>
<div class="link-container">
<a href='#' class="nav-link">Contact Us</a>
</div>
</nav>
</div>
Took the liberty to leave a bit out, to advertise the presence of the menu.
这篇关于隐藏导航栏直到鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
