Drop down menu doing some werid things with the css
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
So I’ve been tired to code my own website with js included the 3 goals:
Responsive menubar AKA Dropdown.
Scroll Function and animation
But then I combine my code as the dropdown menu and scroll function, it does some weird things with the menubar. (hard to explain try it yourself)
I have been back and forth and can’t find a solution, anybody able to identify the problem.
Code is linked of course
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Kronvold Protfolio</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<div class=”topnav_background”>
<!– <header class=”header” id=”header”> –>
<div class=”topnav” id=”topnav_id”>
<div class=”flex”>
<a href=”index.html” class=”active”><img class=”logo” src=”img/Artboard 1.png” alt=”Website_Logo”></a>
<a href=”#news”>Skills</a>
<a href=”#contact”>About</a>
<a href=”#about”>Contact</a>
<div class=”dropdown”>
<button class=”dropbtn”>Protfolio
<i class=”fa fa-caret-down dropdown_icon”></i>
</button>
<div class=”dropdown-content”>
<a href=”#”>Design</a>
<a href=”#”>School</a>
<a href=”#”>Public</a>
<a href=”#”>Social Media</a>
</div>
<a href=”javascript:void(0);” style=”font-size:4.2rem;” class=”icon” onclick=”myFunction()”>☰</a>
</div>
</div>
</div>
<!– </header> –>
<!– main starts here –>
<main class=”main_wrapper”>
<section>
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</section>
</main>
</body>
<script src=”scripts/responsive.js”></script>
<script src=”scripts/scroll.js”></script>
</html>
*{
font-size: 10px;
/* font-family: ; wating on design choice*/
box-sizing: border-box;
}
body {
margin:0;
padding:0;
}
/* Lineheight can be changed in:
– h1 for design
– p for carmming
Font-size can be tweaked to likeing
*/
h1{font-size: 5.2rem;}
h2{font-size: 3.2rem;}
h3{font-size: 2.2rem;}
/* NEWS TO ME – clamp can be used as a media query to avoud thousands of small sections */
p{font-size: 1.8rem;
/* line-height: clamp(2.4rem, 50%, 1rem); */
}
.flex{
display: flex;
align-items: center;
}
#topnav_id{
top: -120px;
transition: top 0.3s;
}
/* menubar responsvie */
.logo{
width: 80px;
}
.topnav {
position: fixed;
display: block;
width: 100%;
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Mobile */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* Laptop */
@media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
/* testing */
section{
padding: 2rem;
padding-top: 125px;
height: 500vh;
}
.topnav_background{
background-color: rgb(255, 0, 0);
height: 120vh;
}
function myFunction() {
var x = document.getElementById(“topnav_id”);
if (x.className === “topnav”) {
x.className += ” responsive”;
} else {
x.className = “topnav”;
}
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > window.innerHeight || document.documentElement.scrollTop > window.innerHeight) {
document.getElementById(“topnav_id”).style.top = “0”;
} else {
document.getElementById(“topnav_id”).style.top = “-120px”;
}
}
أضف إجابة