Мобильное навигационное меню слева и справа

0

У меня возникли проблемы с поиском моего мобильного навигатора. У меня есть один слева и один справа, и они должны выскакивать. Левый работает нормально, но правый открывается, нет перехода.

Я смотрел на CSS последние 4 часа, возился с некоторыми переходами. Я не уверен, почему он не выплывает гладко, но все остальное работает.

Здесь jsFiddle с некоторым кодом: http://jsfiddle.net/Etn6q/

Я начал использовать этот учебник: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

<div id="outer-wrap">
    <div id="inner-wrap">

        <div id="top_mobile_bar" class="clearfix">
            <a class="nav-btn" id="nav-open-btn" href="#nav">Menu</a>
            <a class="nav-btn" id="info-open-btn" href="#info">Info</a>
        </div>

И у меня есть некоторые стили в style.css и настроен для мобильного-flyout-menu.css. То, что у меня есть все мои переходы:

.csstransforms3d.csstransitions.js-ready #info .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    transition: all 0.2s ease 0s;

    -webkit-transition:         opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay:   ease, 0s;
    -moz-transition:            opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition:              opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition:                 opacity 300ms 100ms ease, transform 500ms ease;

    -webkit-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(15%, 0, 0) scale3d(0.9, 0.9, 0.9);

    -webkit-transform-origin:0;
    -moz-transform-origin:0;
    -ms-transform-origin:0;
    -o-transform-origin:0;
    transform-origin:0;
}

Я не уверен, что это код проблемы. Это может быть javascript, я приложил это к моему jsFiddle. Любая помощь будет оценена!

  • 0
    Привет Antu, ты хочешь что-то подобное, когда ты нажимаешь на меню, его соответствующий блок скользит вниз, а когда ты нажимаешь на информацию, его соответствующий блок скользит вниз? Вы хотите Int с CSS или JQuery хорошо с вами?
  • 0
    Привет Правин, у меня настроено меню, чтобы выдвигаться, а не опускаться, но оно отодвигает основное содержимое (внутреннюю обертку) в сторону и появляется. Моя проблема с правильным меню слайдов. CSS предпочтительнее, но jQuery хорошо, если он это исправляет. Спасибо!
Показать ещё 3 комментария
Теги:
navigation

1 ответ

0
Лучший ответ

Мне потребовалось некоторое время, но я понял это. Для всех, кто мог бы наткнуться на этот вопрос с тем же вопросом в будущем, мне пришлось разбить свой JavaScript на два (main-L.js и main-R.js), один для Left и один для меню Right. Мне также пришлось добавить еще одну оболочку для использования нового файла JavaScript. В основном я просто добавил R в конце классов, которые применимы к моему правому меню в js и CSS.

<div id="outer-wrap">
<div id="inner-wrap">
<div id="inner-wrapR"><!--added wrap here-->

    <div id="top_mobile_bar" class="clearfix">
         <a class="nav-btn" id="nav-open-btn" href="#nav">Menu</a>
         <a class="nav-btn" id="info-open-btn" href="#info">Info</a>
    </div>

Это небольшая часть CSS, с которой я столкнулся с проблемой идентификации, которая контролировала гладкую анимацию. Это было # внутреннее обертывание, которое требовало стилизации, в то время как я пытался преобразовать в меню.

     .csstransforms3d.csstransitions.js-navR #inner-wrap {
          -webkit-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
          -moz-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
          -ms-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
          -o-transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
          transform: translate3d(-38%, 0, 0) scale3d(1, 1, 1);
      }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню