Подтвердить что ты не робот

Как сделать скользящее меню похожим на боковое меню Facebook Mobile с html, css, jquery?

Я делаю веб-сайт и имею вертикальный список кнопок по левой стороне сайта. Я хочу скрыть их в сторону, чтобы показать только вкладку. Когда меню скрыто, я хочу, чтобы на вкладке говорилось что-то вроде "Больше", а затем, когда меню видно, я хочу, чтобы на вкладке говорилось "скрыть".

Итак, у меня есть пара вопросов... Как я могу создать меню, которое по существу является просто div, выходить извне экрана по щелчку, а также иметь текст на вкладке и изменение назначения href так что, когда функция слайда будет завершена, вкладка скажет "скрыть", и, щелкнув ее, она отправит div обратно из экрана.

Если у вас есть приложение facebook на вашем телефоне, я в основном хочу воспроизвести его на моем рабочем столе на рабочем столе.

4b9b3361

ОТВЕТЫ

Ответ 1

Это довольно просто, используя jQuery. Это шаги, которые вы должны предпринять.

  • Исправить всплывающее окно в одну сторону экрана, используя фиксированное позиционирование
  • Добавьте интерактивную область, в которой пользователь запускает эффект слайда/выхода с помощью
  • Создайте анимацию jQuery для включения/выключения содержимого с помощью отрицательных полей
  • В обратном вызове анимации, как вы хотите, чтобы триггер отображался (показать/скрыть)

Важно - toggle событие устарело в jQuery 1.8 и удалено в 1.9. Мой первоначальный ответ больше не будет работать. Эта новая версия будет работать как в старой, так и в новой версии jQuery. В этом методе используется обработчик кликов и класс под названием hidden, чтобы определить, нужно ли анимировать всплывающее окно на экране.

http://jsfiddle.net/tzDjA/

JQuery

//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        left: 0
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        left: -40
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}

CSS

/* minimal CSS */
 #popout {
    position: fixed;                /* fix the popout to the left side of the screen */
    top: 50px;
    left: -40px;                    /* use a negative margin to pull the icon area of the popout off the edge of the page */
    width: 75px;
    border: 1px dotted gray;
    color: gray;
}
#trigger {                          /* create a clickable area that triggers the slide in/out effect */
    position: absolute;             /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */  
    top: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;   
}

Исходный ответ (не работает с jQuery 1.9)

http://jsfiddle.net/WMGXr/1/

$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('Close');
        });
    }, 
    function() {
        $('#popout').animate({ left: -40 }, 'slow', function() {
            $('#toggle').html('Show');
        });
    }
);

<div id="popout">
    <div id="toggle">Show</div>
    <br style="clear: both" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>        
    </ul>
</div>

#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }

Ответ 2

JQuery.toggle и .animate будут работать, как указано mrtsherman. Я бы предложил использовать z-index и настроить CSS еще немного. Оформить заказ для примера - http://jsfiddle.net/codefuze/HYjEB/1/

Ответ 4

Если вы ищете более предварительно упакованное решение, Bootstrap также предлагает приятное меню слайдов.

См. следующий пример "offcanvas": http://getbootstrap.com/examples/offcanvas/ (вам нужно уменьшить размер экрана до мобильного размера, чтобы увидеть "Toggle nav" в действии)