Основной курс по Joomla
0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 338 Просмотров
*

hmarno

  • Осваиваюсь на форуме
  • ***
  • 91
  • -1
Вопрос по меню CSS
« : 08.03.2016, 17:50:24 »
Добрый день. Есть задача сделать вертикальное меню, при клике на родителя под ним выпадают в виде дерева подпункты меню. Проблема в том, что подпункты выпадают в момент клика и сразу же исчезают. Ломал голову целый день, решения не нашел. Подскажите кто разбирается в CSS, в чем проблема?

Вот CSS меню:
Код
.menu-my * {
        margin: 0;
        padding:  0;
        margin: 0;
        padding:  0;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
    .menu-my{
        list-style: none;
        padding-left: 12px;
        display:inline:block;
        width:180px;
    }
    .menu-my ul {
        list-style-position: outside;
        text-align:left;
        padding-left: 12px;
        list-style: none;
        display: none;
    }
         /*По умолчанию блок закрыт*/
.menu-my li ul{ display:none;}

         /*При клике блок открывается*/
.menu-my li:active ul{ display:block;}

    .menu-my li {
        list-style: none;
        margin:4px auto 4px 4px;
        padding:2px 4px;
    }

    .menu-my li {
        border:1px solid #C4C4C6;
        background-color: #E0EDED;
        font-size:120%;
        text-shadow:1px 1px 1px #83A0A0;
    }
    .menu-my li ul li{
        border:1px solid blue;
        text-shadow:none;
        font-size:80%;
        background-color: #C1C1E5;
    }
    .menu-my li ul li ul li{
        font-size:90%;
        border:1px solid green;
        background-color: #BCDEBC;
    }
   .menu-my > li > a:before {
       background: url(http://hostjs-mybb2011.narod.ru/img/icon.png) 0 0 no-repeat transparent;
       content: " ";
       display: block;
       float: left;
       height: 16px;
       margin-left: 2px;
       margin-top: 2px;
       width: 16px;
    }
   .menu-my > li > a.active:before {
       background-position:0 -16px;
    }

   .menu-my a {
       padding: 1px 4px!important;
       -moz-user-select: none;
       -khtml-user-select: none;
       user-select: none;      
    }

   .menu-my > li > ul > li > a.active {
        -moz-box-shadow: 0 0 3px #620D62; /* Для Firefox */
        -webkit-box-shadow: 0 0 3px #620D62;
         box-shadow: 0 0 3px #620D62; /* Параметры тени */
         font-weight:700;
    }

    /*Cтиль Ссылки на текущую страницу*/
   .menu-my li ul li.a-active {

        background-color:#D6D6FA!important;
        border:1px dotted #9D9DBA!important;
        -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Для Firefox */
        -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
        box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Параметры тени */
    }
   li.a-active a{
        color:#0000CC!important;
        font-weight:700;
    }
    .menu-my li ul li ul li ul li{
        border:1px solid green;

        background-color: #C1C1E5;
        color:#fff!important;
    }
    .menu-my li ul li ul li ul li a{
       padding: 1px 0 1px 4px!important;
        color:#000;
    }
« Последнее редактирование: 08.03.2016, 17:53:35 от hmarno »

*

flyingspook

  • Профи
  • ********
  • 3610
  • 236
Re: Вопрос по меню CSS
« Ответ #1 : 08.03.2016, 23:28:55 »
Чем вас не устраивает наведение, зачем открытие по клику?

*

kik84

  • Живу я здесь
  • ******
  • 1267
  • 59
Re: Вопрос по меню CSS
« Ответ #2 : 09.03.2016, 11:16:20 »
Проблема в том, что подпункты выпадают в момент клика и сразу же исчезают. Ломал голову целый день, решения не нашел. Подскажите кто разбирается в CSS, в чем проблема?

Мне кажется, это скорее к JS вопрос) Надо сайт смотреть...

*

flyingspook

  • Профи
  • ********
  • 3610
  • 236
Re: Вопрос по меню CSS
« Ответ #3 : 09.03.2016, 11:17:43 »
Мне кажется, это скорее к JS вопрос) Надо сайт смотреть...
по клику да, по наведению и CSS хватит полностью

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Re: Вопрос по меню CSS
« Ответ #4 : 09.03.2016, 17:08:51 »
По клику так просто не получится. :active это как раз и есть для момента клика. Вам же нужно, чтобы элемент менял какие-то атрибуты. Из css-костылей такое можно сделать только, если добавить в разметку чекбоксы. Традиционно раскрывающееся меню делается на JS
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!