Menu inaccessible sur firefox

Question

Muelsan

9 Oct 2014 à 05:50

Salut tout le monde Smiley biggrin

J'ai un problème d’accessibilité avec le site que je suis en train de faire pour la marque de vêtements Sixth June. Le menu ne répond pas sur mozilla or dans la démo que j'ai récupéré sur internet le menu fonctionne parfaitement.

la démo: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

LE HTML


			
		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
			<h3>Menu</h3>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="defile.html">Défilé</a></li>
				<li><a href="looks.html">Looks</a></li>
				<li><a href="backstage.html">Backstage</a></li>
				<li><a href="mood_1.html">Mood</a></li>
				<li><a href="http://www.sixthjune.com/boutique" target="_blank">Nos Magasins</a></li>
				<li><a href="http://www.sixthjune.com" target="_blank">Boutique en ligne</a></li>
			</ul>
		</nav>

LE JS


<script type="text/javascript">
window.onload=function() {
  document.getElementById('chargement').style.display = 'none';
};
	</script>

<script src="js/classie.js"></script>

<!--menu-->

<script>
			var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
				showRightPush = document.getElementById( 'showRightPush' ),
				body = document.body;

			showRightPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toleft' );
				classie.toggle( menuRight, 'cbp-spmenu-open' );

			};

		</script>


/*!
 * classie - class helper functions
 * from bonzo  https://github.com/ded/bonzo
 
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo  https://github.com/ded/bonzo
 

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

LE CSS


/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher:  http://nicolasgallagher.com/micro-clearfix-hack/  */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}


.main,
.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0;
	float: left;
	font-weight: 400;
}

.container > header span {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header nav {
	float: right;
}

.container > header nav a {
	display: block;
	float: left;
	position: relative;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	color: transparent;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
	text-indent: -8000px;
}

.container > header nav a:after {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

.container > header nav a:hover:after {
	opacity: 1;
}

.container > header nav a:hover {
	background: #47a3da;
}

.main > section {
	max-width: 260px;
	width: 90%;
	margin: 0 auto;
}

.main > section h2 {
	font-weight: 300;
	color: #ccc;
}

.main > section button {
	position: absolute;
	top: 0px;
	right: 0px;
	color: #fff;
	display: block;
	cursor: pointer;
	border: none;
	background: transparent;
	width: 67px;
	height: 67px;
	padding: 0;
}

.main > section button:hover {
	background: #ffffff;
	border: none;
}

.main > section button.active {
	background: #000000;
	border: none;
}

.main > section button.disabled {
	background: #000000;
	pointer-events: none;
	border: none;
}

.icon-drop:before, 
.icon-arrow-left:before {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 2;
	text-align: center;
	color: #47a3da;
	-webkit-font-smoothing: antialiased;
	text-indent: 8000px;
	padding-left: 8px;
}

.container > header nav a:hover:before {
	color: #fff;
}

.icon-drop:before {
	content: "\e000";
}

.icon-arrow-left:before {
	content: "\f060";
}

Pour plus d'infos le site est également disponible à cette adresse mais il n'est pas encore terminé complètement.
http://defile.sixthjune.com/index.html

J'offre une croisière pour deux personnes à Hawaï à celui qui résous mon problème Smiley smile

Felipe

Administrateur

9 Oct 2014 à 09:49

Bonjour,

l'accessibilté web concerne l'accès des personnes handicapées (malvoyants, non-voyants, avec des problèmes moteurs, sourds pour la vidéo, etc), pas les problèmes d'accès à un site par tous : je déplace donc ce sujet dans le Salon CSS
Modifié par Felipe (09 Oct 2014 - 09:49)

Muelsan

9 Oct 2014 à 10:13

Merci Felipe.
Je serais plus vigilant dans mes prochains postes.

tomInCat

21 Oct 2014 à 12:04

Bonjour Muelsan,

ton problème se trouve dans le button : tu as mis l'id sur l'image et non le bouton.
KO : <button><img id="showRightPush" src="img/menu.png"></button>
OK : <button id="showRightPush"><img src="img/menu.png"></button>

Tiens moi au courant pour Hawaï Smiley langue

Sujet clos

CSS et mise en forme, CSS3

Menu inaccessible sur firefox