我有一个html文件，其中包含一个垂直侧边栏和一个自定义的css文件。该栏有很多项目，当在小屏幕上查看时，比如说一个分辨率为1366 x 768的15英寸屏幕，那么最新的项目就不可见了。我希望能够滚动侧边栏和加载为内容的html页面。如有任何帮助，我们将不胜感激。
css和html代码：
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;
}<!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" >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);">years 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);">years 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>您需要在导航类中添加溢出：auto，并将高度设置为100vh
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;
max-height: 100vh;
overflow:auto;
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;
}<!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" >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);">years 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);">years 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>我在您的代码中做了很多更改。从我的第一个答案开始，wich就是删除隐藏在你身上的溢出。页脚被设置为绝对，我也删除了它，并从html中删除了一些样式，并将它们放入样式表中。。
这就是你想要的结果吗？
html, body {
margin: 0;
}
.content {
display:inline-block;
height: 99%;
flex: 1;
}
.navigation {
padding: 0;
margin: 0;
margin-right: 1px;
line-height: 1;
width: 13em;
height: 100%;
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;
}
.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;
}<head>
<title>my title</title>
</head>
<body onload="start()" onhashchange="start()">
<div style="display: flex;">
<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" >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);">years 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);">years 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>