Табы без JS

[feeman]

Извиняюсь, если не в тот раздел запостил.

Вообщем всю голову себе сломал, как своять в живую данный скрин без Javascript'a.

Если кто встречался с подобной задачей, поделитесь примером. 

 

P.S. вознаграждение гарантируется! =)

 

 

 

[Ivan_83]

css какнить может, больше активки нет, если не упарываться по webgl и webassembly. Но я просто слышал слова, может копание в этих направлениях приведёт в тупик.

[default_vlan]

css3 умеет. Но почему без js?

[TheUser]

9 часов назад, feeman сказал:

без Javascript'a.

Страшный сон современных сайтостроителей.

[alibek]

CSS, даже второй, так может.

Но сайт без JS это глупо.

[snvoronkov]

59 минут назад, alibek сказал:

Но сайт без JS это глупо.

Не-а. С включенным NoScript/uMatrix не я один по сети хожу. В некоторых штатах США уже сильно за 10% выползло. И это не только там. Просто они проанализировать не поленились. А тенденция - общемировая.

[alibek]

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

С включенным NoScript

Включенный NoScript и отключенный в браузере JS — это разные вещи.

Сейчас делать сайт без JS — это примерно как делать автомобиль с использованием только мускульного привода: возможно, кому-то даже понравится, но совершенно непрактично.

[snvoronkov]

27 минут назад, alibek сказал:

Сейчас делать сайт без JS — это примерно как делать автомобиль с использованием только мускульного привода: возможно, кому-то даже понравится, но совершенно непрактично.

Некорректное сравнение. Скорее автомобиль без кнопок управления навороченной аудиосистемой в половину руля и модного, цветного, сенсорного LCD для управления двигателем, который напрочь промерзает в местных условиях. :-)

 

Заглавная страничка должна быть без JS, чтобы случайные посетители смогли найти то, что им нужно даже в том случае, когда у них JS отключен напрочь.

[Ivan_83]

4 часа назад, alibek сказал:

Включенный NoScript и отключенный в браузере JS — это разные вещи.

У меня носкрипт по дефолту отключает жс везде, кроме избранных сайтов типа этого.

Не вижу ничего странного в этом, по другому просто нельзя.

Параллельно там ещё регвест полиси блочит обращения к другим доменам и ещё на днс домашнем много доменов порезано.

 

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

[feeman]

6 часов назад, default_vlan сказал:

css3 умеет. Но почему без js?

Это главная страница. И по условиям на ней не должно быть JS-ов....

 

6 часов назад, default_vlan сказал:

css3 умеет

Это конечно хорошо, но кто бы теперь помог накодить, либо примером поделиться...

[feeman]

5 часов назад, snvoronkov сказал:

Просто они проанализировать не поленились.

@snvoronkov , Вы всё верно говорите.

 

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

[default_vlan]

31 минуту назад, feeman сказал:

Это главная страница. И по условиям на ней не должно быть JS-ов....

И что? Очень странное условие.) Ну да фиг с ней.
Я бы смотрел в сторону https://ruseller.com/lessons.php?rub=2&id=1600 как вариант.

Готового решения вы не найдете.

[feeman]

@default_vlan , благодарю за наводку.

[Stahlhammer]

Вот несколько сниппетов, которые помогут вам решить поставленную задачу средствами чистого css3

 

Но, на мой скромный взгляд, в нынешние времена отказ от использования скриптов на странице - это невероятно странное решение.

[feeman]

@Stahlhammer , примеры красочные, но относящихся к моему случаю я не нашел...

[st_re]

 а тупо несколько страниц и хреф ссыли на другие страницы с выбранными  другими табами ? ну можно сделать чтобы при наличии js оно переключалось скриптом, без скриптов с перезагрузкой страницы.. (а то все эти стили тоже можно позапрещать..)

[alibek]

4 часа назад, feeman сказал:

@Stahlhammer , примеры красочные, но относящихся к моему случаю я не нашел...

Аккордеон не подошёл?

Если отключить свёртывание, то это вкладки и есть.

[Stahlhammer]

@feeman в этих примерах описаны, если не все, то львиная доля, финтов, которые вы сможете сделать при помощи css.

 

Если вы для своей задачи ничего не почерпнули, значит я бы рекомендовал пересмотреть ТЗ с учетом использования скриптов.

[feeman]

32 минуты назад, Stahlhammer сказал:

 в этих примерах описаны, если не все, то львиная доля, финтов, которые вы сможете сделать при помощи css

Приведенные примеры не имеют не чего схожего с моей задачей.

Если не можете предложить что-то по делу, не развивайте дальше пустых сообщений.... 

[Stahlhammer]

14 часов назад, feeman сказал:

Приведенные примеры не имеют не чего схожего с моей задачей.

 

Вот здесь приведен пример реализации вкладок на css

 

Или у вас что-то иное подразумевается под табсами?

[feeman]

В данном случае, согласен, пример схож с моей задачей.

Но у данного примера, как и у сотни других которые я находил в интернете, все базируется на объединение одного фона и стилей ко всем табам (вкладкам).

А у меня каждый таб, это картинка которая меняется при наведении.

 

P.S. Если лезть в код этих примеров, придется 80% переписать, от чего я не восторге...

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

[ixi]

В 23.07.2018 в 17:40, feeman сказал:

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

При наведении -- погуглите css hover tabs, вариантов полно. При выводе мыши от табов/содержимого содержимое сбрасывается -- без скриптов это неустранимо.

 

И не забывайте -- на тачскринах hover не работает, придётся городить дикий гибрид с неочевидным поведением.