Greshnick
17-01-2016, 21:22
Доброго времени суток, уважаемые Форумчане. Не могу никак разобраться с одним вопросом. Осваиваю фреймворк Foundation решил сделать выезжающее меню для мобильной версии сайта. Вроде бы подключил все JS и CSS скрипты. Но так и не срабатывает нажатие на меню. Привожу исходный код страницы:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Off-canvas</title>
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Foundation</span>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
$(document).foundation();
var elem = new Foundation.OffCanvas(element);
</script>
</body>
</html>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Off-canvas</title>
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
<span class="title-bar-title">Foundation</span>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
$(document).foundation();
var elem = new Foundation.OffCanvas(element);
</script>
</body>
</html>