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

[saymong]

Здравствуйте.
Опишу свою проблему. На сайте имеется меню (вертикальный дропдаун, 2-ух уровневый)
Меню мобильное т.е. на моб девайсах ставится узким

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

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

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

 

[Forza.Baron]

Попробуйте в ссылках категорий - href="#".

 

[saymong]

Ну это не решение т.к. категория перестанет быть ссылкой и переход по ней будет невозможен. А надо именно решение, когда первый клик по ссылке (категории) открывает подкатегории, а второй клик уже переходит по ссылке.

 

[Forza.Baron]

<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 - ссылка категории

 

[An0TheR]

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

 

[ijakparov]

Ну это не решение т.к. категория перестанет быть ссылкой и переход по ней будет невозможен. А надо именно решение, когда первый клик по ссылке (категории) открывает подкатегории, а второй клик уже переходит по ссылке.

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

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

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

}
       
});

 

[idoruev]

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

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

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

}
      
});

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

 

[radder8]

 <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;
        }

 @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]