Προς το περιεχόμενο

Πρόβλημα με την πλήρη εμφάνιση κάθετου μενού

doctorized

Από τον doctorized
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

doctorized Mentor

doctorized

Δημοσ.
Δημοσ.

Καλημέρα σε όλους.

Έχω ένα html κώδικα που μορφοποιείται με css. Όταν τα items του μενού ήταν λίγα δεν υπήρχε πρόβλημα με την εμφάνιση. Τώρα που αυξήθηκαν Δεν μπορώ να τα εμφανίσω όλα. Πάντα κάτι λείπει, κάτι δεν φαίνεται. Σε μεγάλες οθόνες, πχ στην 27άρα που έχω σπίτι δεν έχω πρόβλημα αλλά στο λάπτοπ της δουλειάς με την ανάλυση 1366 x 768 τα κάτω-κάτω στοιχεία του μενού δεν εμφανίζονται. Θέλω με το σκρολάρισμα της σελίδας που φορτώνεται στα δεξιά του μενού, να σκρολάρει και το ίδιο το μενού ώστε να φαίνεται όλο. Το καλύτερο θα ήταν να σκρολάρει το μενού ώστε να φανεί όλο και μετά να σταματάει άσχετα με το ύψος της σελίδας που έχει φορτωθεί. Μπορεί κάποιος να βοηθήσει;

Ο html κώδικας: 

<!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>mytitle</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>

Το css: 

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

 

doctorized Mentor

doctorized

Δημοσ.
  • Μέλος
Δημοσ.
1 ώρα πριν, k33theod είπε

Αν αφαιρέσεις το overflow hidden στο html το μενού φαίνεται

Αν το αφαιρέσω τότε έχω 2 κάθετες μπάρες δεξιά και η φράση "Υπεύθυνος κατασκευής" πέφτει πάνω στο τελευταίο στοιχείο του μενού, όπως στην εικόνα.

menu.png

k33theod Experienced

k33theod

Δημοσ.
Δημοσ. (επεξεργασμένο)

Πρέπει να το φτιάξεις αυτό.

Η άλλη λύση είναι να δώσεις στο menu καθορισμένο height και να ορίσεις σε αυτό overflow scroll ή auto

 

Επεξ/σία από k33theod

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...