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

hmarno

  • Захожу иногда
  • 84
  • 0 / 1
Вопрос по меню CSS
« : 08.03.2016, 15: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, 15:53:35 от hmarno »
*

flyingspook

  • Живу я здесь
  • 3590
  • 247 / 9
Re: Вопрос по меню CSS
« Ответ #1 : 08.03.2016, 21:28:55 »
Чем вас не устраивает наведение, зачем открытие по клику?
*

kik84

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

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

flyingspook

  • Живу я здесь
  • 3590
  • 247 / 9
Re: Вопрос по меню CSS
« Ответ #3 : 09.03.2016, 09:17:43 »
Мне кажется, это скорее к JS вопрос) Надо сайт смотреть...
по клику да, по наведению и CSS хватит полностью
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Вопрос по меню CSS
« Ответ #4 : 09.03.2016, 15:08:51 »
По клику так просто не получится. :active это как раз и есть для момента клика. Вам же нужно, чтобы элемент менял какие-то атрибуты. Из css-костылей такое можно сделать только, если добавить в разметку чекбоксы. Традиционно раскрывающееся меню делается на JS
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вопрос по Komento

Автор Missile

Ответов: 9
Просмотров: 1292
Последний ответ 21.12.2022, 17:52:46
от Missile
Кликабельность псевдоэлемента в пункте меню

Автор vasilii.pupkov

Ответов: 4
Просмотров: 1546
Последний ответ 29.12.2021, 23:15:38
от v42bis
Выпадающее меню

Автор DrShepard

Ответов: 10
Просмотров: 2119
Последний ответ 20.10.2021, 12:36:16
от DrShepard
Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 814
Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 793
Последний ответ 27.11.2020, 11:33:58
от coliandra