Мобильное меню

Тема в разделе "Другие языки", создана пользователем saymong, 19 фев 2016.

Модераторы: Цукер
  1. saymong

    saymong

    Регистр.:
    29 сен 2010
    Сообщения:
    531
    Симпатии:
    373
    Здравствуйте.
    Опишу свою проблему. На сайте имеется меню (вертикальный дропдаун, 2-ух уровневый)
    Меню мобильное т.е. на моб девайсах ставится узким

    Вот какой вопрос, не могу реализовать меню на моб. девайсах таким образом, чтобы при клике на категорию (категория также является ссылкой) открывались подкатегории, а уже при втором клике по категории происходил переход по ссылке.
    Сейчас так, при клике по категории открываются (дропдаун) подкатегории, но, происходит переход по категории.

    Посоветуйте решение.

    Заранее благодарю.
     
  2. Forza.Baron

    Forza.Baron

    Регистр.:
    26 янв 2012
    Сообщения:
    175
    Симпатии:
    76
    Попробуйте в ссылках категорий - href="#".
     
  3. saymong

    saymong

    Регистр.:
    29 сен 2010
    Сообщения:
    531
    Симпатии:
    373
    Ну это не решение т.к. категория перестанет быть ссылкой и переход по ней будет невозможен. А надо именно решение, когда первый клик по ссылке (категории) открывает подкатегории, а второй клик уже переходит по ссылке.
     
  4. Forza.Baron

    Forza.Baron

    Регистр.:
    26 янв 2012
    Сообщения:
    175
    Симпатии:
    76
    Код:
    <script type="text/javascript">
    rwt = function(e){
    setTimeout(function() {
    e.href = $(e).data('wpurl');
    }, 100); 
    };
    </script>
    
    Для ссылок:
    Код:
     <a href="#" data-wpurl="http://yahoo.com" onclick="rwt(this)">CLICK HERE</a> 
    data-wpurl - ссылка категории
     
    saymong нравится это.
  5. An0TheR

    An0TheR Писатель

    Регистр.:
    20 июл 2011
    Сообщения:
    9
    Симпатии:
    0
  6. ijakparov

    ijakparov Создатель

    Регистр.:
    7 дек 2015
    Сообщения:
    27
    Симпатии:
    7
    Можно при первом клике запретить переход по ссылке через event.stopPropagation(); и добавить к ссылке класс для того чтоб при втором клике проверять на наличие класса и пропускать stopPropagation. Пример:

    Код:
    $('.last-seen-btn').click(function(event){
    if($(this).hasClass('allow-link')==false){
    // тут код раскрывающий меню
    
    // запрещаем переход по ссылке и ставим класс
    event.stopPropagation();
    $(this).addClass('allow-link');
    
    }
           
    });
     
  7. idoruev

    idoruev Писатель

    Регистр.:
    3 янв 2014
    Сообщения:
    6
    Симпатии:
    0
    А при четвёртом и пятом клике?
     
  8. radder8

    radder8 Писатель

    Регистр.:
    11 май 2017
    Сообщения:
    6
    Симпатии:
    1
    HTML:
     <nav id = "nav" role = "navigation">
    
        <a href="#nav" title="Show navigation"> Show navigation </a>
        <a href="#" title="Hide navigation"> Hide navigation </a>
        <Ul>
            <Li> <a href="/"> Home </a> </ li>
            <Li>
                <a href="/" aria-haspopup="true"> Blog </a>
                <Ul>
                    <Li> <a href="/"> Design </a> </ li>
                    <Li> <a href="/"> HTML </a> </ li>
                    <Li> <a href="/"> CSS </a> </ li>
                    <Li> <a href="/"> JavaScript </a> </ li>
                </ Ul>
            </ Li>
            <Li>
                <a href="/" aria-haspopup="true"> Work </a>
                <Ul>
                    <Li> <a href="/"> Web Design </a> </ li>
                    <Li> <a href="/"> Typography </a> </ li>
                    <Li> <a href="/"> Front-End </a> </ li>
                </ Ul>
            </ Li>
            <Li> <a href="/"> About </a> </ li>
        </ Ul>
    </ Nav> [/ HTML]
    [HTML]#nav
    {
        /* container */
    }
        #nav > a
        {
            display: none;
        }
        #nav li
        {
            position: relative;
        }
        /* first level */
        #nav > ul
        {
            height: 3.75em;
        }
            #nav > ul > li
            {
                width: 25%;
                height: 100%;
                float: left;
            }
        /* second level */
        #nav li ul
        {
            display: none;
            position: absolute;
            top: 100%;
        }
            #nav li:hover ul
            {
                display: block;
            }
    HTML:
     @media only screen and (max-width: 40em) / * 640 * /
    {
        #nav
        {
            position: relative;
        }
            #nav> a
            {
            }
            #nav: not (: target)> a: first-of-type,
            #nav: target> a: last-of-type
            {
                display: block;
            }
        / * First level * /
        #nav> ul
        {
            height: auto;
            display: none;
            position: absolute;
            left: 0;
            right: 0;
        }
            #nav: target> ul
            {
                display: block;
            }
            #nav> ul> li
            {
                width: 100%;
                float: none;
            }
        / * Second level * /
        #nav li ul
        {
            position: static;
        }
    } [/ HTML]
     
    Последнее редактирование модератором: 13 май 2017