Новая кнопка закрытия выдвижного меню

fh79655l123 20.03.2014 Все вопросы » jQuery 2965

вопрос

Подскажите как сделать дополнительную кнопу закрытия в самом меню или например как на этом сайте нажатие на любую область сайта кроме самого меню.

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

<script type="text/javascript">
    $(document).ready(function(){
        $('.slider ul').bxSlider({ minSlides:1, prevSelector:'.sliderprev', nextSelector:'.slidernext', pager:false, controls:true, auto:true, mode:'fade' });
        $('.footslide ul').bxSlider({ minSlides:5, maxSlides:5, prevSelector:'.footslideprev', nextSelector:'.footslidenext', pager:false, controls:true, auto:false });

        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
                menuRight = document.getElementById( 'cbp-spmenu-s2' ),
                showRightPush = document.getElementById( 'showRightPush' ),
                body = document.body;

        showRightPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toleft' );
            classie.toggle( menuRight, 'cbp-spmenu-open' );
            disableOther( 'showRightPush' );
        };

        function disableOther( button ) {
            if( button !== 'showRightPush' ) {
                classie.toggle( showRightPush, 'disabled' );
            }
        };

        $(window).scroll(function(){
            if ($(this).scrollTop() > 500) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 300);
            return false;
        });
    })
</script>

Ответа пока нет

3 комментария

Юзер

795

D0Gmatist - 2015-04-1520 марта 2014 13:41 - #25296

1) А HTML код не надо прилагать ?... или я должен шаманить с бубном
код кнопки и код ячейки меню

2) код JS выкладывайте в читабельном виде

$(document).ready(function() {
    $('.slider ul').bxSlider({
        minSlides: 1,
        prevSelector: '.sliderprev',
        nextSelector: '.slidernext',
        pager: false,
        controls: true,
        auto: true,
        mode: 'fade'
    });
    $('.footslide ul').bxSlider({
        minSlides: 5,
        maxSlides: 5,
        prevSelector: '.footslideprev',
        nextSelector: '.footslidenext',
        pager: false,
        controls: true,
        auto: false
    });
    var menuLeft = document.getElementById('cbp-spmenu-s1'),
        menuRight = document.getElementById('cbp-spmenu-s2'),
        showRightPush = document.getElementById('showRightPush'),
        body = document.body;
    showRightPush.onclick = function() {
        classie.toggle(this, 'active');
        classie.toggle(body, 'cbp-spmenu-push-toleft');
        classie.toggle(menuRight, 'cbp-spmenu-open');
        disableOther('showRightPush');
    };

    function disableOther(button) {
        if (button !== 'showRightPush') {
            classie.toggle(showRightPush, 'disabled');
        }
    };
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });
    $('.scrollup').click(function() {
        $("html, body").animate({
            scrollTop: 0
        }, 300);
        return false;
    });
})

и желательно только активный по вопросу код а не всю кучу ...

Юзер

206

fh79655l123 - 2015-04-1520 марта 2014 14:54 - #25305

HTML код =)

[not-group=5]
<div class="headerlogin">
    <ul>
<li><button id="showRightPush" class="bluelink">Панель управления</button></li>
<li><a id="showRightPush" href="{logout-link}" style="text-decoration: none;" class="bluelink">Выйти</a></li>
    </ul>
    [admin-link]<a href="{addnews-link}" class="headerloginlost">Добавить новость</a>
[/admin-link]</div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
    <h3>Панель управления</h3>
    <form method="post" action="">
        <div class="loginboxmenu">
            <ul>
                [admin-link]<li><a href="{admin-link}">Админ-центр сайта</a></li>
                <li><a href="/?do=lastcomments">Последние комментарии</a></li>
                <li><a href="{stats-link}">Статистика сайта</a></li>
                <li><a href="/radio.html">Игровое радио</a></li>[/admin-link]
                <li><a href="{profile-link}">Мой профиль</a></li>
                <li><a href="{favorites-link}">Мои закладки</a></li>
                <li><a href="{pm-link}">Мои сообщения</a></li>
</ul>
        </div>
    </form>
</nav>
[/not-group]
[group=5]
<div class="headerlogin">
    <ul>
        <li><button id="showRightPush" class="bluelink">Войти</button></li>
        <li><a href="{registration-link}" style="text-decoration: none;" class="bluelink">Регистрация</a></li>
    </ul>
    <a href="{lostpassword-link}" class="headerloginlost">Восстановить пароль</a>
</div>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
    <h3>Вход на сайт</h3>
    <form method="post" action="">
        <div class="loginbox">
            <label>
                <span>Введите логин:</span>
                <input type="text" name="login_name" id="login_name" class="loginboxinp" required>
            </label>
            <label>
                <span>Введите пароль:</span>
                <input type="password" name="login_password" id="login_password" class="loginboxinp" required>
            </label>
            <label>
                <input type="checkbox" name="login_not_save" id="login_not_save" value="1"/> <b style="font-weight: 100; position: relative; top: -2px;">Запомнить меня</b>
            </label>
            <label>
                <button class="bluelink" onclick="submit();" type="submit">Войти</button>
                <input name="login" type="hidden" id="login" value="submit" />
            </label>
        </div>
    </form>
</nav>
[/group]