Creating a page with multiple slide out menus- one on the right, left, and bottom. Currently facing a few issues:
- The
contentdiv is not moving to the right when the menu is selected. The menu icon moves but the div stays put. - Attempting to have them both visible at the same time, but instead of appending the appropriate open/close class to the
body, the javascript file changes the class.
/*
Slidemenu
*/
(function() {
var $body = document.body,
$left_menu_trigger = $body.getElementsByClassName('left-menu-trigger')[0];
if ( typeof $left_menu_trigger !== 'undefined' ) {
$left_menu_trigger.addEventListener('click', function() {
$body.className = ( $body.className == 'left-menu-active' )? '' : 'left-menu-active';
});
}
}).call(this);
(function() {
var $body = document.body,
$right_menu_trigger = $body.getElementsByClassName('right-menu-trigger')[0];
if ( typeof $right_menu_trigger !== 'undefined' ) {
$right_menu_trigger.addEventListener('click', function() {
$body.className = ( $body.className == 'right-menu-active' )? '' : 'right-menu-active';
});
}
}).call(this);
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(43.0756, -70.7606),
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
});@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
/*
Fonts
*/
@font-face {
font-family: 'ico';
src: url("data:application/octet-stream;base64,d09GRgABAAAAAA3MABAAAAAAFdAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcZZJr3kdERUYAAAGIAAAAHwAAACAANgAGT1MvMgAAAagAAABHAAAAVj4nWUhjbWFwAAAB8AAAAEwAAAFW0CkD5WN2dCAAAAI8AAAAFAAAABwG1/8IZnBnbQAAAlAAAAT5AAAJkYoKeDtnYXNwAAAHTAAAAAgAAAAIAAAAEGdseWYAAAdUAAAETwAABla173lDaGVhZAAAC6QAAAAzAAAANv9VQE9oaGVhAAAL2AAAAB4AAAAkB9wDo2htdHgAAAv4AAAAJAAAACQasQBdbG9jYQAADBwAAAAUAAAAFAS6BnNtYXhwAAAMMAAAACAAAAAgAR4KLW5hbWUAAAxQAAAA1wAAAVaRnTKOcG9zdAAADSgAAABLAAAAYtX5CoJwcmVwAAANdAAAAFYAAABWkqGa/3icY2BgYGQAgpOd+YYg+hxLXRiMBgA7fwVAAAB4nGNgZGBg4ANiCQYQYGJgZGBm4ACSLGAeAwAEvAA9AHicY2BknsI4gYGVgYOpi2kPAwNDD4RmfMBgyMjEwMDEwMrMAAcCCCZDQJprCoPDC4YXrMxB/7MYopiDGKYChRlBcgD9QAv9AHic3YzbDcAgDAMv5dEOwRgMwv4TsAV1gB9WwJJ1ceQECCwXDFdTspkjVcyi8UBPY3ihszhbUX7VCZoSn5aZ/UjUlV8eMq7XD+jxBt54nGNgQANGDEb...
<!DOCTYPE html>
<head>
<title>Unique Direction</title>
<link rel="stylesheet" type="text/css" href="../_/base.css">
<link rel="stylesheet" type="text/css" href="unique-directions.css">
</head>
<body>
<!-- LEFT SLIDE MENU -->
<nav id="left-slide-menu">
<ul>
<li class="timeline">Timeline</li>
<li class="events">Events</li>
<li class="calendar">Calendar</li>
<li class="sep settings">Settings</li>
<li class="logout">Logout</li>
</ul>
</nav>
<!-- RIGHT SLIDE MENU -->
<nav id="right-slide-menu">
<ul>
<li class="timeline">Timeline</li>
<li class="events">Events</li>
<li class="calendar">Calendar</li>
<li class="sep settings">Settings</li>
<li class="logout">Logout</li>
</ul>
</nav>
<!-- CONTENT -->
<div id="content">
<div id="map"></div>
<div class="left-menu-trigger"></div>
<div class="right-menu-trigger"></div>
</div>
<script src="//maps.google.com/maps/api/js"></script>
<script defer="defer" src="//d3js.org/d3.v3.min.js"></script>
<script defer="defer" src="unique-directions.js"></script>
</body>
</html>