/* cmsms stylesheet: nav-mob modified: 06/03/2016 14:28:55 */ /* Markup 1) avec un id : 2) */ .nav-open, .nav-close{ display: none; } @media (max-width: 768px) { .nav-mob { position: absolute; top: 0; left: 0; margin: 0; max-width: 200px; text-align: left; z-index: 90; } .nav-mob{ padding-top: 20px; } .nav-mob a:hover{ background-color: rgba(255, 255, 255, 0.48); } .nav-mob ul{ overflow: hidden !important; } .nav-mob ul , .nav-mob ul li{ position: static !important; list-style: none !important; display: block !important; width: 100% !important; } .nav-mob ul a { display: block; font-size: 1.6rem; line-height :1.5; padding-top : 0.75em; padding-bottom : 0.75em; text-decoration: none; padding-left: 1em; width: 100% !important; } .nav-mob ul ul{ padding-left: 0;} .nav-mob ul li li a{ padding-left: 2em;} .nav-mob ul li li li a{ padding-left: 3.5em;} .nav-mob ul li li li li a{ padding-left: 5em;} .nav-mob ul li li{ list-style: disc inside; } .nav-mob > ul > li{ border-bottom: 1px solid #ca3827; } /* Bouton menu */ .nav-mob .nav-open, .nav-mob .nav-close{ position: absolute; color: #1f488c; width: 42px; height: 42px; border-radius : 50%; top : 25px; left: 15px; margin-left: 10px; } /* Bouton menu - character */ .nav-mob > a:after { content: ""; position: absolute; left: 0; text-indent: 0; text-align: center; width: 42px; right: -42px; font-size: 36px; color: #1f488c; font-weight: 700; font-family: 'Cuprum' sans-serif; font-size: 24px !important; line-height: 42px; cursor: pointer; } /* Bouton menu - ouvrir */ .nav-mob > a.nav-open:after { content: "\2261"; top : -0.06em; } /* Bouton menu - fermer */ .nav-mob > a.nav-close:after { content: "\00D7"; top : 0.03em; } /* - - Affichage - ouverture / fermeture */ /* - - - - - - - - - - - de base */ .nav-mob { width: 0%; min-height: 100%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transition: width .4s ; transition: width .4s ; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .nav-mob ul{ max-height: 0%; -webkit-transition: max-height 0.4s ; transition: max-height 0.4s ; -webkit-transition-delay: 0s; transition-delay: 0s; } .nav-mob li { opacity: 0; -webkit-transition: opacity .3s ; transition: opacity .3s ; -webkit-transition-delay: 0s; transition-delay: 0s; } /* - - - - - - - - - - - menu demandé */ body:target .nav-mob { width: 60%; -webkit-transition-delay: 0s; transition-delay: 0s; } body:target .nav-mob ul{ max-height: 800%; } body:target .nav-mob li { opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } /* menu - switching */ .nav-open, body:target .nav-close {display: block; text-decoration: none;} .nav-close, body:target .nav-open {display: none; } body:target .nav-mob .nav-close{ left: 100%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transition: left 0.4s; transition: left 0.4s ; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } body .nav-mob .nav-open{ left: 100%; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transition: left 0.4s; transition: left 0.4s ; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }