Mon, 2021-01-18 13:43
I have a html file containing a vertical sidebar with a css file customizing it. The bar has many items and when viewing in a small screen, let's say a 15-inche screen with resolution 1366 x 768, then the latest items are not visible. I want to be able to scroll the sidebar along with the html page loaded as content. Any help would be appreciated.
The html code:
<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="style/style.css"> <style> body{ overflow: hidden; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; bottom: 0px; left:7%; text-align:center; color:#034; position: absolute; } </style> <title>my title</title> </head> <body onload="start()" onhashchange="start()"> <div style="display: flex; min-height:100%;"> <div class="navigation"> <img style="display:block; margin:auto;" src="images/Logo.jpg"> <ul> <li> <a id="#English" href="indexEn.html"><img src="images/eng-flag.png" height="13" width="30"> English Page</a></li> <li> <a id="#home" href="#home" >Αρχική</a></li> <li> <a id="#id" href="#id">item 1 - this is item 1 and not item 0</a></li> <li> <a id="#form" href="#form">item 2 - this is item 2 and not item 1</a></li> <li class="has-sub"> <a href="#">item 3 - this is item 3 with subitems</a> <ul> <li class="has-sub"><a href="JavaScript:void(0);">Έτη 2011-2021</a><ul> <li><a id="#2021" href="#2021" >2021</a></li> <li><a id="#2019" href="#2019" >2019</a></li> <li><a id="#2018" href="#2018">2018</a></li> <li><a id="#2016" href="#2016">2016</a></li> <li><a id="#2015" href="#2015">2015</a></li> <li><a id="#2014" href="#2014">2014</a></li> <li><a id="#2013" href="#2013">2013</a></li> <li><a id="#2012" href="#2012">2012</a></li> <li><a id="#2011" href="#2011">2011</a></li> </ul></li> <li class="has-sub"><a href="JavaScript:void(0);">Έτη 2000-2010</a> <ul> <li><a id="#2008" href="#2008">2008</a></li> <li><a id="#2006" href="#2006">2006</a></li> <li><a id="#2005" href="#2005">2005</a></li> <li><a id="#2004" href="#2004">2004</a></li> </ul> </li> <li><a id="#partA" href="#partA">part A - this is part A</a></li> <li><a id="#partB" href="#partB">part B - this is partB</a></li> </ul> </li> <li><a id="#publications" href="#publications">item 4 - this is item 4 and not item 3</a></li> <li><a id="#european" href="#european">item 5 - this is item 5 and not item 4</a></li> <li><a id="#reporters" href="#reporters">item 6 - this is item 6 and not item 5</a></li> <li><a id="#contact" href="#contact">item 7 - this is item 7 and not item 6</a></li> <li><a id="#contact" href="#contact2">item 8 - this is item 8 and not item 7</a></li> </ul> <p class="unselectable">Υπευθυνος Κατασκευής:<br>somebody</p> </div> <iframe id="myIframe" src="" style="width:100%;" frameborder="0"></iframe> </div> <script> function loadurl(url){ document.getElementById('myIframe').src = url; } // the following function is not used. keep it just in case. function loadurl22(url) { //<div class="content" id="mydata"> //onload="start()" onhashchange="start()" var xhttp; if (window.XMLHttpRequest) { // code for modern browsers xhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("mydata").innerHTML = this.responseText; } }; xhttp.open("GET", url, true); xhttp.send(); window.scrollTo(0,0); } function start(){ var identifier = window.location.hash; //gets everything after the hashtag i.e. #home if (identifier !="") { var x = document.getElementById(identifier).tagName; if (x != ""){//element exists window.history.pushState({url: "" + identifier + ""}, "test 123", identifier); if (identifier === "#partA"){ loadurl('./partA/partA.htm'); }else if (identifier === "#partB"){ loadurl('./partB/partB.htm'); }else{ //check if file exists var xhr = new XMLHttpRequest(); xhr.open('HEAD', identifier.substr(1) + ".html", false); xhr.send(); if (xhr.status == "404") {//not here loadurl('home.html'); }else{ identifier = identifier.substr(1) + ".html"; loadurl(identifier); } } }else{ loadurl('home.html'); } }else{ loadurl('home.html'); } } </script> </body></html>
The css code:
html, body { height: 100%; margin: 0; } .content { display:inline-block; height: 99%; flex: 1; } .navigation { padding: 0; margin: 0; margin-right: 1px; line-height: 1; width: 13em; min-height: 99.9%; position: relative; background: #ffca0a; font-family: 'roboto', Tahoma, Arial, sans-serif; zoom: 1; } .navigation ul, .navigation ul li, .navigation ul ul { list-style: none; margin: 0; padding: 0; } .navigation ul { position: relative; z-index: 500; float: left; } .navigation ul li { float: left; min-height: 0.05em; line-height: 1.1em; vertical-align: middle; position: relative; } .navigation ul li.hover, .navigation ul li:hover { position: relative; z-index: 510; cursor: default; } .navigation ul ul { visibility: hidden; position: absolute; top: 100%; left: 0px; z-index: 520; width: 100%; } .navigation ul ul li { float: none; } .navigation ul ul ul li { float: none; height: 40px; } .navigation ul ul ul { width: 50%; top: 0; right: 0; } .navigation ul li:hover > ul { visibility: visible; } .navigation ul ul { top: 0; left: 99%; } .navigation ul li { float: none; } .navigation ul ul { margin-top: 0.05em; background: #ffca0a;} .navigation:before { content: ''; display: block; } .navigation:after { content: ''; display: table; clear: both; } .navigation a { display: block; padding: 1em 1.0em; color: #019; text-decoration: none; } .navigation ul ul ul a { line-height: 0.5em; } .navigation > ul { width: 13em; } .navigation ul ul { width: 13em; } .navigation > ul > li > a { color: #034; } .navigation > ul > li > a:hover { color: #ffffff;} .navigation ul > ul > li a:hover { background: #ff9a0a;} .navigation ul li a:hover, .navigation ul li:hover { background: #ff9a0a;} .navigation ul li:hover { background: #ff9a0a;} .navigation li { position: relative; border-bottom: 1px solid #555555;} .navigation ul li.has-sub > a:after { content: '»'; position: absolute; right: 1em; } .navigation ul ul li.first { -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .navigation ul ul li.last { -webkit-border-radius: 0 0 3px 0; -moz-border-radius: 0 0 3px 0; border-radius: 0 0 3px 0; border-bottom: 0; } .navigation ul ul { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; width: 80%; } .navigation ul ul { border: 1px solid #555555;} .navigation ul ul a { color: #034; width: auto;} .navigation ul ul a:hover { color: #ffffff; } .navigation ul ul li { border-bottom: 1px solid #555555; } .navigation ul ul li:hover > a { background: #ff9a0a; color: #ffffff; /*line-height: 1.1em;*/ } /*high lighted test last submenu */ .navigation ul ul ul li:hover > a { background: #ff9a0a; color: #ffffff; line-height: 0.5em; } .navigation.align-right > ul > li > a { border-left: 0.3em solid #555555; border-right: none; } .navigation.align-right { float: right; } .navigation.align-right li { text-align: right; } .navigation.align-right ul li.has-sub > a:before { content: '+'; position: absolute; top: 50%; left: 15px; margin-top: -6px; } .navigation.align-right ul li.has-sub > a:after { content: none; } .navigation.align-right ul ul { visibility: hidden; position: absolute; top: 0; left: -100%; z-index: 598; width: 100%; } .navigation.align-right ul ul li.first { -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; } .navigation.align-right ul ul li.last { -webkit-border-radius: 0 0 0 3px; -moz-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; } .navigation.align-right ul ul { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; }
