0
"오픈 버튼"위로 마우스를 가져갈 때 슬라이드되는 메뉴와 관련된 문제가 모든 것을 푸시합니다. 그것은 이미지를 열려고하는 것이고, 나는 이것을하는 방법을 이해할 수 없습니다. 나는 과거에 수레 (float)와 위치 태그 (tag)를 변경하는 등의 작업을 시도했지만 아무 것도 효과가없는 것으로 보인다. 도움을슬라이드 인 메뉴가 다른 요소를 밀어 내고 있습니다.
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#Bar {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 64px;
background-color: #592881
}
#logo {
position: relative;
top: -40px;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 100px;
left: 0;
background: rgba(89, 40, 129, .7);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align: center;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
position: static;
}
.sidenav a:hover {
color: grey;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
animation-name: fade;
animation-duration: 3s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.container {
position: relative;
text-align: center;
}
.slides {
position: relative;
height: 100%;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: block;
left: 0;
right: 0;
max-width: 100%;
max-height: auto;
vertical-align: middle;
position: relative;
margin-left: auto;
margin-right: auto;
}
.prev,
.next {
cursor: pointer;
position: relative;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
float: right;
top: -500px;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0px;
top: -500px;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.footer {
position: relative;
background-color: #F1F1F1;
color: #A8A8A8;
font-size: 18px;
padding-left: 400px;
}
.overlay {
float: left;
height: 70%;
width: 0;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
overflow-x: hidden;
transition: .5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
padding-bottom: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 300px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.buttonContainer {
height: 3em;
width: 100%;
background-color: #ffffff;
}<!DOCTYPE html>
<html>
<head>
<title>Masters of Engineering</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Zach\Desktop\Coding\Robotics Site\css\Main.css">
<link rel="icon" href="img/Corner Logo.ico">
<meta charset="utf-8">
</head>
<body>
<div id="Bar"></div>
<div id="logo">
<img src="https://www.mastersny.org/uploaded/template/default/images/common/logo.png">
</div>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<div class="buttonContainer">
<span style="margin-left:10%;font-size:30px;cursor:pointer; display: inline-block;" onmouseenter="openNav()" onmouseleave="closeNav()">☰open</span>
<span style="margin-left:10%;font-size:30px;cursor:pointer; position:relative; display:inline-block;" onmouseover="openNav();" onmouseout="closeNav();">☰open</span>
</div>
<div id="myNav" class="overlay" onmouseleave="closeNav()" onmouseenter="openNav()">
<div class="overlay-content">
<a href="#">about</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div id="myNav" class="overlay" onmouseleave="closeNav()" onmouseenter="openNav()">
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div class='slideshow'>
<div class="slides">
<img class="mySlides fade" src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" height="auto" width="auto">
<img class="mySlides fade" src="https://avante.biz/wp-content/uploads/Wallpaper-Images/Wallpaper-Images-005.jpg" height=auto width=auto>
<img class="mySlides fade" src='https://svs.gsfc.nasa.gov/vis/a010000/a012000/a012005/Swift_Tidal_Disruption_2_Still.jpg' height="auto" width="auto">
</div>
<div class='buttons'>
<a class="prev" onclick="plusDivs(-1);
clearInterval(myTimer);
myTimer = setInterval(carousel, 3500);">❮
</a>
<a class="next" onclick="plusDivs(1);
clearInterval(myTimer);
myTimer = setInterval(carousel, 3500);">❯
</a>
</div>
</div>
<script>
var myIndex = 0;
var myTimer = setInterval(carousel, 3500);
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 ";
}
myTimer; //change image every 3.5 seconds
</script>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block ";
}
</script>
</div>
<div class='footer'>
<img src='http://www.mastersny.org/uploaded/template/default/images/common/bottom-logo.png'>
<p>49 Clinton Avenue</p>
<p>Dobbs Ferry, NY 10522</p>
<p>(914) 479-6400</p>
</div>
</body>감사 : 여기 내 코드입니다!