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

saymong

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

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

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

Заранее благодарю.
 
Попробуйте в ссылках категорий - href="#".
 
Ну это не решение т.к. категория перестанет быть ссылкой и переход по ней будет невозможен. А надо именно решение, когда первый клик по ссылке (категории) открывает подкатегории, а второй клик уже переходит по ссылке.
 
Код:
<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 - ссылка категории
 
Ну это не решение т.к. категория перестанет быть ссылкой и переход по ней будет невозможен. А надо именно решение, когда первый клик по ссылке (категории) открывает подкатегории, а второй клик уже переходит по ссылке.

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

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

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

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

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

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

}
      
});
А при четвёртом и пятом клике?
 
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]
 
Последнее редактирование модератором:
Назад
Сверху