0
J'essaie donc de concevoir un site Web pour mon organisation à partir de zéro en utilisant Bootstrap et avec des éléments de parallaxe. Et j'ai trouvé cette démo en ligne et tout ce que je veux faire est d'ajouter une barre de navigation avec un des boutons ayant un menu déroulant planant. J'ai suivi les instructions sur le site Web de Bootstrap et il est facile d'accéder à la barre sur la page, mais le menu déroulant ne s'affiche pas ou si j'arrive à la barre, le menu déroulant est en désordre. Il semble qu'il y ait un problème d'axe Z? Ou le conteneur pour la barre de navigation ne me laisse pas avoir un joli menu déroulant. Voici ce que j'ai jusqu'à présent:Barre de navigation déroulante utilisant parallaxe
<!DOCTYPE html>
<!-- saved from url=(0060)https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm -->
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.nav {
background-color: #333;
font-family: Arial;
}
.nav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
position: relative;
z-index: 9999999;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:last-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a:first-child a:hover,
.dropdown-content a:focus {
background-image: none;
}
.dropdown-content a {
width: 210px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.parallax-header {
/* The image used/background-image: url("header.jpg");/Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("vsa2017.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("culturedance.png");
min-height: 400px;
}
.bgimg-3 {
background-image: url("culturedance.png");
min-height: 400px;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1,
.bgimg-2,
.bgimg-3 {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div class="nav">
<a href="#home">About</a>
<div class="dropdown">
<a href="#">Pillars</a>
<div class="dropdown-content">
<a href="family.html">Family</a>
<a href="culture.html">Culture</a>
<a href="diversity.html">Diversity</a>
<a href="cpp.html">Philanthropy</a>
</div>
</div>
<a href="officers.html">Officers</a>
<a href="sponsors.html">Sponsors</a>
<a href="contact.html">Contact</a>
<a href="https://www.facebook.com/gmu.vsa?fref=ts"><i class="fa fa-facebook-square"></i></a>
<a href="https://www.instagram.com/gmuvsa/"><i class="fa fa-instagram"></i></a>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">Parallax Demo</h3>
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero
ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque
non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis,
ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span class="border">COOL!</span>
</div>
</div>
</body>
</html>Je suis assez nouveau et besoin d'apprendre, toute aide sera appréciée/
Merci beaucoup! Exactement ce que je cherchais, si j'ai besoin de déplacer le bouton Pillars pour le rapprocher des autres boutons, est-ce que j'utilise le padding dans le .dropdown CSS? – gildartsv09
je ne l'ai pas compris – gildartsv09
ok np, juste mettre à jour ci-dessous css: .dropdown { float: left; position: relative; z-index: 9999999; } Put float: left au lieu de display: inline-block; Vérifiez la réponse mise à jour –