• 0
Igor_Dp

Выпадающее меню

    Вопрос

    Igor_Dp    0
    Igor_Dp

    Всем доброго дня! Подскажите, будьте добры, как правильно реализовать д выпадающее меню такого образца (https://artmobile.ua/shop/category-1/category991 смотрим раздел "Каталог"). То бишь, нажимаем на пункт меню и открывается меню с подпунктами. Нажимаем еще раз - подпункты пропадают. У меня получилось сделать не при клике, а только при наведении. Соответственно, если курсор убрать - подпункты снова скроются. Вот кусок кода (https://jsfiddle.net/eoL5bLmg/). Прошу помочь, даже если это банально и просто. Я с этим застрял...

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    12 ответов на этот вопрос

    Рекомендуемые сообщения

    • 1
    Endorphin    6
    Endorphin

    Метод то поинтересней конечно, а разбираетесь ли вы в JS если сами этого не сделали, я скинул вам самый простой вариант на обычном CSS зачем JS использовать для таких банальных вещей?)))) квадратик убирается просты display:none для input, ознакомьтесь https://github.com/you-dont-need/You-Dont-Need-JavaScript, и Светлане советую ознакомиться))))

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Endorphin    6
    Endorphin

    Сделай чекбоксом главную кнопку, и когда она :checked появляется меню. 

    https://jsfiddle.net/zzw687d8/

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor_Dp    0
    Igor_Dp

    Благодарю за совет. А как тогда убрать квадратик этот??? Что-то никак не получается. 

     

    И сразу еще - а как сделать, чтобы плавно открывалось меню? transition, как я понял, здесь не поможет.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor_Dp    0
    Igor_Dp

    Да. И еще, у меня подменю выпадает, только когда я галочку ставлю. Все логично, судя по коду. Только в песочнице работает даже при клике на слово, а у меня в коде только при клике на сам input

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Svetlana_P    30
    Svetlana_P

    Здравствуйте! Можете по этому примеру https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate сделать. Вам никто не мешает вместо текста поставить ссылки или какие угодно теги (список и т.п.) https://jsfiddle.net/Benedetta/14fe5t05/ 

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor_Dp    0
    Igor_Dp

    Благодарю за совет. Этот метод поинтересней будет.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor_Dp    0
    Igor_Dp

    Благодарю за ссылочку. Довольно интересный материал. Даже не думал, что такое можно без JS сделать)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Endorphin    6
    Endorphin

    https://jsfiddle.net/zzw687d8/ вот вам без JS :)

    Лайк если понравилось :D

    • Like 3

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Svetlana_P    30
    Svetlana_P

    Endorphin, не знала о таком хаке, спасибо за информацию :) Как оказалось, чекбоксом можно много чего делать, и JS не понадобится.

    Но наверняка есть минусы, какие? Кроме того, что тег используется не по назначению.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Schamil74    13
    Schamil74

    Таким образом можно стилизовать radio и checkbox

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Endorphin    6
    Endorphin
    23 часа назад, Svetlana_P сказал:

    Endorphin, не знала о таком хаке, спасибо за информацию :) Как оказалось, чекбоксом можно много чего делать, и JS не понадобится.

    Но наверняка есть минусы, какие? Кроме того, что тег используется не по назначению.

    Да даже не знаю какие минусы в таком случае могут быть, мы много чего используем не по назначению когда верстаем, так что если уже такая библиотека создана, значит приемы не осуждаемы, можете еще посмотреть http://100dayscss.com интересные челендж был

    • Like 1

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Svetlana_P    30
    Svetlana_P

    Действительно очень интересные штуки, поизучаю. Ну и Ваш посыл понятен: не лепить JS, даже простейший, если можно обойтись без него.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • TEO_911
        Автор: TEO_911
        Подскажите плиз! Почему я создаю в HTML тег " " в него закладываю "UL" и LI, а в "LI" текст которому хочу придать нужное изображение. В CSS делаю селектор - .menu, прописываю туда правила, но почему то это не влияет на LI, что бы изменить текст, мне приходится прописывать правила непосредственно для "LI". в чем причина?, и как сделать так что бы правила для блока .menu распространялись на текст внутри его? Ведь LI я хотел добавить еще в некоторые блоки уже с другими правилами.
        <!DOCTYPE html> <html lang="en"> <head> <title>MySite</title> <meta charset="utf-8"> <link rel="stylesheet" href="text/style.css"> </head> <body> <header class="page-header--home"> <div class="menu"> <ul> <li>Группа творчества</li> <li>Статьи</li> <li>Форум</li> <li>Видео</li> <li>Вход</li> </ul> </div> </header> </div> <div class="avtorizacia"> <input type="submit" name="Поиск"> </div> </body> </html> body{ background-image: url(..//img/MS3.jpg); max-width: 1920px; margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .page-header--home{ position: relative; background-image: url(..//img/MS4.jpg); width: 1920px; height: 80px; margin-top: 0px; } ul{ position: relative; margin: 0px; } li{ display: inline; font-size: 32px; font-family: "Tahoma"; font-weight: 800; color: #45a8ff; margin: 0px; margin-top: 5px; margin-left: 80px; margin-right: 80px; } .avtorizacia{ position: relative; background-color: rgba(31, 16, 16, 0.75); max-width: 80px; height: 250px; margin-top: 100px; }  
         
         
      • Дмитрй
        Автор: Дмитрй
        Помогите новичку, советом. Нужно к li привязать ссылку для перехода. Ссылку привязываю, но при нажатии на нее переход не происходит. Что делаю не так? 
         
        <div id="nav">             <a class="btn_dropdown" data-toggle="collapse" data-target=".nav-collapse_">MENU</a>             <ul class="navigation">                 <li data-slide="1">Текст 1</li>                 <li data-slide="4">Текст 2</li>                 <li> <a href="URL">Текст 3</a></li>                 <li data-slide="8">Текст 4</li>                  <li data-slide="10"> Текст 5</li>                               <div class="clear"></div>             </ul>  </div>