Сделать меню адаптивным (изменить местоположение) для одного человека, использующего переключатель? - PullRequest
Новая
       10

Сделать меню адаптивным (изменить местоположение) для одного человека, использующего переключатель?

0 голосов
/ 04 января 2019

Я хочу построить боковое меню в HTML только с использованием CSS, если это возможно. Подвох 22 в том, что мне нужно, чтобы меню двигалось с левой стороны на правую часть экрана с помощью переключателя / кнопки. Причина в том, что у меня есть друг, у которого только одна рука, и это будет для него функцией доступности. Я знал достаточно, чтобы заняться веб-кодированием, но я не знаю терминологии, чтобы найти то, что я ищу.

Я понимаю только три способа сделать это следующим образом.

Iframe: я не хочу использовать, потому что не могу его стилизовать.

Div: я не знаю, как скрыть или показать div, не нарушая макет веб-страницы.

Кодирование отдельного HTML все вместе: похоже, должен быть лучший способ.

Любые ресурсы или предложения, которые вы можете предоставить мне, которые могут помочь с этим проектом, были бы УДИВИТЕЛЬНЫ !!! Спасибо за ваше время и помощь !!!

Ответы [ 3 ]

0 голосов
/ 05 января 2019

Я бы сделал что-то вроде этого:

Если у меня есть меню внутри <div>, назовем его #my-menu-container. Я бы добавил в меню что-то вроде этого: 

#my-menu-container {
  position: absolute;
  top: 0;
  left: 0;
}

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

let btn  = document.getElementById('my-switch');
btn.onclick = () => {
  let menu = document.getElementById('my-menu-container');
  menu.classList.add('menu-right')
}

Этот класс будет примерно таким. 

#my-menu-container.menu-right {
  right: 0;
}
0 голосов
/ 05 января 2019
0 голосов
/ 05 января 2019

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

Для этого сначала нужно создать простое меню и кнопку в HTML, например: 

<ul class="left">
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
</ul>

<br class="clearFloat" />

<button onClick={togglePosition()}>Change position</button>

Для этого HTML мы должны написать соответствующий CSS. 

.left {
  float: left;
}

.right {
  float: right;
}

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0
}

button {
  display: block;
}

Свойство CSS float может размещать элементы HTML влево и вправо. Вот почему я создал два CSS-класса для них. Применение одного из этих классов к меню приведет к его изменению позиции (.left для левой позиции, .right для правой позиции).

Обратите внимание, что меню в HTML имеет className .left. Это начальная позиция, где вы хотите, чтобы ваше меню было.

Теперь нам нужно заставить меню переключать классы .left и .right, нажав на кнопку в HTML. Мы можем сделать это, написав функцию в javascript и вызвав ее с помощью клавиши onClick на кнопке. В этом случае будет вызываться функция togglePosition() для переключения имен классов для меню. Эта функция может выглядеть примерно так: 

togglePosition = () => {
    const menu = document.querySelector('ul')
  if(menu.className == 'left') {
    menu.className = 'right';
  } else {
    menu.className = 'left';
  }
}

Это все очень просто, и есть лучшие / более оптимизированные способы сделать это, но я надеюсь, что вы поймете концепцию и сможете извлечь из нее уроки. Ссылка на интерактивную игровую площадку: https://jsfiddle.net/udwfnzme/4/

...