Partage

Menu

2 janvier 2018 à 18:25:20

Bonjour! :)

j'ai besoin d'un menu pour mon site , j'ai donc essayé d'en faire un mais j'ai un soucis :

J'aimerais que lorsque que l'on clic dessus il reste ouvert, j'ai déjà réussit a faire en sorte qu'il s'ouvre quand on clic dessus mais il ne reste pas ouvert.

Mon code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href ="style2.css" />
		<title>Test</title>
	</head>
	<body>
			<ul class="menu">
				<li>accueil</li>
				<li class="test">Menu
					<ul class="sous">
			   			<li class="nav-item"><a href="index.php">Accueil</a></li>
			    		<li class="nav-item"><a href="csgo.php">Csgo promo codes</a></li>
			    		<li class="nav-item"><a href="#">About</a></li>
			    		<li class="nav-item"><a href="#">Blog</a></li>
			    		<li class="nav-item"><a href="#">Contact</a></li>
			    	</ul>
			    </li>
			    <li>joindre</li>
			</ul>
	</body>
</html>
.menu
{
	list-style: none;
	width:500px;
	margin:0px;
	padding:0px;
	line-height: 50px;
	text-align:center;
}

*
{
	margin:0px;
	padding:0px;
}

.sous
{
	display:none;
}

.test:active .sous
{
	display:block;
}

.test
{
		cursor: pointer;	
}

Ps: je m'y connais pas du tout en javascript :s


"Je n'ai pas échoué. J'ai juste trouvé 10 000 moyens qui ne fonctionnent pas."                                  - Thomas Edison

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
2 janvier 2018 à 18:48:54

Yo, malheureusement pour toi  Javascript est ton meilleur ami pour ce genre de chose :lol:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href ="style2.css" />
        <title>Test</title>
    </head>
    <body>
            <ul class="menu">
                <li>accueil</li>
                <li class="test" id="bouton_texte" onclick="javascript:afficher_cacher('sous');">Menu
                    <ul class="sous" id="sous">
                        <li class="nav-item"><a href="index.php">Accueil</a></li>
                        <li class="nav-item"><a href="csgo.php">Csgo promo codes</a></li>
                        <li class="nav-item"><a href="#">About</a></li>
                        <li class="nav-item"><a href="#">Blog</a></li>
                        <li class="nav-item"><a href="#">Contact</a></li>
                    </ul>
                </li>
                <li>joindre</li>
            </ul>
    </body>
</html>

js

<script type="text/javascript">
    function afficher_cacher(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
    }
    return true;
}
</script>

css

   .menu
{
    list-style: none;
    width:500px;
    margin:0px;
    padding:0px;
    line-height: 50px;
    text-align:center;
}
 
*
{
    margin:0px;
    padding:0px;
}
 
.sous
{
visibility: hidden;
}
 
.test:active .sous
{
    display:block;
}
 
.test
{
        cursor: pointer;   
}

voila j'espere t’avoir aidé ! :)

Sinon j'ai un peu modifié ton code,  tu peux utiliser ceci si ça te conviens mieux :)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href ="style2.css" />
        <title>Test</title>
    </head>
    <body>
            <ul class="menu">
                <li>accueil</li>
                <li class="test">Menu
                    <ul class="sous" id="sous">
                        <li class="nav-item"><a href="index.php">Accueil</a></li>
                        <li class="nav-item"><a href="csgo.php">Csgo promo codes</a></li>
                        <li class="nav-item"><a href="#">About</a></li>
                        <li class="nav-item"><a href="#">Blog</a></li>
                        <li class="nav-item"><a href="#">Contact</a></li>
                    </ul>
                </li>
                <li>joindre</li>
            </ul>
    </body>
</html>
.sous{
    display: none;
}

.test:hover .sous{
    display: block;
}

 Bon codage et bonne chance pour ton site ^^

-
Edité par Clément Muth 2 janvier 2018 à 18:57:58

2 janvier 2018 à 19:05:38

Clément Muth a écrit:

Yo, malheureusement pour toi  Javascript est ton meilleur ami pour ce genre de chose :lol:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href ="style2.css" />
        <title>Test</title>
    </head>
    <body>
            <ul class="menu">
                <li>accueil</li>
                <li class="test" id="bouton_texte" onclick="javascript:afficher_cacher('sous');">Menu
                    <ul class="sous" id="sous">
                        <li class="nav-item"><a href="index.php">Accueil</a></li>
                        <li class="nav-item"><a href="csgo.php">Csgo promo codes</a></li>
                        <li class="nav-item"><a href="#">About</a></li>
                        <li class="nav-item"><a href="#">Blog</a></li>
                        <li class="nav-item"><a href="#">Contact</a></li>
                    </ul>
                </li>
                <li>joindre</li>
            </ul>
    </body>
</html>

js

<script type="text/javascript">
    function afficher_cacher(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
    }
    return true;
}
</script>

css

   .menu
{
    list-style: none;
    width:500px;
    margin:0px;
    padding:0px;
    line-height: 50px;
    text-align:center;
}
 
*
{
    margin:0px;
    padding:0px;
}
 
.sous
{
visibility: hidden;
}
 
.test:active .sous
{
    display:block;
}
 
.test
{
        cursor: pointer;   
}

voila j'espere t’avoir aidé ! :)

Sinon j'ai un peu modifié ton code,  tu peux utiliser ceci si ça te conviens mieux :)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href ="style2.css" />
        <title>Test</title>
    </head>
    <body>
            <ul class="menu">
                <li>accueil</li>
                <li class="test">Menu
                    <ul class="sous" id="sous">
                        <li class="nav-item"><a href="index.php">Accueil</a></li>
                        <li class="nav-item"><a href="csgo.php">Csgo promo codes</a></li>
                        <li class="nav-item"><a href="#">About</a></li>
                        <li class="nav-item"><a href="#">Blog</a></li>
                        <li class="nav-item"><a href="#">Contact</a></li>
                    </ul>
                </li>
                <li>joindre</li>
            </ul>
    </body>
</html>
.sous{
    display: none;
}

.test:hover .sous{
    display: block;
}

 Bon codage et bonne chance pour ton site ^^

-
Edité par Clément Muth il y a 5 minutes


Salut!

Merci pour ton aide rapide et précise :) juste une petite question :

Le javascript se met dans un fichier a part (exemple : test.js) ou dans une partie du html ?

"Je n'ai pas échoué. J'ai juste trouvé 10 000 moyens qui ne fonctionnent pas."                                  - Thomas Edison
2 janvier 2018 à 19:52:37

bein moi personnellement je "l'incruste" directement dans mon code html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href ="style2.css" />
        <title>Test</title>
    </head>
    <body>
            <ul class="menu">
                <li>accueil</li>
                <li class="test" id="bouton_texte" onclick="javascript:afficher_cacher('sous');">Menu
                    <ul class="sous" id="sous">
                        <li class="nav-item"><a href="index.php">Accueil</a></li>
                        <li class="nav-item"><a href="csgo.php">Csgo promo codes</a></li>
                        <li class="nav-item"><a href="#">About</a></li>
                        <li class="nav-item"><a href="#">Blog</a></li>
                        <li class="nav-item"><a href="#">Contact</a></li>
                    </ul>
                </li>
                <li>joindre</li>
            </ul>

<script type="text/javascript">
    function afficher_cacher(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
    }
    return true;
}
</script>

</body>
</html>

mais tu peux également le mettre dans un fichier à part :)

3 janvier 2018 à 9:23:47

Salut,

C'est mieux de le mettre dans un fichier à part.

De plus, tu peux en faire en CSS (c'est plus facile avec un pré-processeur) si tu veux pas te servir de JS, comme le montre cet exemple : https://codepen.io/connorbrassington/pen/raNrEW

-
Edité par MrChampy 3 janvier 2018 à 9:24:01

Menu

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown