Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » как сделать под меню на css по клику вместо наведения ?

как сделать под меню на css по клику вместо наведения ?

     16.04.2016    Все вопросы » Шаблоны (TPL)    2025

вопрос
У меня есть меню со своими подменюхами, проблема в том что при наведении подменю открывается, но мне нужно сделать так чтобы подменю открывалось не по наведению и по клику и не закрывалось пока не кликнуть обратно.
Прошу помогите кто в CSS хорошо разбирается. Заранее огромное спасибо!

Вот код самого меню:
/**/
/* defaults */
/**/
.sky-mega-menu,
.sky-mega-menu * {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;
    background: none;
}
.sky-mega-menu {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/**/
/* level 1 */
/**/
.sky-mega-menu {
    position: relative;
    z-index: 2;
    background: #f2f2f2;
    font-size: 0;
    font-weight: bold;
    line-height: 0;
    text-align: right;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.sky-mega-menu:after {
    content: '';
    display: table;
    clear: both;
}
.sky-mega-menu li {
    position: relative;
    display: inline-block;
    float: left;
    padding: 5px;
    border-style: solid;
    border-color: rgba(0,0,0,.1);
    border-right-width: 1px;
    font-size: 13px;
    line-height: 45px;
    text-align: left;
    white-space: nowrap;
}
.sky-mega-menu li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    color: #323d55;
    transition: background 0.4s, color 0.4s;
    -o-transition: background 0.4s, color 0.4s;
    -ms-transition: background 0.4s, color 0.4s;
    -moz-transition: background 0.4s, color 0.4s;
    -webkit-transition: background 0.4s, color 0.4s;
}
.sky-mega-menu li > div {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -9999px;
    margin-top: 8px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity: 0;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.sky-mega-menu li > div:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;    
}
.sky-mega-menu li > div:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 24px;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(255,255,255,0.9);
    border-left: 5px solid transparent;
}
.sky-mega-menu li:hover > a,
.sky-mega-menu li.current > a {
    background: #2da5da;
    color: #fff;
}
.sky-mega-menu li:hover > div {
    left: 0;
    opacity: 1;
    -webkit-transform: translate(0, 0);
}
.sky-mega-menu .right {
    float: none;
    border-right-width: 0;
    border-left-width: 1px;
}
.sky-mega-menu .right > div {
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right:hover > div {
    right: 0;
    left: auto;
}
.sky-mega-menu .right:hover > div:before {
    right: 24px;
    left: auto;
}
.sky-mega-menu .switcher {
    display: none;
}


/**/
/* level 2+ */
/**/
.sky-mega-menu li li {
    display: block;
    float: none;
    border-width: 0;
    border-top-width: 1px;
    line-height: 21px;
    white-space: normal;
}
.sky-mega-menu li li:first-child {
    border-top: 0;
}
.sky-mega-menu li li a {
    padding-top: 12px;
    padding-bottom: 12px;
}
.sky-mega-menu li li > div {
    top: 0;
    margin: 0 0 0 8px;
}
.sky-mega-menu li li > div:after {
    top: 0;
    right: 100%;
    bottom: auto;
    left: auto;
    width: 8px;
    height: 100%;
}
.sky-mega-menu li li > div:before {
    top: 22px;
    right: 100%;
    bottom: auto;
    left: auto;
    border-top: 5px solid transparent;
    border-right: 5px solid rgba(255,255,255,0.9);
    border-bottom: 5px solid transparent;
}
.sky-mega-menu li li:hover > div {
    left: 100%;
}
.sky-mega-menu .right li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right li > div:after {
    right: auto;
    left: 100%;
}
.sky-mega-menu .right li > div:before {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 5px solid rgba(255,255,255,0.9);
}
.sky-mega-menu .right li:hover > div {
    right: 100%;
    left: auto;
}


/**/
/* positions */
/**/
.sky-mega-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.sky-mega-menu-pos-bottom li > div {
    top: auto;
    bottom: 100%;
    margin: 0 0 8px;
    -o-transform-origin-y: 100%;
    -ms-transform-origin-y: 100%;
    -moz-transform-origin-y: 100%;
    -webkit-transform-origin-y: 100%;
}
.sky-mega-menu-pos-bottom li > div:after {
    top: 100%;
    bottom: auto;
}
.sky-mega-menu-pos-bottom li > div:before {
    top: 100%;
    bottom: auto;
    border-top: 5px solid rgba(255,255,255,0.9);
    border-right: 5px solid transparent;
    border-bottom: none;
    border-left: 5px solid transparent;
}
.sky-mega-menu-pos-bottom li li > div {
    top: auto;    
    bottom: 0;
}
.sky-mega-menu-pos-bottom li li > div:before {
    top: auto;
    bottom: 22px;
}
.sky-mega-menu-pos-bottom.sky-mega-menu-fixed {
    top: auto;
    bottom: 0;
}

.sky-mega-menu-pos-left li,
.sky-mega-menu-pos-right li {
    display: block;
    float: none;
    border-width: 0;
    border-top-width: 1px;
}
.sky-mega-menu-pos-left li:first-child,
.sky-mega-menu-pos-right li:first-child {
    border-top: 0;
}
.sky-mega-menu-pos-left li > div,
.sky-mega-menu-pos-right li > div {
    top: 0;    
}
.sky-mega-menu-pos-left li > div {
    margin: 0 0 0 8px;
}
.sky-mega-menu-pos-right li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
}
.sky-mega-menu-pos-left li > div:after,
.sky-mega-menu-pos-right li > div:after {
    top: 0;
    bottom: auto;
    width: 8px;
    height: 100%;
}
.sky-mega-menu-pos-left li > div:after {
    right: 100%;
    left: auto;
}
.sky-mega-menu-pos-right li > div:after {
    right: auto;
    left: 100%;
}
.sky-mega-menu-pos-left li > div:before,
.sky-mega-menu-pos-right li > div:before {
    top: 22px;
    bottom: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.sky-mega-menu-pos-left li > div:before {
    right: 100%;
    left: auto;
    border-right: 5px solid rgba(255,255,255,0.9);
}
.sky-mega-menu-pos-right li > div:before {
    right: auto;
    left: 100%;
    border-left: 5px solid rgba(255,255,255,0.9);
}
.sky-mega-menu-pos-left li:hover > div {
    left: 100%;
}
.sky-mega-menu-pos-right li:hover > div {
    right: 100%;
    left: auto;
}
.sky-mega-menu-pos-left .bottom > div,
.sky-mega-menu-pos-right .bottom > div {
    top: auto;
    bottom: 0;
    -o-transform-origin-y: 100%;
    -ms-transform-origin-y: 100%;
    -moz-transform-origin-y: 100%;
    -webkit-transform-origin-y: 100%;
}
.sky-mega-menu-pos-left .bottom > div:before,
.sky-mega-menu-pos-right .bottom > div:before {
    top: auto;
    bottom: 22px;
}
.sky-mega-menu-pos-right li li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
}
.sky-mega-menu-pos-right li li > div:after {
    right: auto;
    left: 100%;
}
.sky-mega-menu-pos-right li li > div:before {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 5px solid rgba(255,255,255,0.9);
}
.sky-mega-menu-pos-right li li:hover > div {
    right: 100%;
    left: auto;
}
.sky-mega-menu-pos-left.sky-mega-menu-fixed {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: auto;
}
.sky-mega-menu-pos-right.sky-mega-menu-fixed {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
}


/**/
/* animations */
/**/
.sky-mega-menu-anim-slide li > div {
    -o-transform: translate(0, 60px);
    -ms-transform: translate(0, 60px);
    -moz-transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);    
}
.sky-mega-menu-pos-bottom.sky-mega-menu-anim-slide li > div {
    -o-transform: translate(0, -60px);
    -ms-transform: translate(0, -60px);
    -moz-transform: translate(0, -60px);
    -webkit-transform: translate(0, -60px);
}
.sky-mega-menu-anim-slide li:hover > div {
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);    
}
.sky-mega-menu-anim-scale li > div {
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
}
.sky-mega-menu-anim-scale li:hover > div {
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}
.sky-mega-menu-anim-flip {
    perspective: 2000px;
    -o-perspective: 2000px;
    -moz-perspective: 2000px;
    -webkit-perspective: 2000px;
}
.sky-mega-menu-anim-flip li > div {
    transform-style: preserve-3d;
    -o-transform: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-75deg);
    -o-transform: rotateX(-75deg);
    -moz-transform: rotateX(-75deg);
    -webkit-transform: rotateX(-75deg);
}
.sky-mega-menu-anim-flip li:hover > div {
    transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
}


/**/
/* grid */
/**/
.sky-mega-menu .grid-column {
    float: left;
    border-color: #d9d9d9;
    border-left-width: 1px;
    border-left-style: solid;
}
.sky-mega-menu .grid-column:first-child {
    margin-left: 0;
    border-left: 0;
}
.sky-mega-menu .grid-column2,
.sky-mega-menu .grid-container2 {
    width: 155px;
}
.sky-mega-menu .grid-column3,
.sky-mega-menu .grid-container3 {
    width: 233px;
}
.sky-mega-menu .grid-column4,
.sky-mega-menu .grid-container4 {
    width: 311px;
}
.sky-mega-menu .grid-column5,
.sky-mega-menu .grid-container5 {
    width: 389px;
}
.sky-mega-menu .grid-column6,
.sky-mega-menu .grid-container6 {
    width: 467px;
}
.sky-mega-menu .grid-column7,
.sky-mega-menu .grid-container7 {
    width: 545px;
}
.sky-mega-menu .grid-column8,
.sky-mega-menu .grid-container8 {
    width: 623px;
}
.sky-mega-menu .grid-column9,
.sky-mega-menu .grid-container9 {
    width: 701px;
}
.sky-mega-menu .grid-column10,
.sky-mega-menu .grid-container10 {
    width: 779px;
}
.sky-mega-menu .grid-column11,
.sky-mega-menu .grid-container11 {
    width: 857px;
}
.sky-mega-menu .grid-column12,
.sky-mega-menu .grid-container12 {
    width: 935px;
}


/**/
/* icons */
/**/
.sky-mega-menu li a > .fa {
    display: block;
    float: left;
    width: 16px;
    margin: 0 10px 0 -4px;
  font-size: 16px;
  line-height: inherit;
  text-align: center;
}
.sky-mega-menu li a > .fa-single {
    float: none;
    margin: 0;
}
.sky-mega-menu li a > .fa-indicator {
    position: relative;
    top: -1px;
    float: none;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0 -10px 0 10px;
    font-size: 9px;
    line-height: 1;
    text-align: right;
}
.sky-mega-menu li li a > .fa-indicator {
    top: 0;
    float: right;
    display: block;
    line-height: inherit;
}


/**/
/* forms */
/**/
.sky-mega-menu form fieldset {
    display: block;    
    padding: 25px 30px;
}
.sky-mega-menu form fieldset + fieldset {
    border-top: 1px solid rgba(0,0,0,.1);
}
.sky-mega-menu form section {
    margin-bottom: 20px;
}
.sky-mega-menu form .input,
.sky-mega-menu form .textarea,
.sky-mega-menu form .radio,
.sky-mega-menu form .checkbox,
.sky-mega-menu form .button {
    position: relative;
    display: block;
}
.sky-mega-menu form .input input,
.sky-mega-menu form .textarea textarea {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    height: 39px;
    padding: 8px 10px;
    outline: none;
    border: 2px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    font: 13px/19px 'Open Sans', Helvetica, Arial, sans-serif;
    color: #404040;
    appearance: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.3s;
    -o-transition: border-color 0.3s;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
}
.sky-mega-menu form .textarea textarea {
    height: auto;
    resize: none;
}
.sky-mega-menu form .button {
    float: right;
    height: 39px;
    overflow: hidden;
    margin-left: 20px;
    padding: 0 20px;
    outline: none;
    border: 0;
    background-color: #2da5da;
    font: 300 13px/39px 'Open Sans', Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
}
.sky-mega-menu form .fa-append {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 29px;
    height: 29px;
    padding-left: 3px;
    border-left: 1px solid #e5e5e5;
    font-size: 15px;
    line-height: 29px;
    text-align: center;
    color: #ccc;
}
.sky-mega-menu form .input .fa-append + input,
.sky-mega-menu form .textarea .fa-append + textarea {
    padding-right: 46px;
}
.sky-mega-menu form .row {
    margin: 0 -15px;
}
.sky-mega-menu form .row:after {
    content: '';
    display: table;
    clear: both;
}
.sky-mega-menu form .col {
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.sky-mega-menu form .col-6 {
    width: 50%;
}
.sky-mega-menu form .input:hover input,
.sky-mega-menu form .textarea:hover textarea,
.sky-mega-menu form .checkbox:hover i {
    border-color: #8dc9e5;
}
.sky-mega-menu form .button:hover {
    opacity: 1;
}
.sky-mega-menu form .input input:focus,
.sky-mega-menu form .textarea textarea:focus,
.sky-mega-menu form .checkbox input:focus + i {
    border-color: #2da5da;
}
.sky-mega-menu .search {
    border-left: 0;
}
.sky-mega-menu .search .input {
    margin: 3px 3px 3px 3px;
}
.sky-mega-menu .search .input input {
    width: 240px;
    padding-right: 65px;
}
.sky-mega-menu .search .button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}


/**/
/* pad */
/**/
@media screen and (max-width: 1000px) {
    .sky-mega-menu li a {
        padding: 0 15px;
    }
    .sky-mega-menu li a > .fa-indicator {
        margin-right: -5px;
    }
    
    .sky-mega-menu .grid-column2,
    .sky-mega-menu .grid-container2 {
        width: 117px;
    }
    .sky-mega-menu .grid-column3,
    .sky-mega-menu .grid-container3 {
        width: 176px;
    }
    .sky-mega-menu .grid-column4,
    .sky-mega-menu .grid-container4 {
        width: 235px;
    }
    .sky-mega-menu .grid-column5,
    .sky-mega-menu .grid-container5 {
        width: 294px;
    }
    .sky-mega-menu .grid-column6,
    .sky-mega-menu .grid-container6 {
        width: 353px;
    }
    .sky-mega-menu .grid-column7,
    .sky-mega-menu .grid-container7 {
        width: 412px;
    }
    .sky-mega-menu .grid-column8,
    .sky-mega-menu .grid-container8 {
        width: 471px;
    }
    .sky-mega-menu .grid-column9,
    .sky-mega-menu .grid-container9 {
        width: 530px;
    }
    .sky-mega-menu .grid-column10,
    .sky-mega-menu .grid-container10 {
        width: 589px;
    }
    .sky-mega-menu .grid-column11,
    .sky-mega-menu .grid-container11 {
        width: 648px;
    }
    .sky-mega-menu .grid-column12,
    .sky-mega-menu .grid-container12 {
        width: 707px;
    }
}


/**/
/* phone */
/**/
@media screen and (max-width: 767px) {
    body {
    -webkit-text-size-adjust: none;
  }
    .sky-mega-menu .grid-column {
        float: none;
        width: auto;
        margin: 0;
        border: 0;
        border-top: 1px solid #d9d9d9;
    }
    .sky-mega-menu .grid-column:first-child {
        border-top: 0;
    }
  .sky-mega-menu form fieldset {
      display: block;
      padding: 15px 20px;
  }
    .sky-mega-menu form section {
        margin-bottom: 10px;
    }
  .sky-mega-menu form .row {
      margin: 0 -10px;
  }
  .sky-mega-menu form .col {
        padding-right: 10px;
        padding-left: 10px;
    }
    
    
    .sky-mega-menu-response-to-stack > li {
        display: block;
        float: none;
        border: 0;
        border-top: 1px solid #d9d9d9;
    }
    .sky-mega-menu-response-to-stack > li:first-child {
        border-top: 0;
    }
    .sky-mega-menu-response-to-switcher > li {
        display: none;
        float: none;
        border: 0;
    }
    .sky-mega-menu-response-to-switcher > .switcher {
        display: block;
    }
    .sky-mega-menu-response-to-switcher:hover > li {
        display: block;
        border-top: 1px solid #d9d9d9;        
    }
    .sky-mega-menu-response-to-switcher:hover > .switcher {
        display: none;    
    }
    .sky-mega-menu-response-to-stack li > div,
    .sky-mega-menu-response-to-stack li > [class^="grid-container"],
    .sky-mega-menu-response-to-switcher li > div,
    .sky-mega-menu-response-to-switcher li > [class^="grid-container"] {
        top: 100%;
        bottom: auto;
        width: auto;
        margin: 8px 0 0 0;        
        -o-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }
    .sky-mega-menu-response-to-stack li > div:after,
    .sky-mega-menu-response-to-switcher li > div:after {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 8px;
    }
    .sky-mega-menu-response-to-stack li > div:before,
    .sky-mega-menu-response-to-switcher li > div:before {
        display: none;
    }
    .sky-mega-menu-response-to-stack li a > .fa,
    .sky-mega-menu-response-to-switcher li a > .fa {
        margin: 0 15px 0 0;
    }
    .sky-mega-menu-response-to-stack li:hover > div,
    .sky-mega-menu-response-to-stack li:hover > [class^="grid-container"],
    .sky-mega-menu-response-to-switcher li:hover > div,
    .sky-mega-menu-response-to-switcher li:hover > [class^="grid-container"] {
        right: 0;
        left: 51px;
    }
    .sky-mega-menu-response-to-stack li li > div,
    .sky-mega-menu-response-to-switcher li li > div {
        top: 100%;
        width: auto;
        margin: 8px 0 0 0;
    }
    .sky-mega-menu-response-to-stack li li > div:after,
    .sky-mega-menu-response-to-switcher li li > div:after {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 8px;
    }
    .sky-mega-menu-response-to-stack li li:hover > div,
    .sky-mega-menu-response-to-switcher li li:hover > div {
        right: 0;
        left: 51px;
    }
    .sky-mega-menu-response-to-stack .search .input input,
    .sky-mega-menu-response-to-switcher .search .input input {
        width: 100%;
    }    
    
  .sky-mega-menu-response-to-icons li {
      position: static;
      font-size: 0;
    }
    .sky-mega-menu-response-to-icons li a {
        padding: 0 10px;
    }
    .sky-mega-menu-response-to-icons li > div,
    .sky-mega-menu-response-to-icons li > [class^="grid-container"] {
        width: 100%;
    }
    .sky-mega-menu-response-to-icons li > div:before {
        display: none;
    }
    .sky-mega-menu-response-to-icons li a > .fa {
        margin: 0;
    }    
    .sky-mega-menu-response-to-icons li a > .fa-indicator {
        position: static;
        display: block;
        float: right;
        margin-left: 10px;
        line-height: 45px;
    }
    .sky-mega-menu-response-to-icons li li {
        position: relative;
        font-size: 13px;
    }
    .sky-mega-menu-response-to-icons li li > div,
    .sky-mega-menu-response-to-icons .right li > div {
        top: 100%;
        margin: 8px 0 0 0;
    }
    .sky-mega-menu-response-to-icons li li > div:after,
    .sky-mega-menu-response-to-icons .right li > div:after {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 0;
        width: 100%;
        height: 8px;
    }
    .sky-mega-menu-response-to-icons li li:hover > div,
    .sky-mega-menu-response-to-icons .right li:hover > div {
        right: 0;
        left: 41px;
        width: auto;
    }
    .sky-mega-menu-response-to-icons li li a > .fa {
        margin-right: 10px;
    }
    .sky-mega-menu-response-to-icons li li a > .fa-indicator {
        margin-right: 0px;
    }
    .sky-mega-menu-response-to-icons.sky-mega-menu-anim-flip li li > div {
        top: 100%;
        margin: 8px 0 0 0;
        transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
    }
    .sky-mega-menu-pos-bottom.sky-mega-menu-response-to-icons li li > div {
        top: auto;
        bottom: 100%;
        margin: 0 0 8px 0;
    }    
    .sky-mega-menu-pos-bottom.sky-mega-menu-response-to-icons li li > div:after {
        top: 100%;
        bottom: auto;
    }
}

Ответа пока нет

 

4 комментария

леший
Гости

леший - 16 апреля 2016 09:50 -

