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

saymong

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

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

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

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

Forza.Baron

Гуру форума
Регистрация
26 Янв 2012
Сообщения
177
Реакции
79
Попробуйте в ссылках категорий - href="#".
 

saymong

Мой дом здесь!
Регистрация
29 Сен 2010
Сообщения
608
Реакции
433
Ну это не решение т.к. категория перестанет быть ссылкой и переход по ней будет невозможен. А надо именно решение, когда первый клик по ссылке (категории) открывает подкатегории, а второй клик уже переходит по ссылке.
 

Forza.Baron

Гуру форума
Регистрация
26 Янв 2012
Сообщения
177
Реакции
79
Код:
<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 - ссылка категории
 

ijakparov

Создатель
Регистрация
7 Дек 2015
Сообщения
38
Реакции
21
Ну это не решение т.к. категория перестанет быть ссылкой и переход по ней будет невозможен. А надо именно решение, когда первый клик по ссылке (категории) открывает подкатегории, а второй клик уже переходит по ссылке.

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

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

// запрещаем переход по ссылке и ставим класс
event.stopPropagation();
$(this).addClass('allow-link');

}
       
});
 

idoruev

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

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

// запрещаем переход по ссылке и ставим класс
event.stopPropagation();
$(this).addClass('allow-link');

}
      
});
А при четвёртом и пятом клике?
 

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]
 
Последнее редактирование модератором:
Сверху