Bonjour,
J'aimerais faire en sorte que mon menu se mettent en colonne et non en ligne pour un projet scolaire:
HTML:
<!Doctype html>
<html lang="fr" xmlns:background-color="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
<div class="conteneurlogo">
<div class="logo"><a href="https://developer.marvel.com/"><img src="images/marvel_logo.png" alt="Logo_Marvel"> </a></div>
</div>
<header id="haut">
<nav>
<ul id="menu">
<li><a href="#home">Accueil</a></li>
<li><a href="Univers.html">Univers</a></li>
<li><a href="Adaptations_cinematographique.html">Adaptation cinématographique</a></li>
<li><a href="A_propos.html">À propos</a></li>
</ul>
<div id="burger">
<span>☰</span>
<div id="videburger"></div>
<div id="navbar"></div>
</div>
</nav>
</header>
CSS
#burger {
position: absolute;
top: 10px;
right: 8px;
width: 40px;
font-size: 30px;
line-height: 40px;
color: lightgray;
border: 1px solid lightgrey;
border-radius: 5px;
text-align: center;
cursor: pointer;
display: none;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
display: inline-block;
padding-left: 35px;
}
nav {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 15;
text-align: center;
background-image: linear-gradient(to right, #fe0000, #c20023, #820326, #420f1d, #000000);
border-style: solid;
}
#menu {
display: flex;
justify-content: center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li a {
display: inline-block;
padding-left: 35px;
margin: 5px;
color: white;
text-align: center;
text-decoration: white;
font-size: 40px;
}
#burger {
position: absolute;
top: 10px;
right: 8px;
width: 40px;
font-size: 30px;
line-height: 40px;
color: lightgray;
border: 1px solid lightgrey;
border-radius: 5px;
text-align: center;
cursor: pointer;
display: none;
}
@media screen and (max-width: 1230px) {
nav ul li a {
font-size: 20px;
}
}
@media screen and (max-width: 780px) {
#burger {
display: block;
}
nav {
width: 100%;
height: 150px;
white-space : nowrap;
}
nav ul {
display: inline-block;
position: relative;
top: 1px;
left: 0;
width: 100%;
}
nav ul li {
height: 40px;
padding: 10px 0 0 0;
}
a {
}
}
JQUERY
$(document).ready(function () {
$('#burger').on('click', function () {
$('#menu').stop().slideToggle('slow');
$('#navbar').stop().slideToggle('slow');
$('#navbar').css({
width: '100%',
height: '60px',
color: 'red',
}
);
});
$(window).resize(function () {
if ($(window).width() > 780) {
$('#menu').css('display', 'inline-block');
} else {
$('#menu').css('display', 'none');
}
})
})
J'aimerais que lorsque je clique sur le menu burger, la navbar descende jusqu'à sa taille maximale et m'affiche mes liens en colonne, mais je ne trouve pas la solution.
Pourrait-on m'aider s'il vous plait?
J'aimerais faire en sorte que mon menu se mettent en colonne et non en ligne pour un projet scolaire:
HTML:
<!Doctype html>
<html lang="fr" xmlns:background-color="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
<div class="conteneurlogo">
<div class="logo"><a href="https://developer.marvel.com/"><img src="images/marvel_logo.png" alt="Logo_Marvel"> </a></div>
</div>
<header id="haut">
<nav>
<ul id="menu">
<li><a href="#home">Accueil</a></li>
<li><a href="Univers.html">Univers</a></li>
<li><a href="Adaptations_cinematographique.html">Adaptation cinématographique</a></li>
<li><a href="A_propos.html">À propos</a></li>
</ul>
<div id="burger">
<span>☰</span>
<div id="videburger"></div>
<div id="navbar"></div>
</div>
</nav>
</header>
CSS
#burger {
position: absolute;
top: 10px;
right: 8px;
width: 40px;
font-size: 30px;
line-height: 40px;
color: lightgray;
border: 1px solid lightgrey;
border-radius: 5px;
text-align: center;
cursor: pointer;
display: none;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
display: inline-block;
padding-left: 35px;
}
nav {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 15;
text-align: center;
background-image: linear-gradient(to right, #fe0000, #c20023, #820326, #420f1d, #000000);
border-style: solid;
}
#menu {
display: flex;
justify-content: center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li a {
display: inline-block;
padding-left: 35px;
margin: 5px;
color: white;
text-align: center;
text-decoration: white;
font-size: 40px;
}
#burger {
position: absolute;
top: 10px;
right: 8px;
width: 40px;
font-size: 30px;
line-height: 40px;
color: lightgray;
border: 1px solid lightgrey;
border-radius: 5px;
text-align: center;
cursor: pointer;
display: none;
}
@media screen and (max-width: 1230px) {
nav ul li a {
font-size: 20px;
}
}
@media screen and (max-width: 780px) {
#burger {
display: block;
}
nav {
width: 100%;
height: 150px;
white-space : nowrap;
}
nav ul {
display: inline-block;
position: relative;
top: 1px;
left: 0;
width: 100%;
}
nav ul li {
height: 40px;
padding: 10px 0 0 0;
}
a {
}
}
JQUERY
$(document).ready(function () {
$('#burger').on('click', function () {
$('#menu').stop().slideToggle('slow');
$('#navbar').stop().slideToggle('slow');
$('#navbar').css({
width: '100%',
height: '60px',
color: 'red',
}
);
});
$(window).resize(function () {
if ($(window).width() > 780) {
$('#menu').css('display', 'inline-block');
} else {
$('#menu').css('display', 'none');
}
})
})
J'aimerais que lorsque je clique sur le menu burger, la navbar descende jusqu'à sa taille maximale et m'affiche mes liens en colonne, mais je ne trouve pas la solution.
Pourrait-on m'aider s'il vous plait?