На CSS этого не сделать, только на JS, так как CSS не может уловить событие "click", можно конечно стать извращенцем и сделать это через checkbox'ы, но оно того не стоит, проще прикрутить JS
Gott2
Юзер

Gott2 - 16 апреля 2016 13:36 -

А как мне правильно вставить js в это меню ?
леший
Гости

леший - 16 апреля 2016 19:21 -

Руками, как же ещё. В main.tpl между тегами 

<script>
    //тут js код вашего меню
</script>

либо же в любой js файл который подключен в вашем шаблоне
Johny
Юзер

Johny - 23 апреля 2016 07:12 -

Есть несколько методов на css с таргет, чекбоксы, active + hover. Подробнее спрашивать у гугля.
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 11.10.2012 inex  Шаблоны (TPL)
 17.03.2013 websot  Шаблоны (TPL)
 15.12.2013 deffos  Общие вопросы, Шаблоны (TPL), Ламерские вопросы
 15.09.2014 G-3p  Шаблоны (TPL)
 07.10.2014 Саня  Шаблоны (TPL)
 01.12.2014 AleksMey  Шаблоны (TPL)
 17.02.2015 serg91100  Шаблоны (TPL), jQuery
 24.02.2015 akafaus  Шаблоны (TPL)
 23.03.2015 Kaleb  Шаблоны (TPL), jQuery
 25.03.2015 gigaadmin  Шаблоны (TPL), Общие вопросы по PHP, Модули
  • mondolfo | Шаблон waitlogin при авторизации через с ...
    Фото mondolfo
    mondolfo
    Шаблон waitlogin при авторизации через соцсеть?
    Вчера, 01:31
    /engine/modules/social.php
  • TeraMoune | Как изменить вывод custom по нескольким ... 11
    Фото TeraMoune
    TeraMoune
    Как изменить вывод custom по нескольким тегам?
    28-10-2024, 01:05
    Я же написал, продублирую: нужно использовать [[:punct:]]

    И проблема в условии проверяющее версию mysql, можно поменять местами true и false, изменить знак меньше на больше или вовсе убрать код строки с version_compare и оставить ту строку кода $tempArray[] где используется [[:punct:]].

    В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
    Статья по решению проблемы

    Там у человека совершенно другое условие поиска. Он не теги ищет которые строго разделены запятыми, он просто слова ищет и ему как раз подойдёт граница слова. И это когда-то давно поиск был разделяя по границе слова, теперь есть character_class и используется другой метод. Но это не отменяет того, что вы нашли вопрос и решение которое никак не связано с темой новости поиска новостей с наличием тегов.
  • homa152 | Как изменить вывод custom по нескольким ... 11
    Фото homa152
    homa152
    Как изменить вывод custom по нескольким тегам?
    27-10-2024, 23:33
    Если вы готовы предложить какое-то решение для исправление проблемы 3685, отлично. Иначе к сожалению на последних версиях MySQL хак не рабочий, согласно вашему трактату.
  • homa152 | Как изменить вывод custom по нескольким ... 11
    Фото homa152
    homa152
    Как изменить вывод custom по нескольким тегам?
    27-10-2024, 23:20
    Я буквально 2 часа назад столкнулся с проблемами при установке этого хака, проблема была именно в ошибке 3685, сайт не просто переставал работать, использовалась стандартная заглушка при критических ошибках MySQL исправить получилось методом описанным выше, для версия до 8 хак работает исправно, но выше, требуется доработка, так как синтаксис считается ошибочным, вы можете проверить самостоятельно.

    В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
    Статья по решению проблемы
  • TeraMoune | Как изменить вывод custom по нескольким ... 11
    Фото TeraMoune
    TeraMoune
    Как изменить вывод custom по нескольким тегам?
    27-10-2024, 22:32
    Напротив нужно использовать [[:punct:]] вместо скобок, про это написано в документации на которую вы ссылаетесь. А \b означает границу слова и не способен правильно отображать результаты. Граница слова это когда выражение будет находить отдельные слова. Например новость имеет теги (Социальная сеть, Блокировка) и tags REGEXP '\\b(сеть)\\b' найдёт новость с тегом Социальная сеть, а так же Рыбацкая сеть и в принципе найдёт все новости где присутствует слово "Сеть" и будет много лишних результатов, а не только нужные.

    В хаке как раз присутствует проверка на старую версию и новую mysql и в каждом случае используется тот вариант который является валидным для используемой версии.
  • homa152 | Как изменить вывод custom по нескольким ... 11
    Фото homa152
    homa152
    Как изменить вывод custom по нескольким тегам?
    27-10-2024, 21:30
    Добавлю касаемо обновления архитектуры MySQL
    При добавлении хака с версии MySQL 8.0, возможно появление ошибки: 3685. Неверный аргумент для регулярного выражения.

    Можно пофиксить самостоятельно внеся корректировки в сам хак из панели админа.

    Строку:
    $tempArray[] = "tags REGEXP '[[:<:]](" . $value  . ")[[:>:]]'";


    Заменить на: 
    $tempArray[] = "tags REGEXP '\\\\b(" . $value  . ")\\\\b'";


    Согласно справочному руководству MySQL 8.0 / ... / Регулярные выражения, «MySQL поддерживает регулярные выражения с помощью международных компонентов для Unicode (ICU)».

    То есть, вместо "[[:<:]] и [[:>:]]", нужно использовать: "\b"
  • vitnet | Есть ли возможность изменить язык сайта? 1
    Фото vitnet
    vitnet
    Есть ли возможность изменить язык сайта?
    25-10-2024, 16:22
    Ну как вариант можно использовать тег {lang text=***} подробнее


    {lang text="LANG_PARAMETER"}

    Данный тег предназначен для вывода информации из языкового файла website.tpl, который в данный момент используется, где LANG_PARAMETER это значение параметра, который необходимо вывести. Например, тег {lang text="attach_images"} выведет надпись “Прикрепить изображения” из языкового пакета, в случае использования русского языка и если используется английский язык, то “Attach Images”
  • vitnet | Есть готовый модуль рейтинга комментарие ... 1
    Фото vitnet
    vitnet
    Есть готовый модуль рейтинга комментариев?
    25-10-2024, 13:12
    Вариант 1 (вручную)

    1.0 Открываете файл engine/modules/show.full.php находите в нем
    $where_approve . " ORDER BY " . PREFIX . "_comments.id " . $comm_msort;

    И меняете здесь id на rating
    Пример:
    $where_approve . " ORDER BY " . PREFIX . "_comments.rating " . $comm_msort;

    2.0 Затем переходите в админку /admin.php?mod=options&action=syscon --> Настройки комментариев --> Порядок сортировки комментариев --> По убыванию

    2.1 Далее --> Тип рейтинга комментариев выставляете "Нравится или Не нравится"

    Готово!

    Вариант 2 (плагин)
    Для просмотра содержимого спойлера, перейдите к выбранному событию.
  • Graf | Как сделать аякс кнопку "загрузить еще"? 2
    Фото Graf
    Graf
    Как сделать аякс кнопку "загрузить еще"?
    23-10-2024, 16:03
    Вот рабочий пример со скрытие пагинатора и кнопки.
    Полный код файла navigation.tpl
    [not-available=userinfo]
<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>

<nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]>
	<div class="page_next-prev">
		<span class="page_prev" title="Предыдущая страница">
			[prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link]
		</span>
		<span class="page_next" title="Следующая страница">
			[next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link]
		</span>
	</div>
	<ul class="pagination">
		{pages}
	</ul>
</nav>
<script type="text/javascript">
$(document).ready(function(){
    
         $('body').on('click','#nav-load a',function(){
        var urlNext = $(this).attr('href');
        var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
            $.ajax({
                url: urlNext,
                beforeSend: function() {
                    ShowLoading('');
                },            
                success: function(data) {
                    $('.navigation').remove();
                    $('#nav-load').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                },
                  error: function() {                
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
        };
        return false;
    });
    
});
</script>
[/not-available]
  • vitnet | Как перенести категории в DLE? 2
    Фото vitnet
    vitnet
    Как перенести категории в DLE?
    22-10-2024, 11:30
    Для начала проверьте наличие файла /engine/cache/system/category.php и если он был до замены БД то удалите его а ещё лучше очистить кеш.
наверх