• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Выдвижная кнопка для сайта на JavaScript (Подскажите пожалуйста по поводу кнопки выдвижной)
Выдвижная кнопка для сайта на JavaScript
AyaMi
 		Воскресенье, 27 Августа 2023 | Сообщение 1
Оффлайн
Пользователи
Сообщений:26
Награды: 0
« 7 »
Всем привет друзья. Подскажите пожалуйста по поводу кнопки выдвижной.

Нужно сделать так, чтобы она была на одном месте и я мог изменять ее дизайн. Не могу разобраться как сделать правильнее. В данный момент она прыгает вместе с доп информацией.
Пример можно посмотреть тут:

Смотреть на кнопочку "О файле"
Страна: (RU)
Kosten
 		Воскресенье, 27 Августа 2023 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44378
Награды: 70
« 555 »
Вот CSS кнопки, и делайте берез браузер стиль дизайна, так как вам угодно.

777 CSS

Код
button {color:#888888;border:1px solid #323232;background:#242424 linear-gradient(#242424,#222222);box-shadow:0 1px 2px rgba(0,0,0,.1);padding:4px;}
select{color:#888888;border:1px solid #282828;background:#222222 linear-gradient(#222222,#191919);box-shadow:0 1px 2px rgba(0,0,0,.1);padding:3px;}
input{display:inline-block;font-family:arial,sans-serif;font-size: 11px !important;color:#888888;border:1px solid #282828;background:#222222 linear-gradient(#222222,#191919);box-shadow:0 1px 2px rgba(0,0,0,.1);padding:4px;}
input:hover{color:#888888;border:1px solid #282828;background:#222222 linear-gradient(#222222,#191919);box-shadow:0 1px 2px rgba(0,0,0,.1);}
input:active{color:#888888;border:1px solid #282828;background:#191919 linear-gradient(#222222,#191919);box-shadow:0 1px 2px rgba(0,0,0,.1)inset}
form {padding:0px;margin:0px;}
input,textarea,select {vertical-align:middle;}
#mchatMsgF {
background: #242424;
border-color: #323232;
color: #999999;
}
textarea
{
background: #242424;
border-color: #323232;
color: #999999;
}


Как пример можно так сделать
Прикрепления: 6852643.jpg (17.6 Kb)
Страна: (RU)
Kosten
 		Воскресенье, 27 Августа 2023 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44378
Награды: 70
« 555 »
Вот пример, еще добавил курсор, при наведении.



Код
button {
    color: #a3a3a3;
    border: 1px solid #060606;
    background: #525050 linear-gradient(#6e6e6e,#2c2c2c);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0%);
    padding: 2px;
    cursor: pointer;
}
Прикрепления: 8859483.jpg (26.0 Kb)
Страна: (RU)
AyaMi
 		Воскресенье, 27 Августа 2023 | Сообщение 4
Оффлайн
Пользователи
Сообщений:26
Награды: 0
« 7 »
Kosten, а кнопка не будет ходить туда-сюда?
Мне хотелось бы, чтобы кнопка всегда была в одном положении. Чтобы как бы из нее выползало окно с информацией.
---Чтобы оно было в одном положении, то почитайте про свойства позиционирования в css (position:fixed или absolute). А так, то оно практически не отличается от системного спойлера (принцип работы идентичен), что вполне можно было даже взять html, что отдается прописанный системой uCoz исходник на bb-код spoiler, потом под себя поправить. С учётом того, что кнопке присвоен класс, а значит на него можно подключить желаемую стилизацию (css). И у вас там в исходниках полно ошибок, что браузер метит красным. Кнопку эту запихали не в положенное место, что уже браузер кидает её за пределы таблицы вверх на обложку материала (нельзя ставить div в tr, должен в table после tr быть td, а уже после можно ставить ваше содержимое).--- © -SAM-

Сообщение отредактировал
-SAM- - Понедельник, 28 Августа 2023, 08:19
Страна: (RU)
Kosten
 		Понедельник, 28 Августа 2023 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44378
Награды: 70
« 555 »
Цитата AyaMi ()
Мне хотелось бы, чтобы кнопка всегда была в одном положении. Чтобы как бы из нее выползало окно с информацией.

Может просто, чтоб кнопка была на одном месте, а окно отдельно, здесь я вам не подскажу. По мне так сделано все корректно и правильно, но вам виднее.

Добавлю, вы что то хотите создать похожее на модальное окно, где кнопка отдельно с окном.
---Если бы ТС нужно было выводить ту информацию в окне, то наверняка же он изначально поставил бы что-то подобное (или спросил бы про это в теме). А так, то идёт функционал по типу спойлера. В любом случае, на сайте подобных решений предостаточно выложено. Вот недавно разбирали модальное окно, к примеру. И стоит отметить, то нужно отдавать предпочтение решениям без использования скриптов (на чистом html/сss, чтобы работало оно, когда можно с его помощью достичь желаемого, не прибегая к подключению отдельного js).
---И снова тема не содержит вопроса по системе uCoz. P.S.: в общем, закрыто. Можно перекинуть в надлежащий форум и открыть. А этот форум, что идут вопросы по системе uCoz - не нужно засорять такими темами, что "вопросы" идут такие, что "ответы" нужны лишь им задавшим (для других людей тема будет бесполезной, а в глазах ПС - просто мусорная, поскольку это всё настройки под себя в тех. плане и не дают каких-то конкретных познаний широкой аудитории).--- © -SAM-

Сообщение отредактировал
-SAM- - Понедельник, 28 Августа 2023, 08:17
Страна: (RU)
Форум » Веб-разработка » Вопросы про uCoz » Выдвижная кнопка для сайта на JavaScript (Подскажите пожалуйста по поводу кнопки выдвижной)
  • Страница 1 из 1
  • 1
Поиск: