No replies
DoctorWho
DoctorWho's picture
Offline
newbie
Last seen: 28 weeks 2 hours ago
Timezone: GMT+2
Joined: 2021-01-18
Posts: 1
Points: 2

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;
}