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

modmix · 18 Янв 2013

Есть возможность доделать выпадающее меню, что бы при повторном клике на ссылке с классом 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;
}

Какие есть мысли к реализации?

Leony · 20 Янв 2013

Я реализовал подобное с помощью 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 подобное меню невозможно в принципе.

modmix · 20 Янв 2013

Leony написал(а):
Я реализовал подобное с помощью 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. А все плавные выпадалки - выезжалки можно сделать и без явы. Приведенный код только пример (база) и если его немного приукрасить, то выходит совсем даже ничего.

stylebig · 22 Янв 2013

Вот мой вариант выпадающего меню на чистом 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>

icydrago · 23 Янв 2013

Вот мой вариант горизонтального выпадающего меню в 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;
}

Но в названии темы указано по КЛИКУ, хотя автор хотел, видимо, при наведении.

funnywheel · 1 Фев 2013

клик - это событие, которое обрабатывает яваскрипт, ксс не яп, следовательно в нем нет обработчика событий и на чистом ксс нельзя реализовать подобное.

TLemur · 2 Фев 2013

funnywheel написал(а):
клик - это событие, которое обрабатывает яваскрипт, ксс не яп, следовательно в нем нет обработчика событий и на чистом ксс нельзя реализовать подобное.

Ошибаетесь. Можно.

Для просмотра ссылки Войди или Зарегистрируйся

funnywheel · 2 Фев 2013

TLemur написал(а):
Ошибаетесь. Можно.

Для просмотра ссылки Войди или Зарегистрируйся

Действительно, не думал даже о таком решении =) Однако актуальность под вопросом, т.к. элемент показываеться до тех пор, пока наведен курсор, а это 1. неудобно конечному пользователю; 2. невозможно использовать на девайсах с сенсорным экраном. Но факт того, что это возможно, конечно есть )

alexmay · 26 Фев 2013

Вот еще одно решение: Для просмотра ссылки Войди или Зарегистрируйся

anikey · 22 Мар 2013

Вот урок по выпадающему меню через css Для просмотра ссылки Войди или Зарегистрируйся

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

modmix

Постоялец

Leony

Знаток

modmix

Постоялец

stylebig

Создатель

icydrago

Создатель

funnywheel

PHP & JS

TLemur

Писатель

funnywheel

PHP & JS

alexmay

Постоялец

anikey

Создатель