Форум русской поддержки Joomla!® CMS
05.12.2016, 18:36:14 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Вопрос по меню CSS

 (Прочитано 218 раз)
0 Пользователей и 1 Гость смотрят эту тему.
hmarno
Осваиваюсь на форуме
***

Репутация: +0/-1
Offline Offline

Сообщений: 95


« : 08.03.2016, 16: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, 16:53:35 от hmarno » Записан
flyingspook
Профи
********

Репутация: +226/-9
Offline Offline

Сообщений: 3528


« Ответ #1 : 08.03.2016, 22:28:55 »

Чем вас не устраивает наведение, зачем открытие по клику?
Записан
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« Ответ #2 : 09.03.2016, 10:16:20 »

Проблема в том, что подпункты выпадают в момент клика и сразу же исчезают. Ломал голову целый день, решения не нашел. Подскажите кто разбирается в CSS, в чем проблема?

Мне кажется, это скорее к JS вопрос) Надо сайт смотреть...
Записан
flyingspook
Профи
********

Репутация: +226/-9
Offline Offline

Сообщений: 3528


« Ответ #3 : 09.03.2016, 10:17:43 »

Мне кажется, это скорее к JS вопрос) Надо сайт смотреть...
по клику да, по наведению и CSS хватит полностью
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #4 : 09.03.2016, 16:08:51 »

По клику так просто не получится. :active это как раз и есть для момента клика. Вам же нужно, чтобы элемент менял какие-то атрибуты. Из css-костылей такое можно сделать только, если добавить в разметку чекбоксы. Традиционно раскрывающееся меню делается на JS
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet