Mon site n'est plus addaptatif [Réglé]
Depuis mon passage en 5.1
Créations de Thèmes
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Reprise du message précédent
Chez moi productions est dans les réseaux sociauxsch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Sébastien Chauveau : journaliste, producteur, réalisateur
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
J'ai revérifié au cas où : tout me paraît identique dans la manière de faire l'ajout des sous-menus et des éléments. J'ai donc tenté deux changements :
- J'ai mis le menu du header non plus en automatique mais en menu horizontal déroulant.
- J'ai réactivé les cachs CSS.
Est-ce que ça change quelque-chose de chez vous depuis un ordi et un mobile ?
D'avance, merci.
Sébastien Chauveau : journaliste, producteur, réalisateur
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Je regarderais demain pour ajuster le menu avec cette emplacement.
Mipel Membre non connecté
- Administrateur
- Voir le profil du membre Mipel
- Inscrit le : 04/04/2016
- Site internet
- Groupes :
- Equipe Rédaction
- Equipe Modération
J'ai remis certains menus à leur place mais je ne sais plus combien il y en avait avant la migration.
Tous les liens sont accessibles mais pas forcément dans les bons menus ou sous-menus.
Actuellement, en horizontal et de gauche à droite nous avons:
Accueil -- Réseaux sociaux -- Productions -- Prestations -- Informations utiles
ça me semble pas mal mais si ce découpage de menu n'est pas bon, merci d'indiquer quels sont tes choix d'organisation et je te ferais les modifications.
Mipel
Merci de penser à joindre le rapport système de votre site, il peut nous aider à mieux répondre à vos questions.
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Merci de votre aide.
C'est le bon découpage des menus.
Sébastien Chauveau : journaliste, producteur, réalisateur
Mipel Membre non connecté
- Administrateur
- Voir le profil du membre Mipel
- Inscrit le : 04/04/2016
- Site internet
- Groupes :
- Equipe Rédaction
- Equipe Modération
Reste à vérifier tout ça en vue adaptative mais ce n'est plus mon domaine car pas assez de connaissances du css pour cela.
Si quelqu'un veut bien effectuer quelques tests et indiquer les éventuelles modifications à réaliser ?
A suivre donc ...
Merci de penser à joindre le rapport système de votre site, il peut nous aider à mieux répondre à vos questions.
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Je te propose de remplacer ton fichier design.css et cssmenu.css par ceux la.
Le rendu devrait être mieux.
design.css :
/*--------------------------------------------------------- * Theme : Thème ScoopOldPost * Par : EDN | Swan * Date : 30/07/2016 * Site web : http://easy-design.net/ * Commentaire ou autre de l'auteur # Merci de ne pas toucher au entête des fichiers CSS. *--------------------------------------------------------- * Porté par : EDN | Swan * Date V5.1 : 30/05/2017 /*-------------------------------------------------------- * Théme compatible avec deux menus (droite et gauche) le choix reste possible sur un menu *----------------------------------------------------------*/ /* -- Elements HTML generiques specifique au theme -- */ /* -------------------------------------------------- */ /* afficher le texte sélectionné en blanc sur fond gris */ ::-moz-selection { color:#efefef; background: #555555 none repeat scroll 0 0;} ::selection { color:#efefef; background:#555555 none repeat scroll 0 0;} /* afficher le texte sélectionné dans un paragraphe en blanc sur fond gris */ p::-moz-selection { color:#efefef; background: #222222 none repeat scroll 0 0; } p::selection { color:#efefef; background: #222222 none repeat scroll 0 0;} html { font-size: 100%; font-size: 10px; } body { background: url(images/bg.jpg) repeat scroll center center rgba(0, 0, 255, 0.5); position: relative; height: auto; min-height: 100%; color: #333333; font-size: 1.3em; /* Sélectionnez cette police si vous souhaitez un typographie plus ancienne. ------------------------------ font-family: monospace,"times new roman",times,serif; */ font-family:'Space Mono', monospace; } @media (max-width: 768px) { body { font-size: 1.4em; } } div#SuperGlobal { background: #ffffff none repeat scroll 0 0; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; margin: auto; width: 1050px; box-shadow: 3px 2px 3px 0px #9b9b9b; } /* -- En-tete de page - Header -- */ /* ------------------------------ */ header#header { background: transparent url(images/header.png) no-repeat scroll center 35px; height: 242px; } /* --- Partie superieure du header --- */ display: flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: row; -ms-flex-direction: row; -webkit-flex-direction: row; margin: auto; max-width: 1024px; } @media (min-width: 769px) { div#top-header { min-height: 228px; } } div#top-header-content { flex: 1 1 auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; } @media (max-width: 768px) { div#top-header { flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; } div#top-header-content { align-self: flex-end; -ms-align-self: flex-end; -webkit-align-self: flex-end; } } /* --- Partie inferieur du header --- */ div#sub-header { border-bottom: 1px solid #aaa; border-top: 1px solid #aaa; margin: auto; min-height: 35px; max-width: 1050px; } div#sub-header-content{ margin: auto; max-width: 1024px; } .date { display: none; float: right; margin-right: 7px; margin-top: -36px; } /* --- Logo et Nom du site web --- */ div#site-infos { display: flex; display: -ms-flexbox; display: -webkit-flex; margin: 1.5em 0 0 1.5em; max-width: 940px; flex: 1 1 auto; } div#site-logo { margin: 0 1em 0 0; width: 60px; height: 60px; background-image: url(images/logo.png); background-position: center; background-repeat: no-repeat; background-size: cover; flex: 0 0 auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; } div#site-name-container { margin: 0.4em 0 0 0; } a#site-name { color: #F9FCFF; font-size: 3em; font-weight: bold; line-height: 1em; letter-spacing: 0.02em; text-decoration: none; text-shadow: 0 0 0 rgb(0, 0, 0), 1px 0 0 rgb(0, 0, 0), 2px 0 0.1px rgba(0, 0, 0, 0.1), 2px 0 0.1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, .1); } span#site-slogan { display: block; padding: 0.1em 0 0 0.1em; color: #FFFFFF; font-size: 1em; letter-spacing: 0.1em; } @media (min-width: 769px) { div#site-logo { width: 90px; height: 90px; } div#site-name-container { margin: 1em 0 0 0; } a#site-name { font-size: 4em; } } /* -- Conteneur global du site -- */ /* ------------------------------ */ div#global { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: column; -ms-flex-direction: column; -webkit-flex-direction: column; margin: 1.5em auto 0 auto; padding: 0 10px; max-width: 1050px; } @media (max-width: 768px) { div#global { width: 100%; } } div#main { padding: 0 0 10px 0; max-width: 100%; order : 1; -ms-flex-order: 1; -webkit-flex-order: 1; } aside#menu-left, aside#menu-right { width: 100%; } aside#menu-left { order : 2; -ms-flex-order: 2; -webkit-flex-order: 2; border-right: 1px solid #dedede; } aside#menu-right { order : 3; -ms-flex-order: 3; -webkit-flex-order: 3; border-left: 1px solid #dedede; } @media (min-width: 769px) { div#global { min-height: 100vh; flex-direction: row; -ms-flex-direction: row; -webkit-flex-direction: row; } div#main { padding: 0 2px; order : 2; -ms-flex-order: 2; -webkit-flex-order: 2; flex: 1 0 auto; -ms-flex: 1 0 100%; } aside#menu-left, aside#menu-right { width: 300px; } aside#menu-left { order : 1; -ms-flex-order: 1; -webkit-flex-order: 1; padding-right: 2px; } aside#menu-right { order : 3; -ms-flex-order: 3; -webkit-flex-order: 3; padding-left: 2px; } #main.main-with-left, #main.main-with-right { width: calc(100% - 300px); -ms-flex: 1 0 auto; /*Tricks IE*/ } #main.main-with-left.main-with-right { width: calc(100% - 400px); -ms-flex: 1 0 auto; /*Tricks IE*/ } } div#top-footer { padding: 2% 0; } /* -- Contenu de la page -- */ /* ------------------------ */ /* --- Contenu central --- */ div#main-content { padding-top: 1em; } div.block-container { margin-top: 15px; } /* --- Emplacement au dessus et en dessous du contenu de la page --- */ div#top-content { margin: 0 0 2% 0; padding: 0.1em 0.8em; /* background-color: #FFFFFF; border: 1px solid #BEBEBE;*/ } /* --- Emplacement au dessus du pied de page --- */ div#bottom-content { margin: 2% 0 0 0; padding: 0.1em 0.8em; /* background-color: #FFFFFF; border: 1px solid #BEBEBE;*/ } /* -- Pied de page - Footer -- */ /* --------------------------- */ footer#footer { width: 100%; clear: both; } footer#footer .footer-content { margin: 0 auto 0 auto; padding: 1.5em 0; max-width: 1024px; } footer#footer .footer-infos { padding-top: 10px; min-height: 40px; text-align: center; } footer#footer .footer-infos span { color: #646464; font-size: 0.9em; } /* -- Elements specifiques PHPboost -- */ /* ----------------------------------- */ /* --- Compteur de visite --- */ div#visit-counter { color: #333333; font-size: 0.9em; margin-left: 5px; margin-top: -36px; position: absolute; text-align: right; } /* --- Barre de lien rapide --- */ nav#breadcrumb { margin: 0 0 20px 10px; text-indent: 10px; } nav#breadcrumb ol { margin: 0; list-style: none; } nav#breadcrumb ol li { display: inline; } nav#breadcrumb ol li:not(.current):after { content: ''; color: #616161; } /*====================== --- Scroll to Top --- =======================*/ .scroll-to { position: fixed; z-index: 10; display: none; background-color: rgba(15, 15, 16, 0.8); border-radius: 12px; } div#visit-counter, .date {display: none;} #scroll-to-top { right: 25px; bottom: 0; padding: 2px 11px 3px 10px; transition: 0.2s; } .scroll-to i { color: rgba(255, 255, 255, 0.8); transition: 0.2s; } .scroll-to:hover i { color: rgba(255, 255, 255, 1); transition: 0.3s; } @media (min-width: 769px) { #scroll-to-top { bottom: 25px; padding: 9px 11px 11px 10px; } .scroll-to i { font-size: 1.5em; } } @media (max-width: 768px) { #scroll-to-top:hover { padding: 9px 11px 11px 10px; transition: 0.3s; } } /*====================== --- Cookie Bar --- =======================*/ .cookiebar-container { z-index: 100; left: 0; right: 0; top: 0; padding: 7px 20px; background-color: #F2F2F2; border-bottom: 1px solid #E2E2E2; font-size: 0.9em; text-align: center; } .cookiebar-container.fixed { position: fixed; } .cookiebar-content { text-align: justify; } @media (min-width: 769px) { .cookiebar-content { display: inline-block; max-width: calc(100% - 300px); vertical-align: middle; } .cookiebar-actions { display: inline-block; width: 300px; } } @media (max-width: 768px) { .cookiebar-content { margin-bottom: 5px; } .cookiebar-actions { margin: 15px 0 5px 0; } } .cookiebar-button { margin: 0 5px 0 5px; border-radius: 4px; color: #FEFEFE; } @media (max-width: 768px) { .cookiebar-button { margin: 0 10px 0 10px; } } .cookiebar-button-understand { background-color: #cccccc; border-color: #dddddd; } .cookiebar-button-understand:hover { background-color: #646464; } .cookiebar-button-allowed { background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); border-color: #000000; } .cookiebar-button-allowed:hover { background: #000000; } .cookiebar-button-declined { background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); border-color: #6d0019; } .cookiebar-button-declined:hover { background: #AA0000; } @media (max-width: 468px) { .cookiebar-more { display: block; margin: 10px 0 5px 0; } } .aboutcookie-title { font-size: 1.3em; line-height: 1.3em; font-weight: bold } .aboutcookie-title + p { margin: 0px 0 20px 0px; } footer#cookiebar-change-choice { margin-top: 10px; text-align: center; } .cookiebar-change-choice-link { text-align: center; } /*====================================== Alls Media Queries CSS applique aux écrans PC ========================================*/ @media (max-width:768px) { body {font-size: 1.4em;} div#SuperGlobal {width: auto;} header#header {margin: auto; background:none; height:35px; margin: auto;width: auto;} div#visit-counter, .date{display: none;} div#header-gsm {background-color:#ffffff; border-bottom:2px solid #cccccc; height:50px; text-align:center;} div#sub-header { background: #cccccc none repeat scroll 0 0; float: none; margin-right: 0; margin-top: 0; min-height: 35px; text-align: center; } .sub-container{display: none;} a#site-name { color: #DDDDDD; font-size: 2em; font-weight: bold; letter-spacing: 0em; line-height: 1.5em; text-shadow:none; } aside#menu-left {border-right: none;} aside#menu-right{border-left: none;} footer#footer { clear: both; margin: auto; width: 1250px; height: auto; } footer#footer .footer-infos { min-height: 40px; text-align: center; padding-top: 10px; } footer#footer {width:100%} .footer-infos a {color:#404040;} .footer-infos a:hover {color:#404040;} .footer-infos span { display: block; padding: 0 0 5px; } footer#footer .footer-infos { min-height: 40px; padding-top: 5px; text-align: center; } footer#footer .footer-infos span { color: #646464; font-size: 0.8em; } span.footer-infos-separator { display: none; } #prim-nav{display: none;} } @media (min-width:769px) { div#header-gsm{display: none;} }
cssmenu.css :
/*--------------------------------------------------------- * Theme : Thème ScoopOldPost * Par : EDN | Swan * Date : 30/07/2016 * Site web : http://easy-design.net/ * Commentaire ou autre de l'auteur # Merci de ne pas toucher au entête des fichiers CSS. *--------------------------------------------------------- * Porté par : EDN | Swan * Date V5.1 : 30/05/2017 /*-------------------------------------------------------- * Théme compatible avec deux menus (droite et gauche) le choix reste possible sur un menu *----------------------------------------------------------*/ /* -------------------------------------- cssmenu.css Contient les elements associes aux menus -----------------------------------------*/ /* -- Classes multi niveau -- */ /* -------------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu { font-size: 0; } .cssmenu, .cssmenu ul, .cssmenu ul li, .cssmenu ul li .cssmenu-title { position: relative; margin: 0; list-style: none; line-height: 1; left: auto; } .cssmenu { display: block; } header .cssmenu { display: inline-block; } .cssmenu ul, .cssmenu ul li, .cssmenu ul li .cssmenu-title { display: block; } .cssmenu:after, .cssmenu > ul:after { display: block; visibility: hidden; height: 0; content: ""; line-height: 0; clear: both; } .cssmenu-img { display: inline-block; } @media (max-width: 768px) { .cssmenu > .cssmenu-img { display: none; } .cssmenu-img { padding: 0px 5px 0px 0px; } } @media (min-width: 769px) { .cssmenu-img { padding: 10px 0 0 5px; vertical-align: top; } } .cssmenu-img-level-0 ~ ul.level-0 { display: inline-block; } .close { left: -9999px !important; height: 0; overflow: hidden; } #menu-left .cssmenu { margin-right: -9px; } #menu-right .cssmenu { margin-left: -9px; } #menu-left .cssmenu.small-screen { margin-right: 0; } #menu-right .cssmenu.small-screen { margin-left: 0; } .cssmenu li:hover > .cssmenu-title { text-decoration: none; } .cssmenu .cssmenu-title img { margin: 0 5px 0 0; vertical-align: bottom; } #top-header .cssmenu ul > li:first-child > .cssmenu-title { border-radius: 0 5px 0 0; } #top-header .cssmenu ul > li:last-child > .cssmenu-title { border-radius: 0 0 5px 5px; } #top-header .cssmenu ul > li.has-sub:first-child:hover > .cssmenu-title { border-radius: 0 0 0 0; } #top-header .cssmenu ul > li.has-sub:last-child:hover > .cssmenu-title { border-radius: 0 0 0; } .cssmenu.small-screen { width: 100%; } .cssmenu.small-screen ul { display: block; width: 100%; } .cssmenu.small-screen ul li { width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); } .cssmenu.small-screen > ul > li:last-child.has-sub { border-bottom: 1px solid rgba(120, 120, 120, 0.2); } .cssmenu.small-screen ul ul li, .cssmenu.small-screen li:hover > ul > li { height: auto; } .cssmenu.small-screen ul li .cssmenu-title, .cssmenu.small-screen ul ul li .cssmenu-title { padding: 17px; width: 100%; border-bottom: 0; } .cssmenu.small-screen ul ul li .cssmenu-title { padding: 11px; } @media (max-width: 768px) { .cssmenu.small-screen .cssmenu-img-level-0 + div { padding: 10px 40px 5px 17px; } } /* --- Variante cssmenu-horizontal --- */ #main .cssmenu-horizontal { background-color: #FFFFFF; } /* --- Variante cssmenu-group --- */ div.cssmenu-group { position: relative; display: inline-block; padding: 2px 8px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%); background-color: #FFFFFF; border-radius: 4px; border: 1px solid #999999; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25); color: #444444; cursor: pointer; } div.cssmenu-group .cssmenu-title { color: #444444; font-size: 1.2rem; font-weight: 300; text-decoration: none; } .cssmenu-group.small-screen { margin: 0 0 5px 0; } /* --- Variante cssmenu-actionslinks --- */ .cssmenu-actionslinks { margin: 0 0 20px 0; } .cssmenu-actionslinks { float: right; margin: 0 5px 5px 5px; } .cssmenu-actionslinks.small-screen { float: none; margin: 0; } .cssmenu.cssmenu-actionslinks ul li .cssmenu-title, .cssmenu.cssmenu-actionslinks ul li ul li .cssmenu-title { padding: 5px; border: none; font-weight: normal; font-size: 11px; } .cssmenu-actionslinks.small-screen ul li { border: none; } .cssmenu.cssmenu-actionslinks.small-screen ul li .cssmenu-title, .cssmenu.cssmenu-actionslinks.small-screen ul li ul li .cssmenu-title { padding: 10px 5px; } /* --- Autres variantes --- */ @media (min-width: 769px) { #cssmenu-galleryfilter ul { min-width: 130px; } } .cssmenu.cssmenu-static li.has-sub > .cssmenu-title:after, .cssmenu.cssmenu-static li.has-sub > .cssmenu-title:before { display: none; } /* -- Classes Niveau 1 -- */ /* ---------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu > ul > li { float: left; } #sub-header .cssmenu-horizontal > ul > li { position: relative; border-right: 1px solid #444444; } #sub-header .cssmenu-horizontal > ul > li:after { position:absolute; right: 1%; top: 50px; height: 100%; width: 1px; border-right: 1px solid #333333; } #main .cssmenu-horizontal > ul > li:last-child, #sub-header .cssmenu-horizontal > ul > li:last-child { border-bottom: none; } #main .cssmenu-horizontal > ul > li:last-child:after, #sub-header .cssmenu-horizontal > ul > li:last-child:after { width: 0; height: 0; } #main .cssmenu-horizontal > ul > li { position: relative; border-right: 1px solid #EFEFEF; } #main .cssmenu-horizontal.small-screen > ul > li { border-right: none; } #main .cssmenu-horizontal > ul > li:after { position:absolute; right: 1%; top: 50px; height: 100%; width: 1px; border-right: 1px solid #EEEEEE; } header .cssmenu-horizontal > ul > li:hover { border-radius : 5px 5px 5px 5px; } header .cssmenu-horizontal > ul > li.has-sub:hover { border-radius : 5px 5px 0 0; } .cssmenu-left > ul > li, .cssmenu-right > ul > li { float: none; text-align: left; } .cssmenu > ul > li > .cssmenu-title { padding: 17px; font-size: 12px; font-weight: 700; letter-spacing: 1px; } /* --- Indicateur de sous menu --- */ .cssmenu > ul > li.has-sub > .cssmenu-title { padding-right: 30px; } .cssmenu > ul > li.has-sub > .cssmenu-title:after, .cssmenu > ul > li.has-sub > .cssmenu-title:before { position: absolute; display: block; content: ''; } .cssmenu > ul > li.has-sub > .cssmenu-title:after { width: 8px; height: 2px; } .cssmenu > ul > li.has-sub > .cssmenu-title:before { width: 2px; height: 8px; transition: all 0.25s ease; } .cssmenu > ul > li.has-sub:hover > .cssmenu-title:before { height: 0; } .cssmenu-vertical > ul > li > .cssmenu-title { padding: 5px 17px 5px 6px; } .cssmenu > ul > li.has-sub > .cssmenu-title:after { top: 22px; right: 11px; } .cssmenu > ul > li.has-sub > .cssmenu-title:before { top: 19px; right: 14px; } .cssmenu > ul > li.has-sub:hover > .cssmenu-title:before { top: 23px; } .cssmenu-vertical > ul > li.has-sub > .cssmenu-title:after { top: 11px; } .cssmenu-vertical > ul > li.has-sub > .cssmenu-title:before { top: 8px; } /* --- Position des sous menu --- */ .cssmenu li:hover > ul { left: auto ; } aside .cssmenu-left li:hover > ul { left: 100% ; top: 0; } aside .cssmenu-right li:hover > ul { right: 100%; top: 0; } aside .cssmenu-left.cssmenu-static li:hover > ul { left: 0; top: 0; } aside .cssmenu-right.cssmenu-static li:hover > ul { right: 0; top: 0; } .cssmenu.cssmenu-actionslinks li:hover > ul { right: 0; top: 100%; } .cssmenu.cssmenu-actionslinks ul li:hover > ul { right: 100%; top: 0; } .cssmenu.small-screen li:hover > ul { left: 0; } .cssmenu.cssmenu-right.small-screen li:hover > ul { right: 0; } .cssmenu.cssmenu-left.small-screen li:hover > ul { left: 0; } /* --- Variante cssmenu-group --- */ .cssmenu-group > ul { text-align: center; font-size: 0; } .cssmenu-group > ul > li { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%); background-color: #FFFFFF; border: 1px solid #999999; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25); color: #444444; cursor: pointer; } .cssmenu.cssmenu-group > ul > li { display: inline-block; float: none; } .cssmenu.cssmenu-group > ul > li:hover { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 40%,rgba(56, 56, 56, 0.18) 100%); background-color: #F0F0F0; border-bottom-color: #B3B3B3; } .cssmenu-group > ul > li:first-child { border-radius: 4px 0 0 4px; border-left: 1px solid rgba(0, 0, 0, 0.1); } .cssmenu-group > ul > li:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid rgba(0, 0, 0, 0.1); } .cssmenu-group > ul > li.current { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.18) 0%,rgba(56, 56, 56, 0.18) 100%); background-color: #F0F0F0; border-top-color: #B3B3B3; } .cssmenu.cssmenu-group > ul > li > .cssmenu-title { padding: 4px 12px; color: #444444; font-size: 1.1rem; font-weight: 300; text-decoration: none; } .cssmenu-group.small-screen > ul.open { display: table !important; margin: auto; width: auto; } .cssmenu-group.small-screen > ul > li, .cssmenu-group.small-screen > ul > li:hover { float: left; width: auto; background: transparent; border-radius: 0; border: none; clear: both; } .cssmenu.cssmenu-group.small-screen > ul > li > .cssmenu-title { padding: 10px 12px; } .cssmenu-group.small-screen > ul > li:first-child { border-radius: 4px 4px 0 0; } .cssmenu-group.small-screen > ul > li:last-child { border-radius: 0 0 4px 4px; } /* --- Variante cssmenu-actionslinks --- */ .cssmenu-actionslinks.small-screen > ul > li:last-child { padding: 0 0 10px 0; border-bottom: 1px solid rgba(120, 120, 120, 0.2); } .cssmenu.cssmenu-static li > .cssmenu-title { border: none; } .cssmenu.cssmenu-static > ul > li > .cssmenu-title { text-align: center; } /* --- Variante cssmenu-static --- */ #main .cssmenu.cssmenu-static, #top-footer .cssmenu.cssmenu-static { margin: 5px 0; background-color: #ffffff; border: 1px solid #BEBEBE; } .cssmenu.cssmenu-static > ul > li { padding: 0 10px 0 10px; } footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #2A2A2A; } #top-footer .cssmenu.cssmenu-static > ul > li { border-right: 1px solid #DDDDDD; } footer .cssmenu.cssmenu-static > ul > li:last-child, #top-footer .cssmenu.cssmenu-static > ul > li:last-child { border-right: none; } .cssmenu.cssmenu-static > ul > li > .cssmenu-title { margin: 0 0 20px 0; padding-bottom: 5px; border-bottom: 1px solid #25466C; font-size: 17px; font-weight: bold; } /* -- Classes Niveau 2 -- */ /* ---------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu ul ul { position: absolute; left: -9999px; z-index: 10; } .cssmenu ul ul li { height: 0; transition: all 0.25s ease; } .cssmenu li:hover > ul > li { height: auto; vertical-align: middle; } .cssmenu ul ul ul { top: 0; } .cssmenu ul ul li .cssmenu-title { padding: 11px 15px; font-size: 12px; } .cssmenu ul ul li .cssmenu-title { padding: 11px 30px 11px 15px; border-bottom: 1px solid rgba(150, 150, 150, 0.15); white-space: nowrap; } /* --- Indicateur de sous menu --- */ .cssmenu ul ul li:last-child > .cssmenu-title, .cssmenu ul ul li.last-item > .cssmenu-title { border-bottom: 0; } .cssmenu ul ul li.has-sub > .cssmenu-title:after, .cssmenu ul ul li.has-sub > .cssmenu-title:before { position: absolute; display: block; content: ''; } .cssmenu ul ul li.has-sub > .cssmenu-title:after { width: 8px; height: 2px; } .cssmenu ul ul li.has-sub > .cssmenu-title:before { width: 2px; height: 8px; transition: all .25s ease; } .cssmenu ul ul li.has-sub > .cssmenu-title:after { top: 16px; right: 11px; } .cssmenu ul ul li.has-sub > .cssmenu-title:before { top: 13px; right: 14px; } .cssmenu ul ul > li.has-sub:hover > .cssmenu-title:before { top: 17px; height: 0; } .cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:after, .cssmenu.small-screen ul ul li.has-sub > .cssmenu-title:before { display: none; } .cssmenu.small-screen ul.level-1 li .cssmenu-title { padding-left: 25px; } .cssmenu.small-screen ul.level-2 li .cssmenu-title, .cssmenu.cssmenu-actionslinks.small-screen ul li ul li ul li .cssmenu-title { padding-left: 35px; } .cssmenu.small-screen ul.level-3 li .cssmenu-title { padding-left: 45px; } .cssmenu.small-screen ul.level-4 li .cssmenu-title { padding-left: 55px; } .cssmenu.small-screen ul ul li .cssmenu-title { background: none; } .cssmenu.small-screen ul ul, .cssmenu.small-screen ul ul ul { position: relative; left: 0; width: 100%; margin: 0; border: none; text-align: left; } /* --- Variantes --- */ .cssmenu-horizontal ul ul ul { margin-left: 100%; } .cssmenu-vertical ul ul { position: relative; } aside .cssmenu-vertical ul ul { position: absolute; margin-top: -1px; border: 1px solid #BEBEBE; } header .cssmenu-vertical ul ul li .cssmenu-title, #main .cssmenu-vertical ul ul li .cssmenu-title { padding: 5px 15px; width: 100%; border-bottom: none; } .cssmenu-static ul ul { position: relative; left: 0; z-index: 0; } .cssmenu-static ul ul li { height: auto; } .cssmenu-static ul ul ul { margin-left: 0; } .cssmenu.cssmenu-static ul ul > li > .cssmenu-title { padding-left: 10px; } .cssmenu.cssmenu-static ul ul ul > li > .cssmenu-title { padding-left: 20px; } .cssmenu-actionslinks ul li.has-sub .cssmenu-title:after { top: 9px; } .cssmenu-actionslinks ul li.has-sub .cssmenu-title:before { top: 6px; } /* -- Personnalisation graphique -- */ /* -------------------------------- */ /* --- Niveau 1 --- */ header .cssmenu > ul > li > .cssmenu-title {color: #333333;} .cssmenu.cssmenu-vertical > ul > li > .cssmenu-title { color: #444444; } #main .cssmenu > ul > li > .cssmenu-title { color: #444444; } .cssmenu-actionslinks > ul > li > .cssmenu-title { color: #666666; } footer .cssmenu-static > ul > li > .cssmenu-title { color: #DDDDDD; } #top-footer .cssmenu-static > ul > li > .cssmenu-title { color: #444444; } header .cssmenu li:hover > .cssmenu-title {color: #AAAAAA;} .cssmenu.cssmenu-vertical li:hover > .cssmenu-title { color: #666666; } #main .cssmenu li:hover > .cssmenu-title { color: #666666; } @media (min-width: 769px) { header .cssmenu-horizontal > ul > li:hover { background-color: #333333; } #main .cssmenu-horizontal > ul > li:hover { background-color: #F9F9F9; } } /* --- Niveau 2 --- */ .cssmenu ul ul li .cssmenu-title {color: #333333;} #main .cssmenu ul ul li .cssmenu-title { color: #333333; } .cssmenu.cssmenu-vertical ul ul li .cssmenu-title { color: #333333; } .cssmenu-actionslinks li ul li .cssmenu-title { color: #666666; } aside .cssmenu-static li ul li .cssmenu-title, #top-footer .cssmenu-static li ul li .cssmenu-title { color: #666666; } .cssmenu ul ul li:hover > .cssmenu-title { color: #333333; } header .cssmenu ul ul li:hover > .cssmenu-title {color: #CCCCCC;} #main .cssmenu ul ul li:hover > .cssmenu-title { color: #555555; } .cssmenu.cssmenu-vertical ul ul li:hover > .cssmenu-title { color: #555555; } .cssmenu-actionslinks li:hover > .cssmenu-title { color: #333333; } footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #FFFFFF; } #top-footer .cssmenu-static ul ul li:hover > .cssmenu-title { color: #262626; } .cssmenu.cssmenu-vertical ul ul li .cssmenu-title { background-color: #FFFFFF; } .cssmenu-actionslinks ul li:hover > .cssmenu-title:after { background-color: #333333; } header .cssmenu ul ul li .cssmenu-title { background-color: #333333; } .cssmenu-actionslinks li:hover > .cssmenu-title { background-color: #DDDDDD; } .cssmenu-actionslinks.small-screen li:hover > .cssmenu-title { background-color: transparent;} #main .cssmenu-horizontal ul ul { background-color: #F9F9F9; } #main .cssmenu-horizontal ul ul > li:hover { background-color: #F1F1F1; } #cssmenu-galleryfilter ul ul li .cssmenu-title { background-color: #FFFFFF; } #cssmenu-galleryfilter ul ul li:hover .cssmenu-title { background-color: #DDDDDD; } /* --- Personnalisation de l'indicateur de sous-Menu --- */ .cssmenu li.has-sub > .cssmenu-title:after, .cssmenu li.has-sub > .cssmenu-title:before { background-color: #DDDDDD; } .cssmenu-vertical li.has-sub > .cssmenu-title:after, .cssmenu-vertical li.has-sub > .cssmenu-title:before { background-color: #444444; } /* -- Bouton responsive -- */ /* ----------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu .menu-button { display: none; position: relative; list-style: none; line-height: 1; font-size: 1.2rem; } .cssmenu .menu-button:before { font-size: 1.3rem; } .cssmenu.small-screen .menu-button { display: block; padding: 17px 40px 17px 17px; text-transform: uppercase; font-weight: 700; cursor: pointer; } #top-footer .cssmenu.small-screen .menu-button { color: #444444; } .cssmenu.small-screen .menu-button:after, .cssmenu.small-screen .menu-button:before { position: absolute; display: block; content: ''; } .cssmenu.small-screen .menu-button:after { height: 4px; width: 20px; border-width: 2px 0 2px 0; border-style: solid; } .cssmenu.small-screen .menu-button:before { height: 2px; width: 20px; background-color: #DDDDDD; font-size: 1.3rem; } .cssmenu.small-screen .menu-button.menu-opened:after { height: 2px; border: 0; transform: rotate(45deg); } .cssmenu.small-screen .menu-button.menu-opened:before { transform: rotate(-45deg); } /* --- Position du bouton --- */ .cssmenu.small-screen .menu-button:after { top: 22px; right: 17px; } .cssmenu.small-screen .menu-button:before { top: 16px; right: 17px; } .cssmenu.small-screen .menu-button.menu-opened:after, .cssmenu.small-screen .menu-button.menu-opened:before { top: 23px; width: 15px; } /* --- Variante cssmenu-actionslinks --- */ .cssmenu .menu-button:before { font-size: 1.3rem; } .cssmenu-actionslinks .menu-button { float: right; position: relative; display: inline-block; padding: 4px 12px 4px 12px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%,rgba(56,56, 56, 0.18) 100%); background-color: #FFFFFF; border: 1px solid #999999; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 rgba(0, 0, 0, 0.25); border-radius: 4px; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; color: #444444; text-align: center; cursor: pointer; -webkit-font-smoothing: antialiased; } @media (min-width: 769px) { .cssmenu-actionslinks .menu-button { font-size: 0; } } #main .cssmenu-actionslinks.small-screen .menu-button { float: none; background-color: transparent; background-image: none; border: none; font-family: "Trebuchet MS",Verdana,"Bitstream Vera Sans",Times,serif; text-align: left; } .cssmenu-actionslinks .menu-button + ul { left: -9999px; } .cssmenu-actionslinks .menu-button:hover + ul, .cssmenu-actionslinks .menu-button + ul:hover{ left: auto; } .cssmenu-actionslinks.small-screen .menu-button:hover + ul, .cssmenu-actionslinks.small-screen .menu-button + ul:hover { left: -9999px; } .cssmenu-actionslinks.small-screen .menu-button + ul.open, .cssmenu-actionslinks.small-screen .menu-button + ul:hover.open { left: auto; } .cssmenu-actionslinks .menu-button:before { content: "\f013"; } .cssmenu-tools .menu-button:before { content: "\f0c9"; } .cssmenu-actionslinks ul { position: absolute; z-index: 10; right: 0; top: 23px; padding: 5px 0; width: 170px; background-color: #FFFFFF; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border: 1px solid #AAAAAA; font-size: 11px; } .cssmenu-actionslinks.small-screen ul { top: 100%; border: none; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .cssmenu-actionslinks.small-screen li.has-sub > a, .cssmenu-actionslinks.small-screen li.has-sub > .submenu-button { display:none; } .cssmenu-actionslinks.small-screen li.has-sub > ul { display: block !important; padding: 0; } /* --- Variante tools --- */ .cssmenu-tools.small-screen li.has-sub > a, .cssmenu-tools.small-screen li.has-sub > .submenu-button { display: block; } /* --- Variante Static --- */ .cssmenu-static.small-screen .menu-button { cursor: default; } .cssmenu-static.small-screen .menu-button:after, .cssmenu-static.small-screen .menu-button:before { display: none; } .cssmenu-static.small-screen ul li { border-top: none; } .cssmenu-static.small-screen > ul > li > .cssmenu-title, .cssmenu-static.small-screen ul ul > li > .cssmenu-title { padding-bottom: 5px; } /* --- Personnalisation graphique du bouton responsive--- */ .cssmenu.small-screen .menu-button:after { border-color: #DDDDDD; } #main .cssmenu.small-screen .menu-button { color: #111111; } .cssmenu.small-screen .menu-button:before { background-color: #DDDDDD; } .cssmenu.small-screen .menu-button.menu-opened:after, .cssmenu.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; } header .cssmenu.small-screen .menu-button.menu-opened:after, header .cssmenu.small-screen .menu-button.menu-opened:before {background-color: #CCCCCC;} header .cssmenu-vertical.small-screen .menu-button.menu-opened:after, header .cssmenu-vertical.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; } header .cssmenu-tools.small-screen .menu-button.menu-opened:after, header .cssmenu-tools.small-screen .menu-button.menu-opened:before { background-color: #DDDDDD; } /* -- Bouton submenu -- */ /* -------------------- */ /* --- Classes generales cssmenu --- */ .cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:before, .cssmenu.small-screen > ul > li.has-sub > .cssmenu-title:after { display: none; } .cssmenu.small-screen .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; height: 46px; width: 46px; border-left: 1px solid rgba(120, 120, 120, 0.2); cursor: pointer; } .cssmenu.small-screen ul ul .submenu-button { height: 34px; width: 34px; } .cssmenu.small-screen .submenu-button:after, .cssmenu.small-screen .submenu-button:before { position: absolute; display: block; content: ''; } .cssmenu.small-screen .submenu-button:after { width: 8px; height: 2px; } .cssmenu.small-screen .submenu-button:before { width: 2px; height: 8px; } .cssmenu.small-screen .submenu-button.submenu-opened:before { display: none; } .cssmenu-actionslinks.small-screen .submenu-button { height: 31px; width: 31px; border: none; } /* --- Variante Static --- */ .cssmenu-static.small-screen .submenu-button, .cssmenu-static.small-screen .submenu-button:after, .cssmenu-static.small-screen .submenu-button:before { display: none; } .cssmenu-static.small-screen ul ul, .cssmenu-static.small-screen ul ul ul { display: block !important; } /* --- Personnalisation background Bouton submenu --- */ .cssmenu.small-screen .submenu-button:after { background-color: #DDDDDD; } .cssmenu.small-screen .submenu-button:before { background-color: #DDDDDD; } .cssmenu.small-screen .submenu-button.submenu-opened:after {background-color: #CCCCCC;} .cssmenu.small-screen .submenu-button.submenu-opened { background-color: #262626; } #top-header .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(255, 255, 255, 0.05); } .cssmenu-actionslinks.small-screen .submenu-button.submenu-opened { background-color: #DDDDDD; } #menu-left .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); } #menu-right .cssmenu.small-screen .submenu-button.submenu-opened { background-color: rgba(120, 120, 120, 0.2); } /* --- Postion icone Submenu --- */ .cssmenu.small-screen .submenu-button:after { top: 22px; right: 19px; } .cssmenu.small-screen .submenu-button:before { top: 19px; right: 22px; } .cssmenu.small-screen ul ul .submenu-button:after { top: 15px; right: 13px; } .cssmenu.small-screen ul ul .submenu-button:before { top: 12px; right: 16px; } .cssmenu-actionslinks.small-screen .submenu-button:after { top: 14px; right: 11px; } .cssmenu-actionslinks.small-screen .submenu-button:before { top: 11px; right: 14px; }
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Cordialement.
Sébastien Chauveau : journaliste, producteur, réalisateur
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Cordialement.
Sébastien Chauveau : journaliste, producteur, réalisateur
Swan Membre non connecté
Booster Mortier
- Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
On ne voit plus les liens à l’intérieur des menus.
Dans cssmenu.css à la ligne 642, replace la couleur comme ceci :
Code CSS :
.cssmenu ul ul li .cssmenu-title { color: #AAAAAA; }
Swan.
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
sch Membre non connecté
Booster Fusée
- Booster Fusée
- Voir le profil du membre sch
- Inscrit le : 28/09/2010
- Site internet
- Groupes :
Merci beaucoup
@Swan
Est-ce bon du coup depuis chez toi ? Ou de chez quelqu'un d'autre d'ailleurs ?
Cordialement.
Sébastien Chauveau : journaliste, producteur, réalisateur
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Swan Membre non connecté
Booster Mortier
- Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Swan
Édité par Swan Le 17/09/2017 à 15h14
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie