function myFunction(el) { if(document.getElementById(el)) document.getElementById(el).classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } function menu_click(el) { var els = document.querySelectorAll('.href_'); for (var i = 0; i < els.length; i++) els[i].classList.remove('active'); var height_navbar= document.getElementById('navbar').offsetHeight; var height_header= document.getElementById('header').offsetHeight; var height_footer= document.getElementById('footer').offsetHeight; document.getElementById(el).classList.add('active'); iframe = document.getElementById('frame2'); iframe.style.height = parseInt(window.innerHeight-height_navbar-height_header-height_footer+1) + "px"; iframe.style.width = parseInt(100) + "%"; iframe.style.top= parseInt(0) + "%"; iframe.style.left= parseInt(0) + "%"; if(el=='h1') iframe.setAttribute("src","home.html?v3=6"); if(el=='h2') iframe.setAttribute("src","https://www.iatmo.com/index__new.php"); if(el=='h3') iframe.setAttribute("src","https://colormath.club/index_new_word.php"); if(el=='h4') iframe.setAttribute("src","https://blueatmo.com/index.php"); if(el=='h5') iframe.setAttribute("src","https://fremdsprachen.app/spell.php"); if(el=='h6') iframe.setAttribute("src","https://colormath.club/index_new.php"); if(el=='h7') iframe.setAttribute("src","h7.html"); if(el=='h8') iframe.setAttribute("src","https://fremdsprachen.app/catchwords_story.php"); } * { box-sizing: border-box; } /* Style the body */ body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif; margin: 0; } /* Header/logo Title */ .header { padding: 0px; text-align: center; /*background: #5ba0d0;*/ background-color: #4f85bb; // Old browsers @include filter-gradient(#4f85bb, #4f85bb, vertical); // IE6-9 @include background-image(linear-gradient(top, #4f85bb 0%,#4f85bb 100%)); color:white; } /* Increase the font size of the heading */ .header h1 { font-size: 40px; margin-block-start: 0; margin-block-end: 0; color:#C3DFE8; } /* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */ .navbar { overflow: hidden; background-color: #606c88; // Old browsers @include filter-gradient(#606c88, #3f4c6b, vertical); // IE6-9 @include background-image(linear-gradient(top, #606c88 0%,#3f4c6b 100%)); position: sticky; position: -webkit-sticky; top: 0; } /* Style the navigation bar links */ .navbar a { float: left; display: block; color:#C3DFE8; text-align: center; padding: 14px 20px; text-decoration: none; } /* Right-aligned link */ .navbar a.right { float: right; } /* Change color on hover */ .navbar a:hover { background-color: #C3DFE8; color: black; } /* Active/current link */ .navbar a.active { background-color: #356aa0; // Old browsers @include filter-gradient(#356aa0, #356aa0, vertical); // IE6-9 @include background-image(linear-gradient(top, #356aa0 0%,#356aa0 100%)); color: white; } /* Column container */ .row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; } /* Footer */ .footer { padding: 0px; text-align: center; background-color: #606c88; // Old browsers @include filter-gradient(#606c88, #3f4c6b, vertical); // IE6-9 @include background-image(linear-gradient(top, #606c88 0%,#3f4c6b 100%)); color:#C3DFE8; } /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 700px) { .row { flex-direction: column; } } /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } } .dropbtn { padding: 0px; text-align:center; font-size: 24px; min-width: 30px; border: none; cursor: pointer; text-decoration: none; border: 0px solid black; } .dropbtn:hover, .dropbtn:focus { background-color: #FFEEFF; } .dropdown { position: relative; display: inline-block; } .dropdown-content { color:black; display: none; position: absolute; text-align:center; font-size: 24px; min-width: 30px; text-decoration: none; overflow: auto; z-index:1000; } .dropdown-content a { color: black; padding: 0px 0px; text-decoration: none; display: block; } .dropdown a:hover {border: 2px dashed yellow!important} .show {display:block;}