导航栏动画
[英]Nav bar animation
问题描述
我想要它，所以你点击菜单上的东西，菜单消失并带你到你被引导的地方。
这是 HTML 文档。
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title></title>
</head>
<body>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><a href="#"><i class="icon-home"></i> Play</a></li>
<li><a href="#"><i class="icon-file-alt"></i> about</a></li>
<li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li>
<li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
</ul>
</div>
</nav>
</html>
这是css。
谢谢！
1 个解决方案
解决方案1
3 已采纳 2016-09-01 19:27:34
您将该菜单覆盖的样式与 css 中复选框的选中属性相关联。 因此，当您单击复选框时，它会更改菜单上的一些属性（z-index 和不透明度）以显示它。 为了让它回到不显示菜单的默认状态，您必须取消选中该复选框（如果您想按原样使用 css）。 为此，您可以使用 Javascript。 我在下面的代码段中使用 jQuery 将复选框的 checked 属性设置为 false，每当您单击菜单内的链接时，您的菜单就会神奇地消失！ 干杯！
（我应该补充一点，这个解决方案需要 jQuery 1.6 或更新版本。那是引入 prop 的时候。如果这是一个问题，用户@Xian 写了一篇关于以不同方式修改检查属性的文章： 设置“检查”带有 jQuery 的复选框？ ）
$(function() { $(".box a").on("click",function() { $("#toggle-nav").prop('checked', false) }); });
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css); body { font-family: 'Lato', sans-serif; background: #353535; color: #FFF; } #text { color: #888; } .jumbotron h1 { color: #353535; } /* under play */ footer { margin-bottom: 0 !important; margin-top: 80px; } footer p { margin: 0; padding: 0; } span.icon { margin: 0 5px; color: #D64541; } h2 { color: #BDC3C7; text-transform: uppercase; letter-spacing: 1px; } .mrng-60-top { margin-top: 60px; } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size:14px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; border-radius: 0; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button.thar-one { color: white; cursor: pointer; display: block; position: relative; width: 100%; margin-left: 170%; border: 2px solid white; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; margin-bottom: 0 !important; margin-top: 80px; } a.animated-button.thar-one:hover { color: white !important; background-color: black; text-shadow: none; } a.animated-button.thar-one:hover:before { bottom: 0%; top: auto; height: 100%; margin: 0 auto; } a.animated-button.thar-one:before { display: white; position: absolute; left: 0px; top: 0px; height: 0px; width: 100%; z-index: -1; content: ''; color: black !important; background: black; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } @import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css'); * { padding: 0px; margin: 0px; border: 0px; outline: 0px; } /* fast reset */ body { font-family: 'Merriweather Sans', Arial, sans-serif; font-size: 12px; } a { text-decoration: none; } a:hover { text-decoration: underline; } li { list-style: none; } .something { margin: 0px 20% 0px 20%; } #head { margin-top: 20px; } #menu .box { position: fixed; text-align: center; overflow: hidden; z-index: -1; opacity: 0; width: 100%; height: 100%; left: 0px; top: 0px; background: rgba(0,0,0,0.8); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #menu ul { position: relative; top: 20%; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #menu li { display: inline-block; margin: 20px; } #menu li a { border-radius: 3px; padding: 15px; border: 1px solid transparent; text-decoration: none; font-size: 18px; color: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #menu li a:hover { border-color: #fff; } #menu li ai { margin-right: 5px; font-size: 24px; } /* Box */ #toggle-nav-label { color: rgba(0,0,0,0.5); background: white; text-align: center; line-height: 30px; font-size: 16px; display: block; cursor: pointer; position: relative; z-index: 500; width: 30px; height: 30px; border-radius: 10px; } #toggle-nav { display: none; } #toggle-nav:checked ~ .box { opacity: 1; z-index: 400; } #toggle-nav:checked ~ .box ul { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #toggle-nav:checked ~ #toggle-nav-label { background: #fff; color: rgba(0,0,0,0.8); } #content { margin: 20px 0px 20px 0px; } #content h1 { margin-bottom: 20px; font-size: 30px; } #content p { font-size: 14px; line-height: 150%; margin-bottom: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div> <!-- start header --> <header id="head"> <div class="something"> <nav id="menu"> <input type="checkbox" id="toggle-nav"/> <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label> <div class="box"> <ul> <li><a href="#play"><i class="icon-home"></i> Play</a></li> <li><a href="#"><i class="icon-file-alt"></i> about</a></li> <li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li> <li><a href="#"><i class="icon-envelope"></i> contacts</a></li> </ul> </div> </nav> </div> </header> <!-- end header --> </div> </section> <!-- end content --> <div class="jumbotron text-center"> <div class="container"> <h1>Das Krankenhuas</h1> <p style="color:#888;">A game you will never escape</p> </div> </div> <div class="container"> </div> <div id="h1"> <center> <h3> About The Game </h3> </div> <div id="text"> <center> <p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS. </p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <div id="h1"> <center> <h3> Update log</h3> </div> <div id="text"> <center> <p> Update 1: Where it all started. <br> <br> Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun. <br> <br> Update 3: fix search guard and some bugs. Interrgatoin room. </p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <a id="play"></a> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div> </div> </div> <footer class="jumbotron text-center"> <div class="container"> <p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p> </div> </footer>
Angular 6 Router Transition Animation不起作用（导航栏）
[英]Angular 6 Router Transition Animation doesn't work (Nav bar)
导航栏的关键帧 animation 不会在不同的 position 处重新触发
[英]Keyframes animation for a nav bar won't retrigger at a different position
jquery sticky-nav-bar 表现得像一个 css3 动画，如何阻止它？
[英]jquery sticky-nav-bar behaving like a css3 animation, how to stop it?
我想使用Particle.js创建一个网站，但左侧导航栏动画不起作用
[英]I wanted to make a website using particle.js but the left nav bar animation is not working
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.