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!
Modifié par paocemalin (26 Sep 2014 - 10:37)
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)