С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
sergey_ku
0 / 0 / 0
Регистрация: 26.06.2015
Сообщений: 150
1

Адаптивная верстка меню

13.02.2018, 15:13. Просмотров 722. Ответов 1
Метки нет (Все метки)

Всем доброго времени суток!
Делаю адаптивную верстку сайта.
В версии для смартфонов нужно сделать такую кнопку(см. скриншот ниже).
Как делают такую кнопку? Нигде не найду пример.
JS код для обработки клика по этой кнопке я нашел. Но как сделать эту кнопку на HTML+CSS?
Адаптивная верстка меню
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.02.2018, 15:13
Ответы с готовыми решениями:

Адаптивная верстка
Здравствуйте, подскажите кто знает. Сверстал сайт при помощи селектора @media...

Адаптивная верстка
Всем привет! Нужен ваш совет. Верстала несколько раз уже адаптивные...

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

адаптивная верстка
Подскажите пожалуйста, почему сайт http://beta-komilfo.1gb.ru/на мобильниках...

Адаптивная верстка
Здравствуйте Уважаемые форумчане! Прошу оценить адаптивную верстку.

1
aj17
284 / 273 / 155
Регистрация: 02.06.2014
Сообщений: 1,020
13.02.2018, 15:54 2
Лучший ответ Сообщение было отмечено sergey_ku как решение

Решение

как вариант:
PHPHTML
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
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    .burger-btn-color{
      color: green;
    }
    
    .burger-btn-size{
      font-size: 4px;
    }
 
    .burger-btn {
      width: 6em;
      height: 6em;
      border-top: 1em solid currentColor;
      border-bottom: 1em solid currentColor;
      position: relative;
      cursor: pointer;
    }
 
    .burger-btn:after {
      content: ' ';
      display: block;
      height: 1em;
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: currentColor;
    }
 
  </style>
</head>
 
<body>
  <div class="burger-btn burger-btn-color burger-btn-size"></div>
</body>
 
</html>
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.02.2018, 15:54

Адаптивная верстка
Имеются два макета, десктопный вид сайта и мобильный вид. Но не пойму как...

Адаптивная верстка
Всем привет. Вот моя парочка вопросов: 1. Адаптивная верстка - это верстка...

Адаптивная верстка
Всем привет! Учусь верстать сайты на HTML+CSS без фреймворков, js и т.д., но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru