自动显示和隐藏导航栏
auto showing and hiding navigation bar
你好,我想实现一个自动显示和隐藏导航菜单。我不确定如何实现这个想法。我想要的想法是这样的导航条滑出网站上面的网站,当光标悬停在顶部的导航条出现。(一个更好的例子是(如果你有一台Mac电脑),这个想法来自自动隐藏时的Dock。)
我将使用。css过渡或JQuery/Javascript来实现这个。
这是我正在使用的导航栏
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
background-color: #a137a7;
font-family:'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family:'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
<li><a href=/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
<li><a href="/"><img class="blog"
src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
<li><a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
<li style="float:right"><a href="/"><img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></a></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png"></a></li>
<li style="float:right"><a href="/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
</ul>
</nav>
<body>
我会使用nav
上下滑动。查看我的代码:
我在导航栏中添加了一个红色边框,这样你就可以看到它了(用于演示)。
$(function() {
$('.hover').on('mouseenter mouseleave', function() {
$('nav').toggleClass('toggleNav');
});
});
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
.hover {
width: 50px;
height: 50px;
background: lightblue;
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<div class="hover">Hover here</div>
这是您要求的一个例子,请尝试一次
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
if(y<=50){
document.getElementById("navBar").style.display = 'block';
}
else{
document.getElementById("navBar").style.display = 'none';
}
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
div {
width: 100%;
height: 300px;
border: 1px solid black;
}
.nav{
width:100%;
height:50px;
background:#00ffff;
display:none;
}
<div onmousemove="myFunction(event)" onmouseout="clearCoor()">
<div class="nav" id="navBar"></div>
</div>
<p id="demo"></p>
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<body>
相关文章:
- 显示放大镜弹出窗口时隐藏导航内容
- 导航栏隐藏在图片后面
- 在离子滚动时隐藏离子导航栏
- jquery导航显示和隐藏多个页面
- 导航关闭时隐藏文本导航
- 隐藏在导航栏中的下拉菜单
- jQuery/JS正在获取导航菜单,以便在单击正文时隐藏
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 使用 JavaScript 显示和隐藏导航栏进行滚动和悬停功能
- 响应式导航在页面加载时打开,然后隐藏.应该在页面加载时隐藏
- 在垂直滚动时隐藏/显示导航
- Angularjs:隐藏包含动态参数的网址的导航栏
- 如果导航选项卡内容为空,则无法隐藏导航选项卡
- jquery切换隐藏/显示导航元素
- 粘性导航元素 - 隐藏然后显示
- 谷歌地图API - 通过类别导航隐藏所有信息窗口
- 如何让我的移动菜单按钮显示和隐藏导航栏,以及在负空间中单击时隐藏
- 使用 CSS 在导航栏上创建“不可见”滚动条(隐藏不起作用)
- CSS部分固定侧导航隐藏时主要内容较短
- 移动导航隐藏/显示一个按钮