Bonjour à tous,
je suis en train de créer un petit site web tout simple et j'ai un problème avec mon menu déroulant qui est censé pouvoir faire défiler des lettres mais quand on scrolle tout le bloc descend avec (désolé si c'est mal expliqué je vous met le lien du site pour que vous puissiez visualiser :) )
Voici le lien du site: https://projet-nsi.go.yj.fr/page%202.html
Ainsi que le code HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
<title>iMusic</title>
</head>
<body>
<header>
<img src="logo.png" height="160px">
</header>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<nav>
<ul>
<li class="deroulant"><a href="#">Liste Alphabétique </a>
<ul class="sous">
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
<li><a href="D.html">D</a></li>
<li><a href="E.html">E</a></li>
<li><a href="F.html">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
<li><a href="#">R</a></li>
<li><a href="#">S</a></li>
<li><a href="#">T</a></li>
<li><a href="#">U</a></li>
<li><a href="#">V</a></li>
<li><a href="#">W</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Y</a></li>
<li><a href="#">Z</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="main">
<span style="color: rgb(25, 20, 20);font-size:30px;cursor:pointer" onclick="openNav()">☰ Menu</span>
</div>
<script>
function openNav(){
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav(){
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
Et le code CSS:
html{
background-color: #B4F8FA;
font-family: Verdana,Arial;
}
body{
margin: 0;
padding: 0;
}
.bouton{
color: #B4F8FA;
font-size: 17px;
cursor: pointer;
margin: 250px;
padding: 5px;
background-color: rgb(25, 20, 20);
border-radius: 10px;
width: 200px;
margin-top: center;
display: block;
margin-left: auto;
margin-right: auto;
border: 10px rgb(25, 20, 20) outset;
box-shadow: 6px 6px 6px #65B1B3;
-webkit-user-select: none;
user-select: none;
-moz-user-select: none;
font-family: Arial Black;
border-bottom: 5px;
}
.bouton:hover {
color:#65B1B3;
box-shadow: none;
}
header{
background-color: rgb(25, 20, 20);
height: 40px;
width: 100%;
margin: 0;
padding: 10px;
color: rgb(30, 215, 96);
text-align: center;
vertical-align: middle;
font-size: 25px;
display: table;
font-family: Arial Black;
}
.sidenav{
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(25, 20, 20);
overflow-x: hidden;
padding-top: 20px;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color:rgb(25,20,20); /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #B4F8FA;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
*{
margin: 0px;
padding: 0px;
font-family: Avenir, sans-serif;
}
nav{
width: 100%;
margin: 0 auto;
background-color:rgb(25,20,20);
position: sticky;
top: 0px;
}
nav ul{
list-style-type: none;
}
nav ul li{
float: left;
width: 25%;
text-align: center;
position: relative;
}
nav ul::after{
content: "";
display: table;
clear: both;
}
nav a{
display: block;
text-decoration: none;
color: black;
border-bottom: 2px solid transparent;
padding: 10px 0px;
}
nav a:hover{
color: #B4F8FA;
border-bottom: 2px solid #B4F8FA;
}
.sous{
display: none;
box-shadow: 0px 1px 2px #CCC;
background-color: rgb(25,20,20);
position: absolute;
width: 100%;
z-index: 1000;
}
nav > ul li:hover .sous{
display: block;
}
.sous li{
float: none;
width: 100%;
text-align: left;
}
.sous a{
padding: 10px;
border-bottom: none;
}
.sous a:hover{
border-bottom: none;
background-color: RGBa(200,200,200,0.1);
}
.deroulant > a::after{
font-size: 15px;
bottom: 30px;
}
.conteneur{
margin: 50px 20px;
height: 1500px;
}
Merci beaucoup d'avance pour votre aide ! :)
Afficher la suite
