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 | 1959 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