<!DOCTYPE html>
<html lang="nl" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanilla JS Responsive Menu</title>
<link rel="stylesheet" href="css/responsivemenu.css">
<link rel="stylesheet" href="css/demo.css">
<script type="text/javascript">function hasClass(e,t){return e.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))}var el=document.documentElement;var cl="no-js";if(hasClass(el,cl)){var reg=new RegExp("(\\s|^)"+cl+"(\\s|$)");el.className=el.className.replace(reg," js")}</script>
</head>
<body>
<div id="wrapper" onclick="">
<div class="navigation_container navigation_container1" role="navigation" aria-label="Main menu">
<p class="logo"><a href="#">Nature Travelers</a></p>
<ul class="navigation" role="menubar">
<li class="active" role="presentation">
<a role="menuitem" class="test" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Home">Home</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 2">Item 2</a>
</li>
<li role="presentation">
<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 3">Item 3</a>
<ul role="menu">
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 4 menu">Item 4</a>
<ul role="menu">
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
<li role="presentation">
<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>
<ul role="menu">
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test1">Test1</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test2">Test2</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test3">Test3</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
</ul>
</li>
</ul>
</div>
<!--<div class="navigation_container navigation_container2" role="navigation" aria-label="Main menu">-->
<!--<ul class="navigation" role="menubar">-->
<!--<li class="active" role="presentation">-->
<!--<a role="menuitem" class="test" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Home">Home</a>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 2">Item 2</a>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 3">Item 3</a>-->
<!--<ul role="menu">-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 4 menu">Item 4</a>-->
<!--<ul role="menu">-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>-->
<!--<ul role="menu">-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test1">Test1</a>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test2">Test2</a>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test3">Test3</a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--<li role="presentation">-->
<!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!-- loading apollo dependancy -->
<script src="apollo.js"></script>
<!-- loading responsive menu -->
<script src="vanilla.js.responsive.menu.js"></script>
<!-- initializing the menu -->
<script type="text/javascript">
responsivemenu.init({
wrapper: document.querySelector('.navigation_container1'),
togglecontent: 'menu',
sticky: 0,
// animateduration: 1000,
// subanimateduration: 1000,
onAfterInit: function() {
console.log('after init');
},
onAfterLoad: function() {
console.log('after load');
},
onBeforeToggleOpen: function() {
console.log('before toggle open');
},
onAfterToggleOpen: function() {
console.log('after toggle open');
},
onBeforeToggleClose: function() {
console.log('before toggle close');
},
onAfterToggleClose: function() {
console.log('after toggle close');
},
onBeforeSubToggleOpen: function() {
console.log('before sub toggle open');
},
onAfterSubToggleOpen: function() {
console.log('after sub toggle open');
},
onBeforeSubToggleClose: function() {
console.log('before sub toggle close');
},
onAfterSubToggleClose: function() {
console.log('after sub toggle close');
}
});
// responsivemenu.init({
// wrapper: document.querySelector('.navigation_container2'),
// onAfterInit: function() {
// console.log('after init 2');
// }
// });
</script>
<div id="banner">
<h1>Botanic Garden Travelers</h1>
</div>
</div>
</body>
</html>body {
background: #ecf0f1;
margin: 0;
padding: 0;
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
line-height: 24px;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
*, *:before, *:after {
box-sizing: border-box; }
.site {
margin: 0 auto;
padding: 24px;
max-width: 960px; }
.rm-togglebutton,
.rm-subtoggle {
margin: 5px;
padding: 5px 10px;
border: 1px solid black;
outline: none;
background: #fff;
color: #0072B3;
border-radius: 5px;
font-size: 1em;
cursor: pointer; }
.rm-togglebutton:hover,
.rm-subtoggle:hover {
text-decoration: underline; }
.rm-togglebutton:focus,
.rm-subtoggle:focus {
text-decoration: underline; }
.rm-subtoggle {
margin: 5px;
float: right; }
.navigation_container {
background: #745d46;
color: #fff;
min-height: 40px;
font-size: 2rem;
}
.navigation_container ul {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
list-style: none; }
@media (min-width: 600px) {
.navigation_container ul {
height: 40px; } }
.navigation_container ul:before,
.navigation_container ul:after {
display: table;
content: " "; }
.navigation_container ul:after {
clear: both; }
.navigation_container .rm-closed li.rm-parent > a:after,
.navigation_container .rm-fullmenu li.rm-parent > a:after {
content: " \25bc"; }
.navigation_container .rm-closed li.parent > a:after,
.navigation_container .rm-fullmenu li.parent > a:after {
content: " \25b6"; }
.navigation_container li {
padding: 0;
clear: both; }
@media (min-width: 600px) {
.navigation_container li {
height: 40px;
float: left;
clear: none; } }
.navigation_container li.focused, .navigation_container li:hover a,
.navigation_container li a:hover,
.navigation_container li a:focus {
background: #2c3e50; }
.navigation_container .rm-opened li {
float: none; }
.navigation_container a {
display: block;
color: #fff;
padding: 8px 16px;
line-height: 24px;
text-decoration: none;
height: 40px; }
.navigation_container a:after {
font-size: 12px;
vertical-align: middle;
line-height: 24px;
text-decoration: none; }
.navigation_container .active a,
.navigation_container .active a:hover,
.navigation_container .active a:focus {
background: #fff;
color: #333;
cursor: default; }
.navigation_container .rm-closed li,
.navigation_container .rm-fullmenu li {
overflow: visible; }
.navigation_container .rm-closed li ul,
.navigation_container .rm-fullmenu li ul {
height: auto;
background: #2c3e50;
padding: 0;
width: 180px;
border-top: none; }
@media (min-width: 600px) {
.navigation_container .rm-closed li ul,
.navigation_container .rm-fullmenu li ul {
transition: transform 0.1s cubic-bezier(0.195, 0.4, 0.45, 0.785);
transform: scaleY(0);
transform-origin: 0 0; } }
.navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover > ul {
display: block; }
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover > ul {
transform: scaleY(1); } }
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused li ul, .navigation_container .rm-closed li:hover li ul,
.navigation_container .rm-fullmenu li.rm-focused li ul,
.navigation_container .rm-fullmenu li:hover li ul {
transform: scaleX(0); } }
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused li.rm-focused > ul, .navigation_container .rm-closed li.rm-focused li:hover > ul, .navigation_container .rm-closed li:hover li.rm-focused > ul, .navigation_container .rm-closed li:hover li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused li.rm-focused > ul,
.navigation_container .rm-fullmenu li.rm-focused li:hover > ul,
.navigation_container .rm-fullmenu li:hover li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover li:hover > ul {
transform: scaleX(1); } }
.navigation_container .rm-closed li li,
.navigation_container .rm-fullmenu li li {
float: none; }
.navigation_container .rm-closed li li.rm-focused > a, .navigation_container .rm-closed li li:hover > a,
.navigation_container .rm-closed li li a:hover,
.navigation_container .rm-closed li li a:focus,
.navigation_container .rm-fullmenu li li.rm-focused > a,
.navigation_container .rm-fullmenu li li:hover > a,
.navigation_container .rm-fullmenu li li a:hover,
.navigation_container .rm-fullmenu li li a:focus {
text-decoration: none;
background: #233140;
color: white; }
/**
* When JS is enabled
*
* 1. We can use display none because we set display block again with JS immediately after initiating the menu
* 2. Display menu when initiated
* 3. Display menu on "desktop"
* 4. Display focused items
*/
.js .navigation_container {
display: none;
/* 1 */ }
.js .navigation_container.rm-initiated {
display: block;
/* 2 */ }
@media (min-width: 600px) {
.js .navigation_container {
display: block;
/* 3 */ } }
.js .navigation_container .rm-focused {
overflow: visible;
/* 4 */ }
/**
* When JS is either disabled or enabled
*
* 1. Relative to position li > ul items
* 2. Hide overflowing content so we can display on tabbing
* 3. Display on hover / focus
* 4. Children should have position absolute to hide them
*/
.navigation_container li {
position: relative;
/* 1 */ }
@media (min-width: 600px) {
.navigation_container li {
overflow: hidden;
/* 2 */ }
.navigation_container li:hover, .navigation_container li:focus {
overflow: visible;
/* 3 */ } }
@media (min-width: 600px) {
.navigation_container li ul {
position: absolute;
/* 4 */ } }
.navigation_container {
position: relative;
z-index: 1; }
@media (min-width: 600px) {
.navigation_container li ul {
position: absolute;
left: -9999px;
top: 100%;
z-index: -1;
width: 100%; } }
.navigation_container li li {
position: relative;
float: left; }
.navigation_container .rm-focused > ul,
.navigation_container li:hover > ul {
left: 0; }
.navigation_container li .rm-focused > ul,
.navigation_container li li:hover > ul {
left: 100%;
top: 0; }
/*# sourceMappingURL=responsivemenu.css.map */
/*# sourceMappingURL=demo.css.map */
#banner {
height: 30rem;
background-image: url("/IMAGES/new-masthead.jpg");
object-fit: scale-down;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: white;
margin-bottom: 3rem;
}
#banner h1 {
font-family: Poppins, "Times New Roman", Times, serif;
font-size: 6rem;
color: #745d46;
text-shadow: white 2px 2px 2px;
}
.logo {
position: relative;
top: 2rem;
letter-spacing: 3px;
}body {
background: #ecf0f1;
margin: 0;
padding: 0;
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
line-height: 24px;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
*, *:before, *:after {
box-sizing: border-box; }
.site {
margin: 0 auto;
padding: 24px;
max-width: 960px; }
.rm-togglebutton,
.rm-subtoggle {
margin: 5px;
padding: 5px 10px;
border: 1px solid black;
outline: none;
background: #fff;
color: #0072B3;
border-radius: 5px;
font-size: 1em;
cursor: pointer; }
.rm-togglebutton:hover,
.rm-subtoggle:hover {
text-decoration: underline; }
.rm-togglebutton:focus,
.rm-subtoggle:focus {
text-decoration: underline; }
.rm-subtoggle {
margin: 5px;
float: right; }
.navigation_container {
background: #745d46;
color: #fff;
min-height: 40px;
font-size: 2rem;
}
.navigation_container ul {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
list-style: none; }
@media (min-width: 600px) {
.navigation_container ul {
height: 40px; } }
.navigation_container ul:before,
.navigation_container ul:after {
display: table;
content: " "; }
.navigation_container ul:after {
clear: both; }
.navigation_container .rm-closed li.rm-parent > a:after,
.navigation_container .rm-fullmenu li.rm-parent > a:after {
content: " \25bc"; }
.navigation_container .rm-closed li.parent > a:after,
.navigation_container .rm-fullmenu li.parent > a:after {
content: " \25b6"; }
.navigation_container li {
padding: 0;
clear: both; }
@media (min-width: 600px) {
.navigation_container li {
height: 40px;
float: left;
clear: none; } }
.navigation_container li.focused, .navigation_container li:hover a,
.navigation_container li a:hover,
.navigation_container li a:focus {
background: #2c3e50; }
.navigation_container .rm-opened li {
float: none; }
.navigation_container a {
display: block;
color: #fff;
padding: 8px 16px;
line-height: 24px;
text-decoration: none;
height: 40px; }
.navigation_container a:after {
font-size: 12px;
vertical-align: middle;
line-height: 24px;
text-decoration: none; }
.navigation_container .active a,
.navigation_container .active a:hover,
.navigation_container .active a:focus {
background: #fff;
color: #333;
cursor: default; }
.navigation_container .rm-closed li,
.navigation_container .rm-fullmenu li {
overflow: visible; }
.navigation_container .rm-closed li ul,
.navigation_container .rm-fullmenu li ul {
height: auto;
background: #2c3e50;
padding: 0;
width: 180px;
border-top: none; }
@media (min-width: 600px) {
.navigation_container .rm-closed li ul,
.navigation_container .rm-fullmenu li ul {
transition: transform 0.1s cubic-bezier(0.195, 0.4, 0.45, 0.785);
transform: scaleY(0);
transform-origin: 0 0; } }
.navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover > ul {
display: block; }
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover > ul {
transform: scaleY(1); } }
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused li ul, .navigation_container .rm-closed li:hover li ul,
.navigation_container .rm-fullmenu li.rm-focused li ul,
.navigation_container .rm-fullmenu li:hover li ul {
transform: scaleX(0); } }
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused li.rm-focused > ul, .navigation_container .rm-closed li.rm-focused li:hover > ul, .navigation_container .rm-closed li:hover li.rm-focused > ul, .navigation_container .rm-closed li:hover li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused li.rm-focused > ul,
.navigation_container .rm-fullmenu li.rm-focused li:hover > ul,
.navigation_container .rm-fullmenu li:hover li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover li:hover > ul {
transform: scaleX(1); } }
.navigation_container .rm-closed li li,
.navigation_container .rm-fullmenu li li {
float: none; }
.navigation_container .rm-closed li li.rm-focused > a, .navigation_container .rm-closed li li:hover > a,
.navigation_container .rm-closed li li a:hover,
.navigation_container .rm-closed li li a:focus,
.navigation_container .rm-fullmenu li li.rm-focused > a,
.navigation_container .rm-fullmenu li li:hover > a,
.navigation_container .rm-fullmenu li li a:hover,
.navigation_container .rm-fullmenu li li a:focus {
text-decoration: none;
background: #233140;
color: white; }
/**
* When JS is enabled
*
* 1. We can use display none because we set display block again with JS immediately after initiating the menu
* 2. Display menu when initiated
* 3. Display menu on "desktop"
* 4. Display focused items
*/
.js .navigation_container {
display: none;
/* 1 */ }
.js .navigation_container.rm-initiated {
display: block;
/* 2 */ }
@media (min-width: 600px) {
.js .navigation_container {
display: block;
/* 3 */ } }
.js .navigation_container .rm-focused {
overflow: visible;
/* 4 */ }
/**
* When JS is either disabled or enabled
*
* 1. Relative to position li > ul items
* 2. Hide overflowing content so we can display on tabbing
* 3. Display on hover / focus
* 4. Children should have position absolute to hide them
*/
.navigation_container li {
position: relative;
/* 1 */ }
@media (min-width: 600px) {
.navigation_container li {
overflow: hidden;
/* 2 */ }
.navigation_container li:hover, .navigation_container li:focus {
overflow: visible;
/* 3 */ } }
@media (min-width: 600px) {
.navigation_container li ul {
position: absolute;
/* 4 */ } }
.navigation_container {
position: relative;
z-index: 1; }
@media (min-width: 600px) {
.navigation_container li ul {
position: absolute;
left: -9999px;
top: 100%;
z-index: -1;
width: 100%; } }
.navigation_container li li {
position: relative;
float: left; }
.navigation_container .rm-focused > ul,
.navigation_container li:hover > ul {
left: 0; }
.navigation_container li .rm-focused > ul,
.navigation_container li li:hover > ul {
left: 100%;
top: 0; }
/*# sourceMappingURL=responsivemenu.css.map */
/*# sourceMappingURL=demo.css.map */
#banner {
height: 30rem;
background-image: url("/IMAGES/new-masthead.jpg");
object-fit: scale-down;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: white;
margin-bottom: 3rem;
}
#banner h1 {
font-family: Poppins, "Times New Roman", Times, serif;
font-size: 6rem;
color: #745d46;
text-shadow: white 2px 2px 2px;
}
.logo {
position: relative;
top: 2rem;
letter-spacing: 3px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.