Навигация со скролом для мобильной версии сайта

[volshebnyi]

Здравствуйте!

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

Заранее благодарен за помощь!

[Switch74]

@media (max-width: 700px){

    nav {

        position: static;

        overflow: scroll;

        white-space: nowrap;

   }
}

и что не так?
Я бы начиная с 1000 уже эти правила вводил, а то у вас там меню уже переноситься начинает

[mrnobody]

8 минут назад, volshebnyi сказал:

Я видел такую навигацию только в мобильных приложениях

У родителя overflow-x: hidden; у дочерних display: inline-block; и white-space: nowrap;

Скрытый текст

 

[Switch74]

через after к nav можно добавить элемент который будет с градиентным полупрозрачным фоном
вот например генератор градиентов http://www.colorzilla.com/gradient-editor/

[Switch74]

overflow:scroll;

[mrnobody]

На десктопном браузере в режиме отладки выберите какое-нибудь мобильное устройство и посмотрите стили.

[volshebnyi]

48 минут назад, mrnobody сказал:

На десктопном браузере в режиме отладки выберите какое-нибудь мобильное устройство и посмотрите стили.

Я видел такую навигацию только в мобильных приложениях. На сайтах не видел.

[Switch74]

я вижу там scroll

[volshebnyi]

Только что, Switch74 сказал:

я вижу там scroll

Я уже пробовал scroll с самого начала. Не получилось.

[Switch74]

что именно не получилось?
пример кода можно?
У меня получилось, открывайте с мобилки http://jsfiddle.net/y6chzkun/embedded/result/dark/

[volshebnyi]

12 минут назад, Switch74 сказал:

что именно не получилось?
пример кода можно?

http://kuhonka.com.ua/svit/

[volshebnyi]

13 минут назад, Switch74 сказал:

@media (max-width: 700px){

    nav {

        position: static;

        overflow: scroll;

        white-space: nowrap;

   }
}

и что не так?
Я бы начиная с 1000 уже эти правила вводил, а то у вас там меню уже переноситься начинает

Спасибо огромное! Не там я применял стиль white-space: nowrap;

А на счет введения правил начиная с 1000 px - для планшетной версии (768 Х 1024) я просто уменьшил шрифт и все меню как раз красиво помещается. А вот уже с 700 - будет скролиться.

[volshebnyi]

Подскажите, а как "заблюрить" край блока nav, как на примере. Чтобы создавался эффект, что дальше есть продолжение меню:

[volshebnyi]

Switch74,

Как всегда, огромное спасибо!