11540 sujets

JavaScript, DOM et API Web HTML5

[RÉSOLU] - Menu rétractable 'click' 'slide' 'toogle'

Bonjour,

Je tente désespérément de réaliser un menu rétractable par 'click, slide & toogle'.
Ce qui est vraiment étrange, est qu'il fonctionne ici (épuré des entêtes) => http://jsfiddle.net/d17gx22p/6/
mais impossible de le faire fonctionner en local, je suppose qu'il y a quelque chose qui n'est pas correct dans <head> ... ???

Voici donc mon code complet (j'ai éliminé tous les autres contenus et mises en page superflues, par exemple le menu ne sera pas positionné où il est actuellement) :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="css/essai_generic.css" type="text/css" />

		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
		 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>		
		<script>
		$('#bouton_menu').click(function () {
		var effect = 'slide';
		var options = { direction: 'right' };
		var duration = 700;
		$('#menu').toggle(effect, options, duration);
		});
		</script>

        <title>bla bla</title>
    </head>
    
    <body>

			<p><button id="bouton_menu">Menu</button></p>
				<div id="menu">
					<nav>
						<ul>
							<li><a href="club.php">LE CLUB</a></li>
							<li><a href="club.php#membres">LES MEMBRES</a></li>
							<li><a href="#">LES MACHINES</a></li>
							<li><a href="#">LES TARIFS</a></li>
							<li><a href="#">LES INFOS</a></li>
							<li><a href="#">BAPTÊMES</a></li>
							<li><a href="#">CONTACT</a></li>
							<li><a href="#">VENIR</a></li>
						</ul>
					</nav>    
				</div>
				
    </body>
</html>







html, body {
    height: 100%;
	margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    width: 100%;
	background-image: url("../images/fond.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}



/* MENU */

#menu {
	background-color: rgba(45, 45, 45, 0.8);
	width: 120px;
	height: 100%;
	margin: 0px;
	padding: 25px;
	padding-top: 10%;
	/*display: none;*/
}

nav {
	height: 100%;
}

#menu ul {
	list-style-type: none;
	padding-left: 0;
}

#menu ul li {
	padding-bottom:	20px;
	padding-left: 8px;
}

#menu ul li a {
	text-decoration: none;
	font-size: 1em;
}

#menu ul li a {
    color: rgb(128, 128, 128);
}

#menu ul li a:hover {
	color: rgb(180, 180, 180);
}

/* FIN MENU */

Modifié par lool_lauris (28 Oct 2014 - 21:44)
les chemins sont de type :
http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

Si tu oublies le protocole, le navigateur cherche dans un dossier local.
Merci pour la réponse.

En fait, le problème ne vient pas des chemins mais du code js. À mon code initial :

	$('#bouton_menu').click(function () {
		var effect = 'slide';
		var options = { direction: 'right' };
		var duration = 700;
		$('#menu').toggle(effect, options, duration);
		});


il faut ajouter :
$(function() {


Pour avoir au final :
$(function() {
    $('#bouton_menu').click(function () {
        var effect = 'slide';
        var options = { direction: 'right' };
        var duration = 700;
        $('#menu').toggle(effect, options, duration);
    });
});


Merci encore de t'être intéressé à mon problème qui est maintenant résolu.
Modifié par lool_lauris (28 Oct 2014 - 21:43)
Sujet clos
Aller à