Перейти к содержимому
Калькуляторы

Табы без JS

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

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

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

 

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

 

FR.jpg

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

без Javascript'a.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

 

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

css3 умеет

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 смайлов.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.