Как сделать плавающую кнопку без срипта?

Question

[Masterof]

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

Может где примеры реализации есть на кодепане не мог найти может не правильно вводил название так как не понял как же это назвать бургер меню не то а плавающая кнопка то нет такой реализации

Comments

[Ankhena]

Зачем это делать без JS?

Но можно:
с помощью :target
https://waksoft.susu.ru/2016/07/16/tvorcheskoe-isp...

Или с помощью чекбокса и соседних селекторов.

Но потом вам захочется закрывать его по клику мимо кнопочек (это можно сделать и таргетом, но это не модалка и пользователи могут и не захотеть закрывать эту панельку), закрывать нажатием на ту же самую кнопочку и подобное.

[Сергей delphinpro]

Что за фетиш такой – костылить без скриптов?

[Masterof]

Сергей delphinpro, а зачем грузить сайт лишними скриптами

[Dino Winchester]

Ankhena, Сергей delphinpro, проблема лежит на поверхности. В некоторых статьях, разработчики рекомендуют использовать для создания модальных окон, табов, аккордеонов, etc - только CSS/HTML, без единой строчки JS. Читая подобный материал, многие люди воспринимают это как нечто оригинальное и начинают думать что JS - это страшная штука. Типа скрипты безумно нагружают сайт или если использовать много скриптов, будут какие-то мифические конфликты между ними и сайт будет сломан... эпичные фантазии.

Я абсолютно не удивлюсь если однажды будут появляться глупые вопросы, в духе:

"Как работать с localStorage без JS, используя только CSS",
"Как отправить fetch с помощью CSS".

Ну и так далее, насколько только хватит фантазии.

[szQocks]

Masterof, если очень хочешь без js то держи пример

[szQocks]

Masterof, сейчас там ul постоянно отображается, но можно его и скрывать и через анимацию показывать но это уже другой вопрос

[Masterof]

szQocks, спасибо, отлично, простенько и не груз

[szQocks]

Masterof, трата времени друг) я написал пример просто который и советовала Ankhena, через чекбокс, так же через таргет там можно накостылить закрытие этих кнопок с соц сетями, этот функционал css не для этой задачи.

[Сергей delphinpro]

Masterof,

а зачем грузить сайт лишними скриптами

Вы правы – незачем. Лучше костылей наделать...

[Masterof]

Сергей delphinpro, Вот все осуждают, поясните пожалуйста почему это хуже или лучше, почему костыль я так понял это называется то что я хочу костыль без срипта он плох и как на него реагирует google speed

[Сергей delphinpro]

Masterof, Потому что использование элементов не по назначению не привествуется. Что такое чекбокс? Это элемент формы для ввода данных.
Псевдокласс :target еще можно использовать, но это влечет за собой изменение URL, а значит изменение истории навигации. Налицо сайд-эффект, который обычно не нужен.

А нужно всего-то написать пару строк

document.querySelectorAll('.button').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelector(btn.dataset.targetId).classList.toggle('open');
  })
})

Которые совершенно не "нагружают" вашу страницу.

И я уже молчу про доступность...

[Masterof]

Сергей delphinpro, А есть пример с этим скриптом чтобы можно было глянуть как его применить, а то я ну не совсем знаю как его применить с 0. Спасибо

[v3shin]

Masterof,

зачем грузить сайт лишними скриптами

А лишними стилями? ;)

[Сергей delphinpro]

Masterof, я вам скидывал семь ссылок, в том числе и с вариантами простейших скриптов.

[Masterof]

Сергей delphinpro, ппц то ли сайт но я не вижу этих ссылок, где они, тонкости форума может ищу не могу найти где вы писали под моим постом

[Сергей delphinpro]

Masterof, они были под вашим ответом, который вы, вероятно, удалили

[Masterof]

Сергей delphinpro, да не трогал я ничего, жаль не успел я так и глянуть. Если не трудно возможно ли повторить пожалуйста

[Сергей delphinpro]

Masterof, поищите сами https://codepen.io/search/pens?q=+social+menu

Answer 1

[Сергей delphinpro]

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

Comments

[Сергей delphinpro]

Masterof, я вам дал аж СЕМЬ живых примеров кода

[Сергей delphinpro]

Masterof, Между прочим, если вы не разработчик, и нихрена ни в теме, то не стоит пытаться сделать самому. Только время потратите. А если все же разработчик, пусть и начинающий, то очень хреновый, если так реагируете на рабочий алгоритм действий для реализации задумки.

[Masterof]

Сергей delphinpro, сори у меня или интернет фиговый я не увидел кода, сейчас вот только увидел код, ещё раз прошу прощения. Реагирую так как бывает о вечают словами просто без примера кода.

[Masterof]

не могу понять почему я на телефоне вижу код который вы дали а на пк нет https://prnt.sc/B5L1BSEwwroj

Answer 2

[Айнур Ярулин]

Копай в сторону псевдокласса :target
https://developer.mozilla.org/en-US/docs/Web/CSS/:...

Comments

[wakenbyWork]

конч

[Айнур Ярулин]

wakenbyWork, ?

Answer 3

[Masterof]

Подскажите почему ругается