menu ajax avec input checkbox

html5/JS/ajax

Sujet résolu

29 septembre 2016 à 14:20:47

Bonjour a tous,

Je suis en train de créer un site en HTML5 CSS3 JS et AJAX. Je réussi a faire mon menu (cacher) en ajax. tous fonctionne parfaitement a part que je n'arrive pas a ranger le menu au clic sur une page du site.

le menu est cacher en css

je le fait apparaitre avec input checkbox

et je souhaite faire un "not checked" quand je clic sur une page

le HTML

<tr>
<!--<table width="300" id="tableau">-->
<label for="toggle-nav" id="burger" href="#"><span></span></label>
    
<nav id="navigation" role="navigation">    
    <input type="checkbox" id="toggle-nav" aria-label="open/close navigation"/>
    
    <aside class="texture nav-inner">
<a id="liens" href="javascript:void(0)" onclick="open_url('page1.html')">Acceuil</a><br/>
<a id="liens" href="javascript:void(0)" onclick="open_url('page2.html')">Nos Comp&eacutetences</a><br/>
<a id="liens" href="javascript:void(0)" onclick="open_url('page3.html')">Contact</a><br/>
<a id="liens" href="javascript:void(0)" onclick="open_url('page4.html')">page4</a><br/>
<a id="liens" href="javascript:void(0)" onclick="open_url('xxxxx.html')">Lien brisé</a>
    </aside>
</nav>
    
<td valign="top" width="220" class="td2">
<div id="contenu"><h2>Acceuil</h2></div>
</td>
</tr>

le JS

/* AJAX */
//<![CDATA[
var xhr = null;
function open_url(url) {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObjet) {
try {
xhr = new ActiveXObjet("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
xhr.onreadystatechange = function() { reponse(); }
xhr.open("GET", url, true);
xhr.send(null);
}
function reponse() {
if(xhr.readyState == 4) {
if (xhr.status==200) {
document.getElementById("contenu").innerHTML = xhr.responseText;
}
else {
document.getElementById("contenu").innerHTML = "<h3>La page n'est pas disponible.<br><br>Erreur : " + xhr.status + "</h3>";
}
}
}
//]]>

/* SCRIPT TOGGLE (burger) */
document.querySelector( "#burger" )
  .addEventListener( "click", function() {
    this.classList.toggle( "active" );
  });
    

/* INPUT CHEKBOX CHECKED */
$(function() { 
	if($(window).width() > 1025){
		$( "#toggle-nav" ).prop( "checked", true );
	}
});

le CSS

body{
	background-color: red;
}

#burger
{
	cursor: pointer;
	margin: 0 5px;
	padding: 10px 35px 16px 0;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 300;
}

#burger span
{
	transform: translate(20%, 100%);
}

#burger span, #burger span:before, #burger span:after
{
	cursor: pointer;
	border-radius: 1px;
	height: 1.5px;
	width: 25px;
	background: white;
	position: absolute;
	display: block;
	content: '';
}

#burger span:before
{
	top: -7px;
}

#burger span:after
{
	bottom: -7px;
}

#burger span, #burger span:before, #burger span:after
{
	transition: all 500ms ease-in-out;
}

#burger.active span
{
	background-color: transparent;
}

#burger.active span:before, #burger.active span:after
{
	top: 0;
}

#burger.active span:before
{
	transform: rotate(45deg);
}

#burger.active span:after
{
	transform: rotate(-45deg);
}

.texture
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	text-align: center;
	position: fixed;
	z-index: 100;
	background: green;
}

.space
{
	transform: translateY(-60%);
	margin-top: 50vh;
}

.separator
{
	width:130px;
	height: 1px;
	background: white;
	margin: 20px auto;
}

#navigation-ul li a img
{
	display: none;
	width: 38px;
	margin: 10px;
}

#navigation > input, .button-menu-resp
{
	display: none;
}

.nav-inner
{
	transform: translateX(-100%) translateZ(0);
	transition: transform .2s;
}

#toggle-nav:checked ~ .nav-inner
{
	transform: translateX(0);
}

#toggle-nav:checked ~ #content
{
	overflow-y:hidden;
}

#toggle-nav:checked ~ .nav-inner
{
	overflow-y:scroll;
}

#navigation-ul li a .nav-responsive
{
	font-size: 17px;
}

#resaux
{
	position: absolute;
	width: 100%;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
}

#resaux li a img
{
	width: 50px;
	margin: -4px;
}

#resaux li
{
	display: inline-block;
}

bryan33000

29 septembre 2016 à 16:06:49

Salut,

Essaye de rajouter ça à la fin (ou au début) de ta fonction open_url()

document.querySelector( "#burger" ).className = "";
document.getElementById('toggle-nav').checked = false;

Exemple : https://jsfiddle.net/ywybvvpd/

Sur le fiddle j'ai juste viré ta fonction open_url() pour mettre ces deux lignes pour pas faire l'appel ajax bien entendu

Afin de lui retirer sa class "active" manuellement

Au passage, tu as tous tes liens <a> qui ont le même attribut ID, ca risque de te causer des problèmes par la suite, et ce n'est pas conforme aux standards HTML

Quand tu ne sais pas, Google reste ton meilleur ami ! ;)

