Почему кнопка слайдера навигационного меню не работает? Я уже включил JQuery. Может ли кто-нибудь указать на мою ошибку?
образ кода без jquery cdn находится по адресу http://codepen.io/birdsong/pen/DxajG
также как мне создать другую версию вкладки правого слайдера? Я думаю, что это довольно просто? копирование вставки и изменение переменных?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="navContainer">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
<li>Page 7</li>
</ul>
<div id="contentContainer">
<header>
<div href="" onclick="openNav();" class="button"></div>
</header>
<div id="placeCheckHere"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function closeNav() {
$('#contentContainer').removeClass('moveOut').addClass('moveIn');
$('#navContainer ul').removeClass('slideIn').addClass('slideOut');
$('#placeCheckHere').html("");
}
function openNav() {
$('#contentContainer').removeClass('moveIn').addClass('moveOut');
$('#navContainer ul').removeClass('slideOut').addClass('slideIn');
$('#placeCheckHere').html("<div id='checkNavDiv' onclick='closeNav();'></div>");
}
</script>
</body>
</html>
Я думаю, проблема заключается в том, что вы пытаетесь воспроизвести пример, но у вас проблемы с CSS, который является scss
. Итак, вот полный код примера и тот же, который работает наоборот (примерно),
слева направо
CSS
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
font-family: 'Helvetica';
font-weight: 300;
}
#navContainer {
width: 85%;
height: 100%;
padding-right: 15%;
display: block;
background: #222;
position: relative;
top: 0px;
left: 0px;
overflow-x: hidden;
z-index: 1;
}
ul {
list-style: none;
padding: 10px;
}
li {
padding: 10px;
color: #eee;
}
#contentContainer {
width: 100%;
min-height: 100%;
position: absolute;
background: #ddd;
z-index: 2;
top: 0px;
left: 0px;
box-shadow: 0 0 40px black;
}
#checkNavDiv {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
header {
width: 100%;
height: 50px;
background: #bbb;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.button {
width: 33px;
height: 24px;
background: url("http://birdsongmedia.com/images/menu-icon1.png");
cursor: pointer;
position: relative;
top: 13px;
left: 19px;
}
article {
padding: 10px;
}
.moveOut {
-webkit-animation: moveContentOut 0.35s ease;
-webkit-transform: translate(85%, 0);
}
.moveIn {
-webkit-animation: moveContentIn 0.35s ease;
-webkit-transform: translate(0, 0);
}
@-webkit-keyframes moveContentOut {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(85%, 0);
}
}
@-webkit-keyframes moveContentIn {
0% {
-webkit-transform: translate(85%, 0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
.slideIn {
-webkit-animation: navSlideIn 0.35s ease;
-webkit-transform: translate(0, 0);
}
.slideOut {
-webkit-animation: navSlideOut 0.35s ease;
-webkit-transform: translate(-40px, 0);
}
@-webkit-keyframes navSlideIn {
0% {
-webkit-transform: translate(-40px, 0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
@-webkit-keyframes navSlideOut {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-40px, 0);
}
}
справа налево
CSS
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
font-family: 'Helvetica';
font-weight: 300;
}
#navContainer {
width: 85%;
height: 100%;
padding-right: 15%;
display: block;
background: #222;
position: relative;
top: 0px;
left: 0px;
overflow-x: hidden;
z-index: 1;
}
ul {
list-style: none;
padding: 10px;
}
#navContainer ul {
position: relative;
left: 110%;
}
li {
padding: 10px;
color: #eee;
}
#contentContainer {
width: 100%;
min-height: 100%;
position: absolute;
background: #ddd;
z-index: 2;
top: 0px;
left: 0px;
box-shadow: 0 0 40px black;
}
#checkNavDiv {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
header {
width: 100%;
height: 50px;
background: #bbb;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.button {
width: 33px;
height: 24px;
background: url("http://birdsongmedia.com/images/menu-icon1.png");
cursor: pointer;
position: relative;
top: 13px;
left: -19px;
float: right;
}
article {
padding: 10px;
}
.moveOut {
-webkit-animation: moveContentOut 0.35s ease;
-webkit-transform: translate(-85%, 0);
}
.moveIn {
-webkit-animation: moveContentIn 0.35s ease;
-webkit-transform: translate(0, 0);
}
@-webkit-keyframes moveContentOut {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-85%, 0);
}
}
@-webkit-keyframes moveContentIn {
0% {
-webkit-transform: translate(-85%, 0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
.slideIn {
-webkit-animation: navSlideIn 0.35s ease;
-webkit-transform: translate(0, 0);
}
.slideOut {
-webkit-animation: navSlideOut 0.35s ease;
-webkit-transform: translate(-40px, 0);
}
@-webkit-keyframes navSlideIn {
0% {
-webkit-transform: translate(-40px, 0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
@-webkit-keyframes navSlideOut {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-40px, 0);
}
}
общие html и js
<div id="navContainer">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
<li>Page 7</li>
</ul>
<div id="contentContainer">
<header>
<div href="" onclick="openNav();" class="button"></div>
</header>
<div id="placeCheckHere"></div>
</div>
</div>
JS
function closeNav() {
$('#contentContainer').removeClass('moveOut').addClass('moveIn');
$('#navContainer ul').removeClass('slideIn').addClass('slideOut');
$('#placeCheckHere').html("");
}
function openNav() {
$('#contentContainer').removeClass('moveIn').addClass('moveOut');
$('#navContainer ul').removeClass('slideOut').addClass('slideIn');
$('#placeCheckHere').html("<div id='checkNavDiv' onclick='closeNav();'></div>");
}