Menüs werden nicht vollständig auf meiner Website angezeigt.

-1

Ich musste eine Website für mein Schulprojekt erstellen, und ich tat, aber es gibt ein Problem. Meine Navigationsleiste hat Menüs, die nach dem Klicken auf den Link herunterfallen, und hat auch so, dass die Leiste, wenn sie die Oberseite berührt, klebrig wird. Wenn ich jedoch nach unten scrolle, ist das Menü kurz und kaum zu sehen. Es kann in diesem https://gyazo.com/4549278923f72e383f8fbbda0ddb0a2d gesehen werden.Menüs werden nicht vollständig auf meiner Website angezeigt.

#navbar { 
padding-bottom: 0px; 
padding-top: 0px; 
overflow:hidden; 
width:1080px; 
background-color:rgb(235,0,0); 
font-family: "montserrat"; 
padding-left: 470px; 
height: 70px; 
margin-left: -8px; 
} 
.text{ 
    color:white; 
    padding-left:50px; 
    float:left 
} 
.mySlides {display:none;} 
.middle{ 
    margin: -10; 
    padding-top: 0.5%; 
} 
.menu { 
    float: left; 
    overflow: visible; 
    padding-top: 25px; 
    font-family: montserrat; 
    font-size: 16px; 
} 
.menu2 .button { 
    cursor: pointer; 
    padding-left: 60px; 
    font-size: 16px; 
    font-family: montserrat; 
    border: none; 
    outline: none; 
    color: white; 
    background-color: inherit; 
} 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow:rgb(100,0,0); 
    z-index: 1; 
} 
.dropdown-content a { 
    float: none; 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
    overflow: visible; 
} 
.show { 
    display: block; 
    overflow: visible; 
} 
.sticky{ 
    top:0; 
    position: fixed; 
    padding-top:60px; 
    width: 100%; 
} 
</style> 
</head> 
<body onscroll="stickyBar()"> 
<div id="homejump"> 
<img src="Logomakr_9xaA4u.png" alt="Logo" style="width:28%; height:25%; padding-left:35%; padding-right:35%; overflow: hidden;"> 
</div> 
<div id="navbar"><div class="menu"> 
<a href="#homejump" style="color: white;text-decoration: none;">Home</a></div> 
<div class="menu"><div class="menu2"> 
<button class="button" onclick="mental()">Mental Health 
    </button> 
     <div class="dropdown-content" id="myDropdown"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a></div></div></div> 
     <div class="menu"><div class="menu2"> 
    <button class="button" onclick="physical()">Physical Health 
    </button> 
     <div class="dropdown-content" id="myDropdown1"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a></div></div></div> 
     <div class="menu"><div class="menu2"> 
    <button class="button" onclick="rehab()">Rehab 
    </button> 
     <div class="dropdown-content" id="myDropdown2"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a></div></div></div> 
</div> 
<script> 
var myIndex = 0; 
carousel(); 
function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    myIndex++; 
    if (myIndex > x.length) {myIndex = 1}  
    x[myIndex-1].style.display = "block"; 
    setTimeout(carousel, 7000); 
} 
function mental() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 
function physical() { 
document.getElementById("myDropdown1").classList.toggle("show"); 
} 
function rehab() { 
document.getElementById("myDropdown2").classList.toggle("show"); 
} 
var navbar = document.getElementById("navbar"); 
var sticky = navbar.offsetTop; 
function stickyBar() { 
    if (window.pageYOffset >= sticky) 
    {navbar.classList.add("sticky");} 
    else {navbar.classList.remove("sticky");} 
} 
</script>

Dies ist der gesamte Code für das Menü sowie die Leiste klebrig zu machen. Wie behebe ich dieses Problem?

Quelle

2017-11-21 Jugtej Singh

Ihre #navbar ist 70px Höhe und hat overflow: hidden Wert, das ist, warum Sie nicht sehen, mehr

Quelle

2017-11-21 18:49:47 Trueman

wie für die "Sticky" nav Verwendung position: fixed für die #navbar – Trueman

danken Ihnen. Ich wusste, dass es etwas Kleines war, aber ich bin einfach zu nooby, um es herauszufinden. –

Kein Problem, gern geschehen :) Wenn ich geholfen habe, bitte diese Antwort als richtig markieren – Trueman

Es ist die Art und Weise Sie Ihre Variablen zu verwalten. Im Funktionsaufruf stickyBar ist die Variable navbar nicht bekannt (nicht im Funktionsumfang). Sie müssen es in der Funktion bekommen oder eine parametrierte Funktion verwenden.

Beispiel der Lösung:

function stickyBar() { 

var navbar = document.getElementById("navbar"); 

if (window.pageYOffset >= sticky) 
{navbar.classList.add("sticky");} 
else {navbar.classList.remove("sticky");} 
}

Quelle

2017-11-21 19:08:20 Ralaivao

Menüs werden nicht vollständig auf meiner Website angezeigt.

Antwort

Verwandte Themen