СТАРЫЙ комментарий
Вместо добавления EventListener с помощью JS, вы можете просто добавить :hover свойства в CSS.
#menu:hover{
overflow: scroll !important;
}
Обновлено: измените CSS полосы прокрутки вместо
/////////////////////////////////////////////////
// Vars
var theMenu = document.getElementById('menu');
var menuCurrentState = false;
/////////////////////////////////////////////////
// Show scrollbar only when scrolling
/////////////////////////////////////////////////
// Menu toggle
function toggle(customID) { /* Function set on element of choice, 'customID' is the ID
of element to toggle with button. Ex:
<button onclick="(toggle('menu')">Button</button> */
var theToggledElement = document.getElementById(customID);
if (menuCurrentState === false) { //menuCurrentState is too specific for this to be a universal toggle, fix later
menuCurrentState = true; //menuCurrentState is too specific for this to be a universal toggle, fix later
theToggledElement.style.left = '0px';
menuCancel.style.display = 'block';
menuButton.style.backgroundColor = '#ff1744';
theMenu.style.boxShadow = '0 1px 2px rgba(0,0,0,0.24), 3px 5px 26px 0px rgba(0,0,0,0.24)';
theMenu.style.transition = 'all 150ms cubic-bezier(0.17, 0.04, 0.03, 0.94)';
console.log('State set to "true" and "display" to "visible"');
}
else if (menuCurrentState === true) { //menuCurrentState is too specific for this to be a universal toggle, fix later
menuCurrentState = false; //menuCurrentState is too specific for this to be a universal toggle, fix later
theToggledElement.style.left = 'calc(-100% + (0.5cm + 1.461544602cm + .5cm)';
menuCancel.style.display = 'none';
menuButton.style.background = '#c6ff00';
theMenu.style.boxShadow = '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), 3px 5px 26px 0px rgba(0,0,0,0.24)';
theMenu.style.transition = 'all 75ms cubic-bezier(0.17, 0.04, 0.03, 0.94)';
console.log('State set to "false" and "display" to "none"');
}
}
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i');
* {
font-family: 'Roboto', sans-serif;
font-weight: 300;
outline: none;
}
/*#######################################*/
/* Menu element */
#menu {
position: fixed;
top: 0;
left: -100%;
right: 0;
bottom: 0;
margin-right: 2cm;
display: inline;
background-color: #FFF176 !important;
color: #263238;
height: calc(100% - 1cm); /* Since padding top and bottom is 0.5 cm */
width: 300px;
padding: 25px;
z-index: 20 !important;
overflow:auto;
border: 0px solid #000 !important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), 3px 5px 26px 0px rgba(0,0,0,0.24);
transition: all 150ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
#menu::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#menu:hover::-webkit-scrollbar, #menu:focus::-webkit-scrollbar , #menu:active::-webkit-scrollbar , #menu:visited::-webkit-scrollbar {
width: 20px !important;
background: transparent !important;
}
/*#######################################*/
/* Button to trigger the menu */
#menuButtonInnerCircle {
position: fixed;
display: inline-block;
bottom: 0.5cm;
left: 0.25cm;
width: 1cm;
height: 1cm;
border-radius: 50%;
background: #c6ff00;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
z-index: 21 !important;
}
#menuButtonInnerCircle:hover, #menuButtonInnerCircle:active, #menuButtonInnerCircle:focus {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transform: scale(1.1);
}
/*#######################################*/
/* Menu items */
.menuItem, .menuItem:hover, .menuItem:active, .menuItem:focus {
display: inline-block;
/*float: left;
clear: both;*/
border-bottom: 4px solid #000;
padding: .2cm 0.2cm 0 0.2cm;
margin-top: .2cm;
margin-right: .4cm;
border-radius: .1cm;
color: #FFD600;
background-color: #4A148C;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
svg.menuIcons {
display: inline;
padding: 0;
margin: 0;
text-align: center;
width:1cm;
height:1cm;
background-color: transparent;
}
path.menuIcons {
display: inline;
fill: #FFD600;
fill-opacity: 1;
padding: 0;
margin: 0;
text-align: center;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
.menuItem:hover, .menuItem:active, .menuItem:focus {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transform: scale(1.1);
}
/*#######################################*/
/* Template to make the instructions/info
a bit easier on the eye */
.note {
font-size: 16px;
line-height: 21px;
width: 400px;
height: auto;
margin: 1px;
padding: 6px 0px 75px 42px;
position: relative;
color: #444;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
-ms-background-size: 100% 20px;
-o-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.note::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
.head {
background-color: #FFF;
min-height: 75px;
margin-left: -42px;
margin-top: -4px;
margin-bottom: 11px;
}
body {
background: -webkit-linear-gradient(top, rgb(136,199,201) 58%, rgb(202,232,235) 100%);
background: -moz-linear-gradient(top, rgb(136,199,201) 58%, rgb(202,232,235) 100%);
background: -ms-linear-gradient(top, rgb(136,199,201) 58%, rgb(202,232,235) 100%);
background: -o-linear-gradient(top, rgb(136,199,201) 58%, rgb(202,232,235) 100%);
background: linear-gradient(top, rgb(136,199,201) 58%, rgb(202,232,235) 100%);
padding: 20px;
height: 100%;
}
article {
padding-right: 20px;
}
/* NOT NEEDED, but hell, scrollbars are ugly! */
::-webkit-scrollbar {
border-radius: 5px;
background: transparent url('../res/transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
border: 0px solid red;
width: 14px;
height: 5px !important;
}
::-webkit-scrollbar-button {
display: none; /* DON'T display the top/bottom/left/right arrows */
}
::-webkit-scrollbar-thumb {
height: 6px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb:hover /* ..and when hovering it */
{
border-radius: 5px;
background-color: rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:active /* ..and when clicking it */
{
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:active /* ..and when it's focused */
{
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-corner {
display:none; /* DON'T display the corner */
}
::-webkit-resizer, ::-webkit-resizer:hover, ::-webkit-resizer:focus, ::-webkit-resizer:active {
background: transparent url('../res/transparent.png') repeat-y !important; /* IMAGE is IMPORTANT as COLOR does NOT work. Also it needs to be HERE */
}
<html>
<head><head>
<body>
<section class="note">
<article class="head"></article>
<article contenteditable="false">
<robotocantSIMPLYbold style="font-weight: 400 !important;">
CASE:
</robotocantSIMPLYbold>
I added some JS so that the 'display' attribute 'value' is "hidden" as long as a user DOES NOT scroll the page as I use multiple layers on my site that shows at the same time, and I don't want a thousand scroll bars as focal points.
<br><br>HOWEVER: When I added the listener event, I now have to "touch/click" the element before I can start scrolling on touch devices.
<br><br>
<robotocantSIMPLYbold style="font-weight: 400 !important;">
NOTE!
</robotocantSIMPLYbold>If you try this on mobile phone (which is the whole point), there is SOME scroll, but that is the codepen body, not my code. This can also be deducted by the fact that there is A LOT of text here.
</article>
</section>
<!-- #######################################
/* Menu -->
<div id="menu">
<div class="menuItem" onclick="toggle('menu')">
<svg class="menuIcons" viewBox="0 0 24 24">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path class="menuIcons" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" filter="url(#dropshadow)"/>
</svg>
</div>
<div class="menuItem" toggle('menu')">
<svg class="menuIcons" viewBox="0 0 24 24">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path class="menuIcons" d="M7.5,18A5.5,5.5 0 0,1 2,12.5A5.5,5.5 0 0,1 7.5,7H18A4,4 0 0,1 22,11A4,4 0 0,1 18,15H9.5A2.5,2.5 0 0,1 7,12.5A2.5,2.5 0 0,1 9.5,10H17V11.5H9.5A1,1 0 0,0 8.5,12.5A1,1 0 0,0 9.5,13.5H18A2.5,2.5 0 0,0 20.5,11A2.5,2.5 0 0,0 18,8.5H7.5A4,4 0 0,0 3.5,12.5A4,4 0 0,0 7.5,16.5H17V18H7.5Z" filter="url(#dropshadow)"/>
</svg>
</div>
<div class="menuItem" onclick="toggle('menu')">
<svg class="menuIcons" viewBox="0 0 24 24">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path class="menuIcons" d="M7.5,18A5.5,5.5 0 0,1 2,12.5A5.5,5.5 0 0,1 7.5,7H18A4,4 0 0,1 22,11A4,4 0 0,1 18,15H9.5A2.5,2.5 0 0,1 7,12.5A2.5,2.5 0 0,1 9.5,10H17V11.5H9.5A1,1 0 0,0 8.5,12.5A1,1 0 0,0 9.5,13.5H18A2.5,2.5 0 0,0 20.5,11A2.5,2.5 0 0,0 18,8.5H7.5A4,4 0 0,0 3.5,12.5A4,4 0 0,0 7.5,16.5H17V18H7.5Z" filter="url(#dropshadow)"/>
</svg>
</div>
<div class="menuItem" onclick="toggle('menu')">
<svg class="menuIcons" viewBox="0 0 24 24">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path class="menuIcons" d="M22.59,7.92L23.75,9.33L19,14.08L16.25,11.08L17.41,9.92L19,11.5L22.59,7.92M6,5A3,3 0 0,1 9,8A3,3 0 0,1 6,11A3,3 0 0,1 3,8A3,3 0 0,1 6,5M11,5A3,3 0 0,1 14,8A3,3 0 0,1 11,11C10.68,11 10.37,10.95 10.08,10.85C10.65,10.04 11,9.06 11,8C11,6.94 10.65,5.95 10.08,5.14C10.37,5.05 10.68,5 11,5M6,13C8,13 12,14 12,16V18H0V16C0,14 4,13 6,13M12.62,13.16C14.63,13.5 17,14.46 17,16V18H14V16C14,14.82 13.45,13.88 12.62,13.16Z" filter="url(#dropshadow)"/>
</svg>
</div>
<div class="menuItem" onclick="toggle('menu')">
<svg class="menuIcons" viewBox="0 0 24 24">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path class="menuIcons" d="M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75" filter="url(#dropshadow)"/>
</svg>
</div>
<div class="menuItem" onclick="toggle('menu')">
<svg class="menuIcons" viewBox="0 0 200 181">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1.5"/>
<feOffset dx="0" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<path class="menuIcons" d="M180,180.177l-160,0c-11.046,0 -20,-8.954 -20,-20l0,-120c0,-11.045 8.954,-19.999 20,-20l20.309,0l18.189,-18.351l3.529,-1.48c12.554,-0.056 77.928,-0.346 77.928,-0.346l20.045,20.177l20,0c11.046,0 20,8.955 20,20l0,120c0,0.087 -0.001,0.173 -0.002,0.259l0,0l-0.001,0.089l-0.004,0.169l0,0l-0.003,0.111l-0.005,0.145l0,0l-0.005,0.126l-0.006,0.131l0,0l0,0l-0.008,0.14l-0.007,0.115l0,0l0,0l-0.011,0.156l-0.006,0.098l0,0l0,0l-0.015,0.175l-0.006,0.079l0,0l0,0l-0.019,0.196l-0.005,0.056l0,0l0,0l-0.024,0.221l-0.003,0.031l0,0l0,0l-0.03,0.248l-0.001,0.002c-1.251,9.843 -9.656,17.453 -19.839,17.453Zm0,-150l-160,0l-0.002,0c-2.652,0 -5.195,1.054 -7.07,2.929c-1.875,1.875 -2.928,4.418 -2.928,7.069l0,120.002c0,5.523 4.477,10 10,10l160,0c5.523,0 10,-4.477 10,-10c0,0 0,0 0,0l0,-120c0,0 0,0 0,-0.002c0,-2.651 -1.053,-5.194 -2.928,-7.069c-1.875,-1.875 -4.418,-2.929 -7.07,-2.929l-0.002,0Zm-80,20c27.596,0 50,22.405 50,50c0,27.596 -22.404,50 -50,50c-27.596,0 -50,-22.404 -50,-50c0,-27.595 22.404,-50 50,-50Zm0,10c22.077,0 40,17.924 40,40c0,22.077 -17.923,40 -40,40c-22.077,0 -40,-17.923 -40,-40c0,-22.076 17.923,-40 40,-40Zm0,10c16.557,0 30,13.443 30,30c0,16.558 -13.443,30 -30,30c-16.557,0 -30,-13.442 -30,-30c0,-16.557 13.443,-30 30,-30Zm50,-30c0,0 -0.001,0 -0.002,0c-2.652,0 -5.195,1.054 -7.07,2.929c-1.875,1.875 -2.928,4.418 -2.928,7.069l0,0.002c0,5.523 4.477,10 10,10l20,0c5.523,0 10,-4.477 10,-10c0,0 0,0 0,0c0,0 0,0 0,-0.002c0,-2.651 -1.053,-5.194 -2.928,-7.069c-1.875,-1.875 -4.418,-2.929 -7.07,-2.929c-0.001,0 -0.002,0 -0.002,0l-20,0Z"x filter="url(#dropshadow)"/>
</svg>
</div>
<p>
<b>Menu is now open:</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet lacinia tellus, vel cursus leo. In eget venenatis quam. Nullam quam sapien, gravida non lorem non, dictum mattis justo. Donec eleifend vitae enim quis commodo. Nam neque ante, tincidunt eu mauris non, maximus varius tortor. Praesent vel mi nulla. Cras eu tincidunt neque. Curabitur accumsan orci eu molestie consectetur.
<p>
Aliquam erat volutpat. Sed nisi libero, sodales sed dapibus nec, ultrices id metus. Proin iaculis, ligula egestas pellentesque accumsan, erat est suscipit metus, non facilisis risus risus eget arcu. Pellentesque volutpat elementum hendrerit. Nam vestibulum enim a est suscipit, ac pretium est consequat. Mauris et elementum lectus. Cras tempor tortor et fringilla condimentum. Duis non lectus sed dolor placerat tempor.
<p>
Duis elementum congue nisl, eu ultricies enim porta vel. Nunc eu risus rhoncus, interdum diam vel, suscipit nulla. Morbi sit amet feugiat lectus. Nullam gravida sem a mauris varius, non placerat orci cursus. Integer laoreet augue aliquet, rhoncus est sed, porttitor justo. Nullam vel tortor et erat porttitor porta in eget lectus. Donec et massa bibendum, maximus felis tempor, interdum magna.
<p>
Quisque commodo consectetur quam sed finibus. Nulla et enim tristique, pretium massa in, rhoncus augue. Etiam vitae dapibus dui. Nunc ligula velit, convallis quis porta et, sollicitudin sed libero. Nam suscipit nec risus molestie pretium. Nunc fermentum fringilla ipsum non dapibus. Nam pellentesque pretium orci. Curabitur rhoncus ligula vel consequat suscipit. Cras vitae sodales neque, non volutpat ante. Cras mauris tortor, volutpat quis ligula sed, condimentum sagittis orci. Mauris interdum imperdiet scelerisque.
<p>
Pellentesque non ante a arcu fermentum molestie et ac dolor. Aliquam suscipit magna eget quam sollicitudin porttitor. Sed nec nisl risus. Nullam euismod dolor orci, at auctor felis vehicula ac. Integer vitae laoreet odio. Nam convallis nibh urna, sed tristique nisl ullamcorper a. Nunc varius, sapien ac commodo pharetra, dui tortor ultrices mauris, id dictum quam risus sed nibh. Suspendisse potenti. Etiam efficitur viverra turpis, eget vulputate odio interdum sit amet. Suspendisse potenti.
<p>
Vivamus interdum arcu condimentum, congue tortor et, interdum orci. Aenean imperdiet elit et enim laoreet pretium sit amet id est. In sed diam facilisis, tincidunt justo in, ornare elit. Proin finibus feugiat tellus vitae lacinia. Ut vestibulum lorem mauris, at imperdiet urna congue ultrices. Sed tempus nulla quis erat interdum, et tempus ligula volutpat. Donec viverra enim eu neque accumsan, id ultricies felis dictum. Sed auctor aliquet placerat. Nunc vel dolor lectus. Aliquam pulvinar blandit ligula, non scelerisque leo rhoncus vitae. Donec gravida tortor eget lectus venenatis, id dignissim neque imperdiet.
<p>
Nullam quis diam nec metus bibendum mattis. Curabitur id convallis enim. Sed sit amet viverra leo. Fusce posuere sem quis purus porta porta. Proin tempor tortor eget nisl faucibus fermentum. Aliquam vitae leo rutrum, commodo eros eget, malesuada urna. Nunc vitae aliquet tortor. Etiam tortor dui, auctor eu rutrum sit amet, sollicitudin dignissim eros. Sed hendrerit iaculis diam quis hendrerit. Aliquam id purus sed massa feugiat bibendum. Donec rhoncus ligula eu magna porta mollis. Praesent rhoncus eleifend ipsum non dictum. Morbi tristique non turpis nec scelerisque. Nunc aliquam felis sit amet aliquet sollicitudin. Sed posuere aliquam erat id faucibus.
<p>
Pellentesque non ante a arcu fermentum molestie et ac dolor. Aliquam suscipit magna eget quam sollicitudin porttitor. Sed nec nisl risus. Nullam euismod dolor orci, at auctor felis vehicula ac. Integer vitae laoreet odio. Nam convallis nibh urna, sed tristique nisl ullamcorper a. Nunc varius, sapien ac commodo pharetra, dui tortor ultrices mauris, id dictum quam risus sed nibh. Suspendisse potenti. Etiam efficitur viverra turpis, eget vulputate odio interdum sit amet. Suspendisse potenti.
<p>
Vivamus interdum arcu condimentum, congue tortor et, interdum orci. Aenean imperdiet elit et enim laoreet pretium sit amet id est. In sed diam facilisis, tincidunt justo in, ornare elit. Proin finibus feugiat tellus vitae lacinia. Ut vestibulum lorem mauris, at imperdiet urna congue ultrices. Sed tempus nulla quis erat interdum, et tempus ligula volutpat. Donec viverra enim eu neque accumsan, id ultricies felis dictum. Sed auctor aliquet placerat. Nunc vel dolor lectus. Aliquam pulvinar blandit ligula, non scelerisque leo rhoncus vitae. Donec gravida tortor eget lectus venenatis, id dignissim neque imperdiet.
<p>
Nullam quis diam nec metus bibendum mattis. Curabitur id convallis enim. Sed sit amet viverra leo. Fusce posuere sem quis purus porta porta. Proin tempor tortor eget nisl faucibus fermentum. Aliquam vitae leo rutrum, commodo eros eget, malesuada urna. Nunc vitae aliquet tortor. Etiam tortor dui, auctor eu rutrum sit amet, sollicitudin dignissim eros. Sed hendrerit iaculis diam quis hendrerit. Aliquam id purus sed massa feugiat bibendum. Donec rhoncus ligula eu magna porta mollis. Praesent rhoncus eleifend ipsum non dictum. Morbi tristique non turpis nec scelerisque. Nunc aliquam felis sit amet aliquet sollicitudin. Sed posuere aliquam erat id faucibus.
<p>
</div>
<!-- #######################################
/* Button to trigger the menu -->
<div id="menuButtonInnerCircle" onclick="toggle('menu')">
</div>
</body>
</html>