Выподающее меню по клику на CSS - нужна помощь.

Тема в разделе "Верстка", создана пользователем modmix, 18 янв 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. modmix

    modmix Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    140
    Симпатии:
    20
    Есть возможность доделать выпадающее меню, что бы при повторном клике на ссылке с классом main-item и в произвольной области меню сворачивалось (схлопывалось)?
    Сейчас работает так - при клике по ссылке main-item открывается все что в sub-menu - при клике в произвольной области закрывается.
    HTML:
    <a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a>
    <ul class="sub-menu">
      <li><a href="#1">подпункт 1</a></li>
      <li><a href="#2">подпункт 2</a></li>
      <li><a href="#3">подпункт 3</a></li>
    </ul> 
    Код:
    .sub-menu
    {
      display: none;
    }
    .main-item:focus ~ .sub-menu,
    .main-item:active ~ .sub-menu,
    .sub-menu:hover
    {
      display: block;
    } 
    Какие есть мысли к реализации?
     
  2. Leony

    Leony

    Регистр.:
    18 мар 2008
    Сообщения:
    153
    Симпатии:
    25
    Я реализовал подобное с помощью mootols 1.2.4, за основу взял это меню.
    Решение кроссбраузерное.
    достаточно дописать "active" чтобы пункт был по умолчанию открыт: <ul class="container active">
    Чтобы класс отрабатывал – нужно подключать либы:
    HTML:
    <script type="text/javascript" src="mootools-yui-compressed.js"></script>
    <script type="text/javascript" src="mootools-1.2.4.4-more.js"></script>
    На чистом CSS подобное меню невозможно в принципе.
     
  3. modmix

    modmix Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    140
    Симпатии:
    20
    Все не плохо - спасибо за отклик. НО!!! Разговор был про чистый CSS. А все плавные выпадалки - выезжалки можно сделать и без явы. Приведенный код только пример (база) и если его немного приукрасить, то выходит совсем даже ничего.
     
  4. stylebig

    stylebig Создатель

    Регистр.:
    12 янв 2013
    Сообщения:
    33
    Симпатии:
    7
    Вот мой вариант выпадающего меню на чистом CSS

    HTML:
    <ul id="cssmenu">
            <li><a href="#">Заголовок 1</a>
                    <ul>
                            <li><a href="#">Ссылка 1</a></li>
                            <li><a href="#">Ссылка 2</a></li>
                    </ul>
            </li>
            <li><a href="#">Заголовок 2</a>
                    <ul>
                            <li><a href="#">Ссылка 1</a></li>
                            <li><a href="#">Ссылка 2</a></li>
                            <li><a href="#">Ссылка 3</a></li>
                            <li><a href="#">Ссылка 4</a></li>
                            <li><a href="#">Ссылка 5</a></li>
                    </ul>
            </li>
            <li><a href="#">Заголовок 3</a>
                    <ul>
                            <li><a href="#">Ссылка 1</a></li>
                            <li><a href="#">Ссылка 2</a></li>
                    </ul>
            </li>
    </ul>
    <style>
    ul#cssmenu {
            width:350px;
            margin: 0;
            border: 0 none;
            padding: 0;
            list-style: none;
            background: #333;
            height: 30px;
            font: bold 12px/28px Verdana, Arial;
            border-left:#333 1px solid;
    }
     
    ul#cssmenu li {
            margin: 0;
            border: 0 none;
            padding: 0;
            float: left;
            display: inline;
            list-style: none;
            position: relative;
            height: 30px;
    }
     
    ul#cssmenu ul {
            margin: 0;
            border: 0 none;
            padding: 0;
            width: 160px;
            list-style: none;
            display: none;
            position: absolute;
            top: 30px;
            left: 0;
    }
     
    ul#cssmenu ul:after {
            clear: both;
            display: block;
            font: 1px/0px serif;
            content: ".";
            height: 0;
            visibility: hidden;
    }
     
    ul#cssmenu ul li {
            width: 150px;
            float: left;
            display: block !important;
            display: inline;
    }
     
    ul#cssmenu a {
            border: 0px;
            padding: 0 10px;
            float: none !important;
            float: left;
            display: block;
            background: #333;
            color: #FFFFFF;
            font: bold 12px/28px Verdana, Arial;
            text-decoration: none;
            height: auto !important;
            height: 1%;
    }
     
    ul#cssmenu a:hover,
    ul#cssmenu li:hover a,
    ul#cssmenu li.iehover a {
            background: #FFFFFF;
            color:#333;
            border-top:#333 1px solid;
    }
     
    ul#cssmenu li:hover li a,
    ul#cssmenu li.iehover li a {
            border-top: 2px solid #FFFFFF;
            float: none;
            background: #333;
            color: #FFFFFF;
    }
     
    ul#cssmenu li:hover li a:hover,
    ul#cssmenu li:hover li:hover a,
    ul#cssmenu li.iehover li a:hover,
    ul#cssmenu li.iehover li.iehover a {
            border-top: 2px solid #FFFFFF;
            background: #FFFFFF;
            color:#333;
            border:#333 1px solid;
    }
     
    ul#cssmenu ul ul {
            display: none;
            position: absolute;
            top: 0;
            left: 170px;
    }
     
    ul#cssmenu li:hover ul ul,
    ul#cssmenu li.iehover ul ul {
            display: none;
    }
     
    ul#cssmenu li:hover ul,
    ul#cssmenu ul li:hover ul,
    ul#cssmenu li.iehover ul,
    ul#cssmenu ul li.iehover ul {
            display: block;
    }
    </style>
     
  5. icydrago

    icydrago Создатель

    Регистр.:
    21 янв 2013
    Сообщения:
    36
    Симпатии:
    2
    Вот мой вариант горизонтального выпадающего меню в 2 уровня, у верхнего уровня на фоне картинка, меняющаяся при наведении.
    Код:
    #top_menu_container{
        height: 33px;
        width: 100%;
        background: #3a5f8a url(../images/rep_x.png) repeat-x top left;
        border-top: 1px solid #43505f;
        border-bottom: 1px solid #43505f;
       
    }
    #top_menu_center_container{
        margin: auto;
        width: 1000px;
        height: 33px;
    }
    #top_menu_center_container li {
        float: left;
        list-style: none;
        position: relative;
    }
    #top_menu_center_container li a{
        display: block;
        height: 33px;
        border-bottom: 1px solid #43505f;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
    #top_menu_center_container .tm1{
        background: #3a5f8a url(../images/menu.gif) no-repeat 0 0;
        width: 115px;
    }
    #top_menu_center_container .tm2{
        background: #3a5f8a url(../images/menu.gif) no-repeat -115px 0;
        width: 180px;
    }
    #top_menu_center_container .tm3{
        background: #3a5f8a url(../images/menu.gif) no-repeat -295px 0;
        width: 127px;
    }
    #top_menu_center_container .tm4{
        background: #3a5f8a url(../images/menu.gif) no-repeat -422px 0;
        width: 185px;
    }
    #top_menu_center_container .tm5{
        background: #3a5f8a url(../images/menu.gif) no-repeat -607px 0;
        width: 199px;
    }
    #top_menu_center_container .tm6{
        background: #3a5f8a url(../images/menu.gif) no-repeat -806px 0;
        width: 194px;
    }
    #top_menu_center_container .tm1:hover{
        background: #3a5f8a url(../images/menu.gif) no-repeat 0 -33px;
    }
    #top_menu_center_container .tm2:hover{
        background: #3a5f8a url(../images/menu.gif) no-repeat -115px -33px;
    }
    #top_menu_center_container .tm3:hover{
        background: #3a5f8a url(../images/menu.gif) no-repeat -295px -33px;
    }
    #top_menu_center_container .tm4:hover{
        background: #3a5f8a url(../images/menu.gif) no-repeat -422px -33px;
    }
    #top_menu_center_container .tm5:hover{
        background: #3a5f8a url(../images/menu.gif) no-repeat -607px -33px;
    }
    #top_menu_center_container .tm6:hover{
        background: #3a5f8a url(../images/menu.gif) no-repeat -806px -33px;
    }
    #top_menu_center_container li ul{
        display: none;
        position: absolute;
        top: 34px;
        left: 0;
        z-index: 99;
    }
    #top_menu_center_container li:hover ul{
        display: block !important;
    }
    #top_menu_center_container li li{
        float: none;
        background: white none;
        border-left: 1px solid #b2b2b2;
        border-right: 1px solid #b2b2b2;
        border-bottom: 1px solid #b2b2b2;
    }
    #top_menu_center_container li li:hover{
        background: white url(../images/rep_x.png) repeat-x 0 -62px;
    }
    #top_menu_center_container li li a{
        display: block;
        border: none;
        height: 24px;
        width: 100%;
        background: url(../images/menu_li.gif) no-repeat 10px 10px;
        text-indent: 0;
        overflow: visible;
        padding: 0 15px 0 25px;
        color: #2f2f2f;
        text-decoration: none;
        line-height: 24px;
    }
    
    Но в названии темы указано по КЛИКУ, хотя автор хотел, видимо, при наведении.
     
  6. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    177
    Симпатии:
    111
    клик - это событие, которое обрабатывает яваскрипт, ксс не яп, следовательно в нем нет обработчика событий и на чистом ксс нельзя реализовать подобное.
     
  7. TLemur

    TLemur Писатель

    Регистр.:
    21 янв 2013
    Сообщения:
    9
    Симпатии:
    7
    Ошибаетесь. Можно.

    http://myrusakov.ru/css-click.html
     
    zerofirefox и funnywheel нравится это.
  8. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    177
    Симпатии:
    111
    Действительно, не думал даже о таком решении =) Однако актуальность под вопросом, т.к. элемент показываеться до тех пор, пока наведен курсор, а это 1. неудобно конечному пользователю; 2. невозможно использовать на девайсах с сенсорным экраном. Но факт того, что это возможно, конечно есть )
     
  9. alexmay

    alexmay Создатель

    Регистр.:
    7 июн 2011
    Сообщения:
    47
    Симпатии:
    5
  10. anikey

    anikey Создатель

    Регистр.:
    20 мар 2013
    Сообщения:
    28
    Симпатии:
    1
Статус темы:
Закрыта.