Jump to content
  • 0

Выпадающее меню для мобильных устройств

bremned

Asked by bremned,

 Share

Question

bremned Explorer

bremned

Posted
Posted

Всем привет, кого не видел. Сделал себе выпадающее меню на основе css по этому уроку. Но, естественно, на мобильных устройства не работает. Нашел урок с адаптивным меню и под мобильные устройства. Но переделывать всё меню лень, может кто подсказать, с чего начать, чтобы меню всплывало и на мобильных устройствах ?

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Роман Онищенко
      Ищу подработку React/React Native
      By Роман Онищенко
      Разрабатываю React/React Native приложения. С образцами моих некоммерческих работ вы можете ознакомиться по адресу: https://github.com/Roman-Onishchenko?tab=repositories
      Готов рассмотреть ваши предложения о разработке React/React Native приложений различной тематики и объема работ с частичной занятостью (до 30 рабочих часов в неделю). 
      Мои контакты:
      skype - romanonishencko
      email - roman951t@gmail.com
    • garmoni
      Как привязать выпадающее меню к событию нажатия кнопки?
      By garmoni
      Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.
      <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }  
    • kudg0
      Помогите решить проблему с якорными ссылками и скрытым выпадающим списком
      By kudg0
      У меня возникла проблема, есть код который задает меню в верхней плашке на сайте, при наведении на пункт услуги-открывается еще три  по-умолчанию скрытых пункта класса submenu, проблема заключается в том, что если заходить с телефона, то навестись на пункт услуги не получается, а если просто нажать на него то срабатывает переход и еще 3 пункта не успевают открыться.
      <ul class="topmenu" > <li><a href="#usl">Услуги</a> <ul class="submenu"> <li><a href="us.html" class="navi">Пакеты </a></li> <li><a href="raz.html" class="navi">Услуги</a></li> <li><a href="spec.html" class="navi">Специальные</a></li> </ul> </ul> Как можно решить эту проблему?
    • Ospna
      Почему некорректно отображаются иконки
      By Ospna
      Решил анимировать иконки, нашел пример в интернете, скопировал

      в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично

      но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка
       
      пример кода
      пример того как должна выглядеть анимированная иконка во вложении
      Screen Capture 2018-01-10 06.49.14.mov
    • alex-zzx
      Что не так с вёрсткой под iPad iPhone?
      By alex-zzx
      Доброго дня
      Прошу всех специалистов верстающих под iPad, iPhone оценить вёрстку и сказать что не так.
      Вводная - делал тестовое задание по вёрстке для одной компании.

      Задание такое:
      1) Необходимо сверстать страничку по предложенному  макету
      2) Требования:  
      - отображение  на  устройствах iPad, iPhone  от  4 до 6+
      - Только HTML + CSS ( без Javascript)
      - Как бонус — учёт  разрешения экрана  (2 файла для каждого  изображения - для ретины и без)

      Результаты работы:
      Исходники: https://github.com/alexey-pod/awem-layout
      Макеты: https://github.com/alexey-pod/awem-layout/tree/master/mockups
      Результат работы: http://awem-layout.likeuse.ru/
      Для поддержки ретины использовал вот эту штуку: https://github.com/alexey-pod/awem-layout/blob/master/css/retina.less
      Тестирование: iPad, iPhone устройств к сожалению нет -  поэтому тестировал вот здесь:
      1) https://www.google.by/webmasters/tools/mobile-friendly/
      2) http://quirktools.com/screenfly/
      3) http://lab.maltewassermann.com/viewport-resizer/

      Ответ от компании:
      Некоторые мои соображения:
      В папке с шаблонами намешано много макетов с разными названиями, которые имеют незначительные отличия.
      В частности это панель с кнопками "News Support Letter".
      Панель располагается:
      Внизу
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait.png
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%232.png
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPhone_v04.psd
      Вверху
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Portrait.png
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Album.png
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPad_v01.psd
      Есть вариант где нет панели вообще
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait%231.png
      https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%231.png
      Из-за того что я не понял как именно отличать ситуации в которых панель должна быть вверху, быть внизу, панели не должно быть - был выбран универсальный вариант панель вверху и он был свёрстан. Может быть именно в этом была моя ошибка.
      Также хочу обратить внимание - компания ничего не сказала про ретину. И я не знаю правильно сделал "ретинизацию" или нет. Может кто-то протестит на реальном девайсе и кинет скрин - буде благодарен.
      Заранее благодарен всем кто сможет подсказать мои косяки.

      Если бы мы работали через стол то я мог бы задать эти вопросы своему руководителю и переделать задание столько - сколько потребуется. Сейчас же - я не имею такой возможности поэтому надеюсь на помощь сообщества.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept