Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / кнопка-плитка с выпадающим меню / 16 сообщений из 16, страница 1 из 1
05.12.2017, 14:26
    #39564422
Ghost Writer
Ghost Writer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Подскажите дилетанту, хочу сделать кнопочку как на картинке.
По нажатию на правую область чтобы показывалась скрытая область.

моих познаний в веб дизайне/программировании для такого маловато.
 
вот моя жалкая попытка
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<body>
<style>
.menubtn {
}
.menubtn table {
  height: 100px;
  background-color: #B5E61D;
  border-collapse: collapse;
}
.menubtn td {
  border: 2px solid #000000;
  cursor:pointer;
}
.menubtn td:focus {
  border: 2px solid #FF00FF;
}
.dropdownmenu {
  border: 2px solid #000000;
  margin-top: -2px;
  padding-bottom:0;
  position: absolute;
  background-color: #FFFEE6;
}
</style>
<script>
function ShowHide(obj) {
  obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'
}
</script>
<div class="menubtn">
<table><tr><td>Основное действие</td><td onclick="ShowHide(dropdownmenu)" ><div style="border: 20px solid transparent; border-top: 20px solid #000; width:0;height:0"></td></tr></table>
</div>
<div id="dropdownmenu" class="dropdownmenu" style="width:400px;height:150px;display:none">Дополнительная информация</div>
</body>
</html>


Используя яваскрипт, сделал функцию ShowHide. Но мне не очень нравится. Мне кажется, сейчас как-то можно сделать с помощью CSS, всяких псевдоклассов типа :active :focus :hover
К тому же, нужно как-то скрывать обратно меню при клике в остальном пространстве. При потере фокуса, так сказать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.12.2017, 14:41
    #39564436
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost WriterК тому же, нужно как-то скрывать обратно меню при клике в остальном пространстве.
При "открывающем" клике вешай обработчик клика на body...
Если у источника события нет нужного родителя:
- скрывай меню
- удаляй этот обработчик с body
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.12.2017, 19:28
    #39564699
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost Writer,

я тоже делал кнопки и выпадающие списки через <table>. Но в сложных задачах полезли баги, поэтому для верстки всех элементов управления стал использовать flex (поддерживается IE11). А теги <tr> <td> <li> можно не закрывать, экономится трафик с сервера.
Обязательно попробуйте способ, который предложил krvsa
 
Мой вариант через :focus
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>tmp</title>
<style>
*, *:before, *:after {box-sizing:border-box; outline:0;}
.menuBtn {
  display:flex;
  align-items:center;
  text-align:center;
  width:160px;
  background-color:#B5E61D;
  border:2px solid #444;
  cursor:pointer;
}
.menuBtn .mainAction {
  padding:10px 0;
  width:100%;
  border-right:1px solid #444;
}
.triangle {
  margin:5px;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #444;
}
#dropDownMenu {
  border:1px solid #aaa;
  background-color:#FFFEE6;
  position:absolute;
  z-index:1;
  width:400px;
  height:150px;
  left:-99999px;
}
</style>
</head>
<body>

<div class="menuBtn" id="btn1">
  <div class="mainAction">Основное действие</div>
  <div class="triangle" onclick="showHide()"></div>
</div>
<div id="dropDownMenu" class="dropDownMenu">Дополнительная информация<br>При щелчке в этот input, блок не пропадет<input> </div>

<script>
'use strict';
function gid(i) {return document.getElementById(i);}

function getElemCoords(elem) { // Координаты элемента относительно всего документа (учитывается прокрутка)
  var box = elem.getBoundingClientRect();
  return {x: box.left + pageXOffset, y: box.top + pageYOffset};
}

var btn1 = gid('btn1'), dropDownMenu = gid('dropDownMenu'), menuSt = dropDownMenu.style;
dropDownMenu.tabIndex = '-1';

function showHide() {dropDownMenu.focus();};

dropDownMenu.addEventListener('focus', menuFocus, true);
dropDownMenu.addEventListener('blur', menuBlur, true);

function menuFocus() {
  menuSt.top = getElemCoords(btn1).y + btn1.offsetHeight -1 + 'px';
  menuSt.left = getElemCoords(btn1).x + 'px';
}
function menuBlur() {menuSt.left = '-99999px';};
</script>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.12.2017, 20:43
    #39564719
Руслан Дамирович
Руслан Дамирович
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Не нужно изобретать велосипед. Все уже изобретено до вас.

CSS drop-down:
https://www.w3schools.com/howto/howto_css_dropdown.asp
Clickable drop-down:
https://www.w3schools.com/howto/howto_js_dropdown.asp
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.12.2017, 23:08
    #39564747
Ghost Writer
Ghost Writer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Руслан Дамирович,

вот! лепота! спасибо!
нравится мне сайт w3schools.com

user89,
спасибо за интересный вариант. по поводу <table> - я хотел div, но не смог быстро слепить тестовый пример для этого вопроса .

мне чем вариант w3schools понравился - у меня кнопочек будет несколько, и этот пример я со своими скудными знаниями легко смог переделать под несколько кнопок. да и код красивый )
 
вот, гляньте, не накосячил ли.добавил параметр в myFunction(this.nextElementSibling) и продублировал цикл сворачивания менюшек, т.к. по нажатию на следующую кнопку не закрывалась предыдущая менюшка
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction(this.nextElementSibling)" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="dropdown">
<button onclick="myFunction(this.nextElementSibling)" class="dropbtn">Dropdown</button>
  <div id="myDropdown2" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(Element) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
    Element.classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>


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

krvsa,
спасибо за универсальную идею. честно говоря, у меня примерно такой вариант крутился, только не с добавлением/удалением обработчика, а с постоянным обработчиком, и этим он мне не нравился.
просто я пока еще не знаю как добавлять обработчик
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 08:44
    #39564822
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost Writerпросто я пока еще не знаю как добавлять обработчик
Дык !
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 10:22
    #39564868
Руслан Дамирович
Руслан Дамирович
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost Writer,

Учитесь использовать JSFiddle - удобнее, чем портянку кода в форум лепить.
https://jsfiddle.net/cs1fu9v4/1/
Vanilla JS (Chrome / IE11)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 13:56
    #39565054
Ghost Writer
Ghost Writer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Руслан Дамирович,

спасибо, удобно.

Кнопочка и меню всё красиво. Но я забыл об исходной постановке:
две зоны - основное действие и кнопочка, открывающая меню.

вот я тут поломал всё, внутри button запихнул div с треугольником )) не знаю просто как его еще поверх кнопки сделать. скоро мозг взорвется.
и самое главное - меню открывается теперь не там, где нужно. Помогите поправить, пожалуйста )
https://jsfiddle.net/cs1fu9v4/2/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 17:06
    #39565264
Руслан Дамирович
Руслан Дамирович
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Как-то так... уж извиняй за CSS - не мое это, рюшечки рисовать.

https://jsfiddle.net/cs1fu9v4/3/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 17:54
    #39565313
Ghost Writer
Ghost Writer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost Writerвнутри button запихнул div с треугольником ))Оказывается, внутри тага button могут быть другие таги http://htmlbook.ru/html/BUTTON
Красным дивы подсветились потому что закрывающий </div> пропустил.

Руслан Дамирович https://jsfiddle.net/cs1fu9v4/3/ мне вариант с button понравился тем, что есть эффект нажатия.

Осталось меню поправить, чтобы показывалось под "кнопкой", а не поверх нее.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 20:06
    #39565395
Руслан Дамирович
Руслан Дамирович
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost Writer,

https://jsfiddle.net/cs1fu9v4/4/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 20:25
    #39565409
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost Writer,

А чем бутстреповский дропдаун не угодил?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2017, 20:51
    #39565418
зачем bootstrap?
зачем bootstrap?
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Relic Hunter,

чего уж мелочиться-то... Даёшь extJS!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.12.2017, 10:35
    #39565613
Руслан Дамирович
Руслан Дамирович
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Пусть сначала ванильку освоит. А когда дойдет до проблем с кроссбраузерностью, тогда можно будет и предлагать. А то он сейчас откроет для себя дивный мир jQuery говнокодинга и сгинет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.12.2017, 13:30
    #39567629
Ghost Writer
Ghost Writer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Руслан Дамирович,

огромное спасибо! сам я так красиво точно не смог бы.
Еще немного напильником поработаю и будет супер. В том числе, чтобы меню закрывалось когда на "Основное действие" нажимаешь.

krvsa Дык !ясно, спасибо. жаль нет времени закрепить знания.

бутстрап надо бы изучить, но из-за одной кнопки как из пушки по воробьям. и сначала основы надо изучить. пока не до него.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.12.2017, 18:05
    #39567895
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
кнопка-плитка с выпадающим меню
Ghost Writer
бутстрап надо бы изучить, но из-за одной кнопки как из пушки по воробьям. и сначала основы надо изучить. пока не до него.ну да. если у вас сайт состоит из одной кнопки то бутстрэп не нужен.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / кнопка-плитка с выпадающим меню / 16 сообщений из 16, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 479ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1444371]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 150ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 234ms
total:  479ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]