-1
Я создаю это приложение для проекта в школе, и я просто пытаюсь размахивать вокруг jQuery. Я нашел неплохой пример here. Который я пытался внедрить и использовать в качестве кнопки меню для своего слайдера. У меня возникли проблемы с воспроизведением анимации при нажатии.Мое анимационное меню гамбургера не работает
Кажется, что я играю, когда запускаю код, но потом это не после; также кажется, что в нем отсутствуют некоторые элементы.
Вот мой код, связанный с файлом CSS.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volo - X</title>
<meta name="description" content="Blueprint: Slide and Push Menus" />
<meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link href="STYLE.css" rel="stylesheet" type="text/css">
<script src="js/modernizr.custom.js"></script>
</head>
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<p>
</p>
<body onclick="myFunction()">
<div id="numberOne">
<img src="PHOTOS/menu.png"style="height:20px">
</div>
<div id="marginIncrease">
<a href="index.html">My Account</a>
</div>
<a href="Post A Job.html">Jobs</a>
<a href="Help.html">Help</a>
<a href="About - X.html"> About - X</a>
<div id="Facebook">
<a href="https://www.facebook.com">
<img src="PHOTOS/Facebook.png"style="height:40px">
</a>
</div>
<script>
$(document).ready(function() {
var trigger = $('#hamburger'),
isClosed = true;
trigger.click(function() {
burgerTime();
});
function burgerTime() {
if (isClosed == true) {
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
});
</script>
<script>
function myFunction() {
showLeft.onclick("myfuntion").disabled = true;
}
</script>
</nav>
<div class="container">
<header class="clearfix">
<p>
</span>
<div id="logo"
<h1><img src="PHOTOS/Volo x.png"style="max-width: 40%"></h1>
</div>
<nav>
</header>
<div class="main">
<section>
<h2> </h2>
<!-- BUTTON GOES IN HERE FOR TOP MENU
<button id="showLeft"></button>
-->
<button id="showLeft"></button>
<b>
<p style="line-height:2.5">
<font size="5" color="#939597">
// MY ACCOUNT
</p>
</font>
</b>
<p>
<font size="3" color="#F7941D">
<b>NAME:</b>
</font>
Matthew Arnott
<p>
<font size="3" color="#F7941D">
<b>ADDRESS: </font>
</b> 205 Galloway Street, HAMILTON
<p>
<font size="3" color="#F7941D">
<b>PHONE: </font></b> 021 938 737
<p>
<font size="3" color="#F7941D">
<b>EMAIL: </font></b> [email protected] <p>
<font size="3" color="#F7941D">
<b>BALANCE:</b> </font>
$109.45
<p>
<font size="3" color="#F7941D">
<b>STATS: </font></b>31 Jobs Completed, 99% Positive Feedback
<p>
Last Payed at 2:33pm, 14th April 2015
<p>
<font size="3" color="#F7941D">
<b>MESSAGES:</font>
<font size="3" color="#000">
<a href="OPEN CHAT"> (1)</a>
</font>
</p>
<p style="line-height:2.5">
<font size="5" color="#939597">
// CURRENT JOBS
</font>
<p>
<font size="3" color="#F7941D">
DRIVER LAST UPDATED: </font> 2:00PM, 1/4/15<p>
<font size="3" color="#F7941D">
<img src="PHOTOS/location.png"style="height:15px"> LOCATION: </font> Hamilton, Waikato<p>
<font size="3" color="#F7941D">
COST OF JOB:</font> $120
<p>
<font size="3" color="#F7941D">
JOB NUMBER</font> <a href="JOB INFO"> # 4397</a>
<p>
<font size="3" color="#F7941D">
<a href="OPEN CHAT">MESSAGE DRIVER</a>
</font>
</p>
</body>
<div id="hamburger" class="hamburglar is-open">
<div class="burger-icon">
<div class="burger-container"> <span class="burger-bun-top"></span> <span class="burger-filling"></span> <span class="burger-bun-bot"></span> </div>
</div>
<!-- svg ring containter -->
<div class="burger-ring"> <svg class="svg-ring">
<path class="path" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
</svg> </div>
<!-- the masked path that animates the fill to the ring -->
<svg width="0" height="0">
<mask id="mask">
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" />
</mask>
</svg>
<div class="path-burger">
<div class="animate-path">
<div class="path-rotation"></div>
</div>
</div>
</div>
</section>
<section class="buttonset">
</section>
</div>
</div>
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById('cbp-spmenu-s1'),
body = document.body;
showLeft.onclick = function() {
classie.toggle(this, 'active');
classie.toggle(menuLeft, 'cbp-spmenu-open');
disableOther('showLeft');
};
function disableOther(button) {
if(button !== 'showLeft') {
classie.toggle(showLeft, 'disabled');
}
}
</script>
<iframe src="https://www.google.com/maps/embed?pb=!1m22!1m12!1m3!1d100916.33952065148!2d175.26492379999996!3d-37.7751415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m7!1i0!3e0!4m0!4m3!3m2!1d-37.792778399999996!2d175.2717903!5e0!3m2!1sen!2snz!4v1429932205297" width="100%" height="300px" frameborder="0" style="border:0"></iframe>
<p>
<style type="text/css">
p { margin-left:1em;}
</style>
<font size="1" color="#939597">
Copyright © 2015 Volo - X, All Rights Reserved
</font>
<p>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Прежде всего, вы правильно настроили структуру HTML. Почему у вас есть два тела? Затем запустите скрипт сценария и снова запустите скрипт. Это не очень хороший способ написать скрипт. http://www.w3schools.com/html/default.asp – ketan
Какую оценку вы получили от Матфея? – ccc