souricevincent

30 septembre 2016 à 12:54:44

Un grand merci je l'ai donc mis a la fin de ma fonction et tout fonctionne parfaitement !

Je donne mon code pour ce que ça intéresse (une page en ajax) :

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Script Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="class-usuel.css">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<script type="text/javascript" src="scripts-ajax.js"></script>
</head>
<body>
    
<tr>  
<!--LE TOGGLE-->
<label for="toggle" id="burger" href="#"><span></span></label>
<!--LE MENU-->
<nav id="navigation" role="navigation">    
    <input type="checkbox" id="toggle" aria-label="open/close navigation"/>
    <aside class="menu">
    <ul>
        <li><a href="javascript:void(0)" onclick="open_url('page1.html')">Acceuil</a></li><br/>
        <li><a href="javascript:void(0)" onclick="open_url('page2.html')">Nos Comp&eacutetences</a></li><br/>
        <li><a class="pages" href="javascript:void(0)" onclick="open_url('page3.html')">Contact</a></li><br/>
        <li><a href="javascript:void(0)" onclick="open_url('page4.html')">page4</a></li><br/>
        <li><a href="javascript:void(0)" onclick="open_url('xxxxx.html')">Lien brisé</a></li>
    </ul>
    </aside>   
</nav>  
<!--LES PAGES S4AFFICHENT LA, ENTRE LES td-->
<td valign="top" width="220" class="td2">
<div id="contenu"><h2>Acceuil</h2></div>
</td>
</tr>
    
<script>
/* SCRIPT TOGGLE (burger) */
document.querySelector( "#burger" )
  .addEventListener( "click", function() {
    this.classList.toggle( "active" );
  });
</script>
    
</body>
</html>

//<![CDATA[
var xhr = null;
function open_url(url) {
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObjet) {
try {
xhr = new ActiveXObjet("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
xhr.onreadystatechange = function() { reponse(); }
xhr.open("GET", url, true);
xhr.send(null);
document.querySelector( "#burger" ).className = "";
document.getElementById('toggle').checked = false;
}

function reponse() {
if(xhr.readyState == 4) {
if (xhr.status==200) {
document.getElementById("contenu").innerHTML = xhr.responseText;
}
else {
document.getElementById("contenu").innerHTML = "<h3>La page n'est pas disponible.<br><br>Erreur : " + xhr.status + "</h3>";
}
}
}
//]]>

css

body{
	background-color: red;
}

#burger
{
	cursor: pointer;
	margin: 0 5px;
	padding: 10px 35px 16px 0;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 300;
}

#burger span
{
	transform: translate(20%, 100%);
}

#burger span, #burger span:before, #burger span:after
{
	cursor: pointer;
	border-radius: 1px;
	height: 1.5px;
	width: 25px;
	background: white;
	position: absolute;
	display: block;
	content: '';
}

#burger span:before
{
	top: -7px;
}

#burger span:after
{
	bottom: -7px;
}

#burger span, #burger span:before, #burger span:after
{
	transition: all 500ms ease-in-out;
}

#burger.active span
{
	background-color: transparent;
}

#burger.active span:before, #burger.active span:after
{
	top: 0;
}

#burger.active span:before
{
	transform: rotate(45deg);
}

#burger.active span:after
{
	transform: rotate(-45deg);
}

.menu
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	text-align: center;
	position: fixed;
	z-index: 100;
	background: rgba(0, 128, 0, 0.53);
}

#navigation > input
{
	display: none;
}

.menu
{
	transform: translateX(-100%) translateZ(0);
	transition: transform .2s;
}

#toggle:checked ~ .menu
{
	transform: translateX(0);
}

#toggle:checked ~ #content
{
	overflow-y:hidden;
}

#toggle:checked ~ .menu
{
	overflow-y:scroll;
}

-
Edité par souricevincent 30 septembre 2016 à 13:08:53

bryan33000

30 septembre 2016 à 13:08:36

Yes nickel !

Pense à mettre le sujet en résolu

Quand tu ne sais pas, Google reste ton meilleur ami ! ;)