Faire apparaitre résultat d'un onclick (menu nav) sans transparence sur un paragraphe en dessous

Eléphant du PHP | 53 Messages

12 août 2016, 10:36

Bonjour,

Actuellement sur un site que je développe pour un projet personnel, je rencontre un problème que je n'arrive pas à résoudre.

J'ai une barre de navigation avec mes menus qui s'affichent avec un "onclick" or quand celui-ci est déclenché, la liste du menu s'affiche en transparence sur le <p> paragraphe en-dessous, j'ai tenté "opacity" et bien d'autres choses mais je ne trouve pas.

Voici le code:
<!DOCTYPE html>
<html>
<hr>
  <head>
    <script type="text/javascript" src="main.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <header>
    <meta charset="UTF-8">
    <title>MOMOCLOUD</title>
    <h1>MOMOCLOUD</h1>
  </header>
  <nav>
    <ul id="menu-deroulant">

	      <li id="title" onclick="javascript:visibilite('first');"><a href="#">HIP/HOP</a>

		        <ul style="display:none;" id="first">

			          <li><a href="#"><br>Nouveautés</a></li>
			          <li><a href="#">Classiques</a></li>
			          <li><a href="#">Top US</a></li>
			          <li><a href="#">Top BHH</a></li>

		        </ul>

	      </li>
        <li id="title2" onclick="javascript:visibilite('second');"><a href="#">RNB</a>

		        <ul style="display:none;" id="second">

			        <li><a href="#"><br>Nouveautés</a></li>
			        <li><a href="#">Classiques</a></li>
			        <li><a href="#">Top US</a></li>
              <li><a href="#">Top RNB</a></li>

		        </ul>

	      </li>
        <li id="title3" onclick="javascript:visibilite('tierce');"><a href="#">HOUSE/ELECTRONIQUE</a>

          <ul style="display:none;" id="tierce">

            <li><a href="#"><br>Nouveautés</a></li>
            <li><a href="#">Classiques</a></li>
            <li><a href="#">Top House</a></li>
            <li><a href="#">Top Electro</a></li>

          </ul>
    </ul>
  </nav>
  <body>
  </body>
  <p>Bienvenue sur MomoCloud, nouveau site consacré à la musique Hip-Hop, RnB, et aussi House / Electro.</p><br>
  <pp>"Si tu es fan de Chris Brown, Drake, Dj Khaled, Rihanna et autres, c'est ici que tu trouveras ton bonheur." </pp>
 <footer align="center">
     <a>© 2016 MomoBoy Corporation </a>
     <a>&nbsp;&nbsp;&nbsp;&nbsp; Contactez-nous</a>
   <hr>
 </footer>
</html>
partie CSS:
h1 {
  position: absolute;
  font-family: 'Abril Fatface', cursive;
  top: 0;
  left: 350px;
  font-size: 80px;
  color: purple;

  border-color: blue;
  border-style: solid;
  border-radius: 10px 10px 10px 10px;
}

header {
  position: absolute;
  float: center;
  width: 1220px;
  height: 250px;
  background-size: auto;
  background:url(WizSnoopBanniere.jpg) center;
  padding-top:0.5em;
}

body {
  background: url(backgroundPlancherNoir.jpg) center;
  color: white;
  opacity: 1;
}

p {
  position: absolute;
  top: 350px;
  left: 300px;
}

pp {
  position: absolute;
  top: 400px;
  left: 300px;
}

nav {
  position: relative;
}

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu-deroulant {
/* on centre le menu dans la page */
    position: absolute;
    top: 300px;
}

#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
    border-color: red;
}

#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}

#menu-deroulant a {
    text-decoration: none;
    display: block;
	  color: yellow;
    background-color: green;
}

#title {
  position: absolute;
  left: 100px;
  border-style: solid;
  border-radius: 5px 5px 5px 5px;
}

#title2 {
  position: absolute;
  left: 600px;
  border-style: solid;
  border-radius: 5px 5px 5px 5px;
}

#title3 {
  position: absolute;
  left: 1000px;
  border-style: solid;
  border-radius: 5px 5px 5px 5px;
}

footer {
  position: absolute;
  color: white;
  bottom: 10px;
  left: 2px;
  right: 2px;
  top: 575px;
  width: 100%;
}
J'aimerai donc que les <li> de mon menu s'affiche sur le <p> sans que l'on voit la partie du <p> où les <li> apparaissent.

Si quelqu'un peut m'aider :)

Eléphanteau du PHP | 46 Messages

16 août 2016, 12:56

Il n'y a pas besoin de javascript, on peut faire cela avec des CSS en utilisant une commande z-index avec une valeur très supérieure, par exemple z-index: 999;

Eléphant du PHP | 53 Messages

16 août 2016, 16:43

Merci pour l'info j'avais lu ça sur d'autres forums, je vais employer cette manière.

Bonne fin de journée J-Nicolas !

ViPHP
ViPHP | 1972 Messages

29 nov. 2016, 23:07

N'oublie pas aussi que tu peux jouer la transparence de ton background via rgba(150,150,150,0.8) (ici rgb = 150,150,150 = gris clair avec 20% de transparence)
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr