0
我无法使用画布外导航设计修复元素。 http://codepen.io/StuffieStephie/pen/wajxXa修改了画布外导航菜单的标题/菜单栏吗？
（调整视口，以便它小于1000像素，标题是不可见的，否则。） 在桌面风格，导航栏是固定的，但在移动的头是不是即使我有一个！important声明
\t $(".toggle-nav").click(function() {
// Calling a function in case you want to expand upon this.
toggleNav();
});
function toggleNav() {
if ($('#drawer').hasClass('show-nav')) {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
} else {
$('#drawer').addClass('show-nav');
$('#nav-icon').addClass('open');
}
}
$('#closeButton').click(function() {
\t $('#drawer').removeClass('show-nav');
\t $('#nav-icon').removeClass('open');
});
\t $("nav h3").click(function(){
\t \t $("nav ul ul").slideUp();
\t \t if(!$(this).next().is(":visible"))
\t \t {
\t \t \t $(this).next().slideDown();
\t \t }
\t });
\t $("#downSplashArrow").click(function(event) {
event.preventDefault();
if ($('header').is(":visible")) {
$('#site-canvas').animate({
scrollTop: $("#page-content").offset().top
}, 1000); } else {
$('body').animate({
scrollTop: $("#page-content").offset().top
}, 1000);
}
}
);/* Import custom fonts */
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* Reset Default Browser Styles */
html, body, a, h1, h2, h3, h4, h5, h6, ul, li, span {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
\t text-decoration: none;
\t \t list-style-type: none;
\t \t color: inherit;
}
html,
body {
height: 100%;
/*overflow: hidden;*/
}
/* Navagation */
nav { \t
\t width: 100%;
font-family: Montserrat, 'Montserrat-Regular', 'Montserrat-Regular-eot', sans-serif;
\t font-weight: 700;
background: #333;
\t height: 55px;
\t text-align: center;
\t
\t position: fixed;
z-index: 10;
\t font-size: .8em;
\t text-transform: uppercase;
}
/*
nav img {
\t height: 100%;
\t vertical-align:middle;
\t margin-right: 50px;
\t display: inline;
} */
header, #closeButton {
\t display: none;
}
nav ul li {
/*width: 11%;
min-width: 140px; */
\t color: #DDD;
\t float: left;
\t display: inline-block; \t
}
nav li a{
\t display: inline-block;
\t line-height: 55px;
\t padding: 0 5px 0 20px;
\t }
nav li ul{
\t display: none;
\t width: 200px;
\t position: absolute;
\t font-size: .8em;
}
nav li:hover {
\t color: #3C6DDF;
\t background-color: #8db3ff;
}
nav li li a {
\t line-height: 1em;
\t padding: 20px 0;
\t width: 200px;
\t background: #333333;
}
nav li li a:hover {
\t background-color: #8db3ff; }
\t
nav li span {
\t font-weight:900;
\t padding: 0 0px 0 .5em;
\t cursor:pointer;
}
#site-canvas {
width: 100%;
height: 100%;
/*overflow-y: scroll;*/
}
/* Splash page */
.splash {
\t background: url('http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/img/splash-bg.jpg') center center;
background-size: cover;
min-height: 100%;
width: 100%;
background-size: cover;
min-height: 100%;
width: 100%;
text-align: center;
position:relative;
/*
position:absolute;
top: 0;
left: 0;
z-index: 0;
*/
}
a.splash-arrow {
color: white;
font-size: 1.2em;
position: absolute;
bottom: 55px;
left: 50%;
margin-left: -25px;
padding: 10px;
width: 50px;
height: 50px;
font-weight: bold;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
border: 3px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.splash-arrow img {
\t margin-top: 40%;
}
a.splash-arrow:hover {
text-decoration: none;
bottom: 50px;
}
@media screen and (max-width: 949px) {
#closeButton {
\t display: block;
\t line-height: 55px;
\t border-bottom: none;
}
html,
body {
height: 100%;
overflow: hidden;
}
/* Mobile Slideout */
#drawer {
\t min-width: 200px;
position: absolute;
top: 0;
left: -300px;
height: 100%;
width: 300px;
background: #2f2f2f;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
#site-canvas {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: .3s ease all;
transition: .3s ease all;
position: relative;
}
header {
width: 100%;
display: block;
top: 0px;
left: 0px;
right: 0px;
height: 55px;
position: fixed !important;
background: #333;
z-index: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
/* Show-nav styles */
#drawer.show-nav, #drawer.show-nav + #site-canvas {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
#drawer.show-nav + #site-canvas {
\t background: rgba(255, 255, 255, .8);
\t height: 100%;
}
/*General Navagation*/
nav {
font-family: Montserrat, 'Montserrat-Regular', 'Montserrat-Regular-eot', sans-serif;
\t font-weight: 700;
background: #333;
\t height: 55px;
\t text-align:center;
\t font-size: .8em;
\t text-transform: uppercase;
\t position: absolute;
\t z-index: 11;
}
nav h3 {
\t font-size: 2em;
\t background: #283744;
\t border-bottom: 1px solid #DDD;;
\t cursor: pointer;
}
#closeButton {
\t background: #333;
}
nav ul ul {
\t display: none;
}
nav ul li {
/*width: 11%;
min-width: 140px; */
\t color: #DDD;
\t float: none;
\t display: block; \t
}
nav li ul{
\t width: 100%;
\t position: relative;
}
nav li ul li a {
\t width: 100%
}
/* Icon 1 */
#nav-icon {
width: 60px;
height: 45px;
position: relative;
margin-left: 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
display: inline-block;
}
#nav-icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: rgb(145, 16, 20);
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Menu Icon*/
#nav-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon.open span:nth-child(1) {
-webkit-transform: translate(8px,-4px) rotate(45deg);
-moz-transform: translate(8px,-4px) rotate(45deg);
-o-transform: translate(8px,-4px) rotate(45deg);
transform: translate(8px,-4px) rotate(45deg);
}
#nav-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: translate(8px,2px) rotate(-45deg);
-moz-transform: translate(8px,2px) rotate(-45deg);
-o-transform: translate(8px,2px) rotate(-45deg);
transform: translate(8px,2px) rotate(-45deg);
//top: 39px;
//left: 8px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<title>Off Canvas Menus Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<!-- Styles -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<nav id="drawer">
<ul>
\t <h3 id="closeButton"><li><i class="fa fa-times-circle-o"></i> Close <i class="fa fa-times-circle-o"></i></li></h3>
<li>
\t <h3><a href="#" title="Our Event Home Page">Home</a></h3></li>
\t \t \t <li>
\t \t \t \t <h3><a href="#" id="events">Events <span>+</span></a></h3>
\t \t \t \t <ul id="eventsMenu" class="subMenu">
\t \t \t \t \t <li><a href="#">Some Contest</a></li>
\t \t \t \t \t <li><a href="#">Another Contest</a></li>
\t \t \t \t \t <li><a href="#">Misc. Events</a></li>
\t \t \t \t \t <li><a href="#">Dance</a></li>
\t \t \t \t \t <li><a href="#">Concert</a></li>
\t \t \t \t \t <li><a href="#">An event with a fairly long title</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li class="cssHover topMain">
\t \t \t \t <h3><a href="#" id="rooms">Rooms <span>+</span></a></h3>
\t \t \t \t <ul id ="roomsMenu" class="subMenu">
\t \t \t \t \t <li><a href="#">Art Gallery</a></li>
\t \t \t \t \t <li><a href="#">Market Room</a></li>
\t \t \t \t \t <li><a href="#">Some other room</a></li>
\t \t \t \t \t <li><a href="#">Film Screening</a></li>
\t \t \t \t \t <li><a href="#">Gaming</a></li>
\t \t \t \t \t <li><a href="#">Our Shop</a></li>
\t \t \t \t </ul> \t \t \t
\t \t \t </li>
\t \t \t <li class="topMain">
\t \t \t \t <h3> <a href="#">Special Guests</a> </h3> \t </li>
\t \t \t <li class="cssHover topMain">
\t \t \t \t <h3><a href="#" id="info">Information <span>+</span></a></h3>
\t \t \t \t <ul id="infoMenu" class="subMenu">
\t \t \t \t \t <li><a href="#">Parents Info</a></li>
\t \t \t \t \t <li><a href="#">Our Policies</a></li>
\t \t \t \t \t <li><a href="#">Maps/Location</a></li>
\t \t \t \t \t <li><a href="#">Need a Hotel?</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li class="cssHover topMain">
\t \t \t \t <h3><a href="#" id="story">History <span>+</span></a></h3>
\t \t \t \t <ul id="storyMenu" class="subMenu">
\t \t \t \t \t <li><a href="#">Previous Festivals</a></li>
\t \t \t \t \t <li><a href="#">Meet the Staff</a></li>
\t \t \t \t \t <li><a href="#">Artwork</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li class="cssHover topMain">
\t \t \t \t <h3><a href="#" id="contact">Contact Us <span>+</span></a></h3>
\t \t \t \t <ul id="contactMenu" class="subMenu">
\t \t \t \t \t <li><a href="#">Contact the Staff</a></li>
\t \t \t \t \t <li><a href="#">Volunteer</a></li>
\t \t \t \t \t <li><a href="#">Submit an Idea</a></li>
\t \t \t \t \t <li><a href="#">Advertise Our Event</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li class="topMain"><h3><a href="#">Registration</a></h3></li> \t
\t \t </ul>
</nav>
<!-- End Menu -->
<div id="site-canvas">
\t <header>
<a href="#" class="toggle-nav" ><div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div></a> <img src="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_red_rectangle_T.png" height="50"></header>
<div class="splash">
<a href="#" id="downSplashArrow" class="splash-arrow"><img src="http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/img/down-arrow.png"></a>
</div>
<div id="page-content">
<p>TEXT BEGINS HERE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt congue sapien, eu fermentum elit sollicitudin sit amet. Nulla quam est, tincidunt sed risus id, interdum elementum velit. Curabitur a varius justo, eget pharetra urna. Maecenas at tincidunt purus. Quisque dignissim sagittis nunc, quis commodo justo efficitur a. Nam congue felis vel est mollis, vitae tristique libero viverra. Nulla cursus, sapien sed mattis maximus, ligula tellus dapibus diam, in vulputate erat lorem ut neque. Suspendisse scelerisque eros enim, id lobortis lacus maximus eu. Aliquam augue ipsum, mattis et suscipit vel, facilisis vitae ipsum. Praesent semper magna ligula, id molestie eros tempus vitae.
Nullam eu quam quis nibh sodales fringilla. Vivamus molestie fermentum urna nec ultricies. Mauris ut convallis ligula, sit amet laoreet nulla. Mauris pellentesque elit nec risus laoreet, elementum faucibus erat vulputate. Curabitur consectetur, lacus aliquam iaculis finibus, metus metus porta metus, vitae bibendum mi ante porttitor lectus. Aliquam dui felis, auctor ut aliquet pellentesque, dignissim in nisl. Phasellus finibus finibus ante id vulputate. Suspendisse a ipsum blandit tortor rhoncus tincidunt eu ut tortor.
Aenean convallis quam id tortor tincidunt, eu rutrum lectus ultricies. Aenean aliquet in velit luctus porta. Phasellus nec urna volutpat, posuere purus at, euismod nulla. Maecenas sed accumsan libero. Duis efficitur porttitor elit, sed commodo leo mattis eu. Aenean sit amet dui euismod, finibus lectus non, fermentum quam. Morbi vel rutrum quam, non iaculis ipsum. Vestibulum rutrum justo at consequat euismod. Sed feugiat nec velit ac laoreet. Etiam elit tellus, posuere in semper id, porta ut purus. Vestibulum sagittis id risus ut finibus. Morbi sagittis mattis tempor. Maecenas bibendum egestas rhoncus. Nulla facilisi.
Integer eleifend, nibh in molestie blandit, tortor turpis finibus risus, ut pellentesque odio magna a nisl. Integer porttitor congue semper. Cras vulputate, tortor non iaculis elementum, massa velit convallis ipsum, a varius nisl nunc vel nisi. Nam accumsan eros eget augue varius, ac interdum tellus pretium. Morbi malesuada lectus quis elit blandit volutpat. Duis odio erat, fermentum id nibh facilisis, fringilla congue urna. Sed scelerisque nunc ac ante varius, eget vulputate urna dictum. Proin vel pulvinar velit, sed faucibus orci.
Integer varius nisi eget egestas convallis. In eget elit pharetra, posuere nisi a, convallis nulla. Etiam volutpat magna sit amet pharetra volutpat. Aliquam sed orci viverra, mattis nibh sit amet, mollis ante. Morbi elementum diam neque, quis ultrices quam dignissim non. Phasellus tincidunt tincidunt nisi. Vestibulum commodo diam lorem, id vulputate felis lacinia nec.
</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt congue sapien, eu fermentum elit sollicitudin sit amet. Nulla quam est, tincidunt sed risus id, interdum elementum velit. Curabitur a varius justo, eget pharetra urna. Maecenas at tincidunt purus. Quisque dignissim sagittis nunc, quis commodo justo efficitur a. Nam congue felis vel est mollis, vitae tristique libero viverra. Nulla cursus, sapien sed mattis maximus, ligula tellus dapibus diam, in vulputate erat lorem ut neque. Suspendisse scelerisque eros enim, id lobortis lacus maximus eu. Aliquam augue ipsum, mattis et suscipit vel, facilisis vitae ipsum. Praesent semper magna ligula, id molestie eros tempus vitae.
Nullam eu quam quis nibh sodales fringilla. Vivamus molestie fermentum urna nec ultricies. Mauris ut convallis ligula, sit amet laoreet nulla. Mauris pellentesque elit nec risus laoreet, elementum faucibus erat vulputate. Curabitur consectetur, lacus aliquam iaculis finibus, metus metus porta metus, vitae bibendum mi ante porttitor lectus. Aliquam dui felis, auctor ut aliquet pellentesque, dignissim in nisl. Phasellus finibus finibus ante id vulputate. Suspendisse a ipsum blandit tortor rhoncus tincidunt eu ut tortor.
Aenean convallis quam id tortor tincidunt, eu rutrum lectus ultricies. Aenean aliquet in velit luctus porta. Phasellus nec urna volutpat, posuere purus at, euismod nulla. Maecenas sed accumsan libero. Duis efficitur porttitor elit, sed commodo leo mattis eu. Aenean sit amet dui euismod, finibus lectus non, fermentum quam. Morbi vel rutrum quam, non iaculis ipsum. Vestibulum rutrum justo at consequat euismod. Sed feugiat nec velit ac laoreet. Etiam elit tellus, posuere in semper id, porta ut purus. Vestibulum sagittis id risus ut finibus. Morbi sagittis mattis tempor. Maecenas bibendum egestas rhoncus. Nulla facilisi.
Integer eleifend, nibh in molestie blandit, tortor turpis finibus risus, ut pellentesque odio magna a nisl. Integer porttitor congue semper. Cras vulputate, tortor non iaculis elementum, massa velit convallis ipsum, a varius nisl nunc vel nisi. Nam accumsan eros eget augue varius, ac interdum tellus pretium. Morbi malesuada lectus quis elit blandit volutpat. Duis odio erat, fermentum id nibh facilisis, fringilla congue urna. Sed scelerisque nunc ac ante varius, eget vulputate urna dictum. Proin vel pulvinar velit, sed faucibus orci.
Integer varius nisi eget egestas convallis. In eget elit pharetra, posuere nisi a, convallis nulla. Etiam volutpat magna sit amet pharetra volutpat. Aliquam sed orci viverra, mattis nibh sit amet, mollis ante. Morbi elementum diam neque, quis ultrices quam dignissim non. Phasellus tincidunt tincidunt nisi. Vestibulum commodo diam lorem, id vulputate felis lacinia nec.
</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt congue sapien, eu fermentum elit sollicitudin sit amet. Nulla quam est, tincidunt sed risus id, interdum elementum velit. Curabitur a varius justo, eget pharetra urna. Maecenas at tincidunt purus. Quisque dignissim sagittis nunc, quis commodo justo efficitur a. Nam congue felis vel est mollis, vitae tristique libero viverra. Nulla cursus, sapien sed mattis maximus, ligula tellus dapibus diam, in vulputate erat lorem ut neque. Suspendisse scelerisque eros enim, id lobortis lacus maximus eu. Aliquam augue ipsum, mattis et suscipit vel, facilisis vitae ipsum. Praesent semper magna ligula, id molestie eros tempus vitae.
Nullam eu quam quis nibh sodales fringilla. Vivamus molestie fermentum urna nec ultricies. Mauris ut convallis ligula, sit amet laoreet nulla. Mauris pellentesque elit nec risus laoreet, elementum faucibus erat vulputate. Curabitur consectetur, lacus aliquam iaculis finibus, metus metus porta metus, vitae bibendum mi ante porttitor lectus. Aliquam dui felis, auctor ut aliquet pellentesque, dignissim in nisl. Phasellus finibus finibus ante id vulputate. Suspendisse a ipsum blandit tortor rhoncus tincidunt eu ut tortor.
Aenean convallis quam id tortor tincidunt, eu rutrum lectus ultricies. Aenean aliquet in velit luctus porta. Phasellus nec urna volutpat, posuere purus at, euismod nulla. Maecenas sed accumsan libero. Duis efficitur porttitor elit, sed commodo leo mattis eu. Aenean sit amet dui euismod, finibus lectus non, fermentum quam. Morbi vel rutrum quam, non iaculis ipsum. Vestibulum rutrum justo at consequat euismod. Sed feugiat nec velit ac laoreet. Etiam elit tellus, posuere in semper id, porta ut purus. Vestibulum sagittis id risus ut finibus. Morbi sagittis mattis tempor. Maecenas bibendum egestas rhoncus. Nulla facilisi.
Integer eleifend, nibh in molestie blandit, tortor turpis finibus risus, ut pellentesque odio magna a nisl. Integer porttitor congue semper. Cras vulputate, tortor non iaculis elementum, massa velit convallis ipsum, a varius nisl nunc vel nisi. Nam accumsan eros eget augue varius, ac interdum tellus pretium. Morbi malesuada lectus quis elit blandit volutpat. Duis odio erat, fermentum id nibh facilisis, fringilla congue urna. Sed scelerisque nunc ac ante varius, eget vulputate urna dictum. Proin vel pulvinar velit, sed faucibus orci.
Integer varius nisi eget egestas convallis. In eget elit pharetra, posuere nisi a, convallis nulla. Etiam volutpat magna sit amet pharetra volutpat. Aliquam sed orci viverra, mattis nibh sit amet, mollis ante. Morbi elementum diam neque, quis ultrices quam dignissim non. Phasellus tincidunt tincidunt nisi. Vestibulum commodo diam lorem, id vulputate felis lacinia nec.
</p>.
</div> <!-- #page-content -->
</div><!-- #site-canvas -->
</body>
</html>这整个事情是有点通过头需要与画布的其余部分滑过时关闭帆布菜单打开抽屉的事实令人费解。
任何想法？
编辑：好吧，我发现了一些相当麻烦的事情，我的jQuery向下滚动功能（桌面版）在Chrome中运行，但不在Firefox和IE中运行！而在IE中，我的标题已修复，但未在Chrome和Firefox中使用。这是什么ಠ_ಠ
@TylerH感谢您的精彩编辑！我不知道我们可以运行全屏代码片段。整齐。 – StephanieQ
这是一个相对较新的功能，只有几个月大。他们被称为* StackSnippets *，正式。它们被实现来帮助解决链接腐烂问题（旧的CodePens或JSFiddles到期/被覆盖）。 – TylerH