11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour tout le monde!
Comme vous avez pu le remarquer dans le sujet, je souhaiterais que mon sous menu de mon menu vertical reste ouvert quand j'ai cliqué sur l'un des items du sous menu.
Merci d'avance!


<ul class='menu pa0 unstyled'>
		<li><a href='index.php'><i class='fa fa-home fa-fw'></i>Accueil</a>
		</li>
		<li><a href='#'><i class='fa fa-users fa-fw'></i>Le CE</a>
		<ul class='sousMenu pa0'>
				<li><a href='ce1.php'>Présentation du CE</a></li>
				<li><a href='ce2.php'>Les élus du CE</a></li>
                <li><a href='ce3.php'>Les commissions</a></li>
                <li><a href='ce4.php'>Liens utiles</a></li>
			</ul>
		</li>
        <li><a href='#'><i class='fa fa-book fa-fw'></i>Actualités</a>
			<ul class='sousMenu pa0'>
				<li><a href='actualites.php'>Actu</a></li>
			</ul>
		</li>
		<li><a href='#'><i class='fa fa-picture-o fa-fw'></i>Galeries</a>
			<ul class='sousMenu pa0'>
				<li><a href='galerie.php'>Sorties Disneyland</a></li>
			</ul>
		</li>
		<li><a href='#'><i class='fa fa-sun-o fa-fw'></i>Vacances</a>
			<ul class='sousMenu pa0'>
				<li><a href='offres-favorites.php'>Offres favorites</a></li>
                <li><a href='vacances.php'>Recherche vacances</a></li>
                <li><a href='fiche-vacances.php'>Destination à la une</a></li>
			</ul>
		</li>
        <li><a href='#'><i class='fa fa-ticket fa-fw'></i>Billetterie</a>
			<ul class='sousMenu pa0'>
				<li><a href='billetterie.php'>Les offres du moment</a></li>
				<li><a href='sorties.php'>Sorties / loisirs</a></li>
                <li><a href='coffrets.php'>Coffrets / cartes cadeaux</a></li>
                <li><a href='vie-courante.php'>Vie courante</a></li>
			</ul>
		</li>
        <li><a href='panier.php'><i class='fa fa-shopping-cart fa-fw'></i>Mon panier</a>
			
		</li>
        <li><a href='contact.php'><i class='fa fa-phone fa-fw'></i>Contact</a>
		</li>
	</ul>



/*MENU VERTICAL*/
.menu {
	width: auto;
	height: auto;
}
.menu > li > a > i {
	margin-right: 1em;
}
.menu > li > a {
	background-color: #113A52;
	border-bottom: 1px solid #00C3B6;
	color: #00C3B6;
	width: 100%;
	height: 2.75em;
	line-height: 2.75em;
	text-indent: 0.5em;
	display: block;
	position: relative;
	font-family: 'Oswald', 'sans-serif';
	font-weight: 400;
	text-decoration: none;
	font-size: 1.4rem;
}
.menu > li > a:hover {
	border-bottom: 1px solid #EEEEEE;
	color: #113A52;
	background-color: #00C3B6;
}
.menu > li > a:before {
	color: #00C3B6;
	z-index: 90;
	font-size: 1.6rem;
	font-family: 'FontAwesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	height: 1em;
	width: 1em;
	position: absolute;
	left: -2.7rem;
	top: 20%;
	margin: -.5em 0 0 0;
}
.menu > li > a:hover:before {
	
}
.menu ul {
	list-style: none;
	background:#00837A;
	
}
.menu ul li a {
	width: 100%;
	height: 2.75em;
	line-height: 2.75em;
	text-indent: 2.75em;
	display: block;
	position: relative;
	font-family: 'Oswald', 'sans-serif';
	font-weight: 400;
	font-size: 1.3rem;
	color: #eee;
	text-decoration: none;
	border-bottom: 1px solid #00C3B6;
}
.menu ul li:last-child a {
	border-bottom: 1px solid #00C3B6;
}
.menu > li > a:hover {
	border-bottom: 1px solid #19FFF0;
}
.menu > li > a.active, .menu > li > a.active:before {
	
}
.menu > li > a.active {
	border-bottom: 1px solid #19FFF0;
	background:#00C3B6;
	color:#113A52;
}

.menu > li > ul li a:before {
	font-family: FontAwesome;
	content: '\f105';
	font-size: 1.1rem;
	color: #eee;
	position: absolute;
	width: 1em;
	height: 1em;
	top: 0;
	left: -2rem;
}
.menu > li > ul li:hover a, .menu > li > ul li:hover a span, .menu > li > ul li:hover a:before {
	border-bottom: 1px solid #00C3B6;
	color: #00C3B6;
	background:#113A52;
}
/*FIN MENU VERTICAL*/



$(document).ready(function() {
		var menu_ul = $('.menu > li > ul'),
		sousMenu = $('.menu > .sousMenu'),
		sousMenuA = $('.menu > .sousMenu > a'),
		menu_a  = $('.menu > li > a');
		menu_ul.hide();
		menu_a.click(function(e) {
		if(!$(this).hasClass('active')) {
		menu_a.removeClass('active');
		
		menu_ul.filter(':visible').slideUp('normal');
		$(this).addClass('active').next().stop(true,true).slideDown('normal');
		} else {
		$(this).removeClass('active');
		$(this).next().stop(true,true).slideUp('normal');
		}
		
	});
});

Modifié par paocemalin (26 Sep 2014 - 10:37)
Oui c'est ça, je voudrais que le sous-menu reste ouvert sur la page qui correspond! Si tu veux quand on clique sur Actualités > Actus, il faut que quand je suis sur la page Actus le sous menu reste ouvert pour savoir sur quelle page je suis! Sinon j'en ai parlé au tour de moi ça serait plus une fonction php à faire!