Structure d'un thème

Fichier cssmenu.css

Dernière mise à jour : 18/02/2019 à 21h19
Table des matières
  1. Classes multi niveaux
    1. Classes générales cssmenu
    2. Variante cssmenu-horizontal
    3. Variante cssmenu-group
    4. Variante cssmenu-actionslinks
    5. Autres variantes
  2. Classes Niveau 1
    1. Classes générales cssmenu
    2. Indicateur de sous menu
    3. Position des sous menu
    4. Variante cssmenu-group
    5. Variante cssmenu-actionslinks
    6. Variante cssmenu-static
  3. Classes Niveau 2
    1. Classes générales cssmenu
    2. Indicateur de sous menu
    3. Variantes
  4. Personnalisation graphique
    1. Niveau 1
    2. Niveau 2
    3. Personnalisation de l'indicateur de sous-Menu
  5. Bouton responsive
    1. Classes générales cssmenu
    2. Position du bouton
    3. Variante cssmenu-actionslinks
    4. Variante Static
    5. Personnalisation graphique du bouton responsive
  6. Bouton submenu
    1. Classes générales cssmenu
    2. Variante Static
    3. Personnalisation background Bouton submenu
    4. Postion icone Submenu

Le fichier cssmenu.css contient les éléments associés aux menus phpboost.

Classes multi niveaux



Classes générales cssmenu


Code CSS : 
.cssmenu,
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul li .cssmenu-title {
    display: block;
    position: relative;
    margin: 0;
    list-style: none;
    line-height: 1;
    left: auto;
}
.cssmenu:after,
.cssmenu > ul:after {
    display: block;
    visibility: hidden;
    height: 0;
    content: "";
    line-height: 0;
    clear: both;
}
.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;
}


Variante cssmenu-horizontal


Code CSS : 
#main .cssmenu-horizontal {
    background-color: #FFFFFF;
    border: 1px #BEBEBE solid;
}


Variante cssmenu-group


Code CSS : 
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;
}



Code CSS : 
.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


Code CSS : 
@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 générales cssmenu


Code CSS : 
.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


Code CSS : 
.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


Code CSS : 
.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


Code CSS : 
.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;
}



Code CSS : 
.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


Code CSS : 
#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 générales cssmenu


Code CSS : 
.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


Code CSS : 
.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


Code CSS : 
.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


Code CSS : 
header .cssmenu > ul > li > .cssmenu-title                     { color: #DDDDDD; }
.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: #FFFFFF; }
.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


Code CSS : 
.cssmenu ul ul li .cssmenu-title                             { color: #DDDDDD; }
#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: #FFFFFF; }
#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


Code CSS : 
.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 générales cssmenu


Code CSS : 
.cssmenu #menu-button {
    display: none;
    position: relative;
    list-style: none;
    line-height: 1;
}
.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


Code CSS : 
.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; }



Code CSS : 
.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-size: 0;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #444444;
    text-align: center;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}
#main .cssmenu-actionslinks.small-screen #menu-button {
    float: none;
    background-color: transparent;
    background-image: none;
    border: none;
    font-size: 100%;
    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 Static


Code CSS : 
.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


Code CSS : 
.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: #FFFFFF; }
header .cssmenu-vertical.small-screen #menu-button.menu-opened:after,
header .cssmenu-vertical.small-screen #menu-button.menu-opened:before     { background-color: #DDDDDD; }


Bouton submenu


Classes générales cssmenu



Code CSS : 
.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


Code CSS : 
.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


Code CSS : 
.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: #FFFFFF; }
.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


Code CSS : 
.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; }
Cette page a été vue 6920 fois