Добавление элементов для определенных разрешений - PullRequest
Новая
       6

Добавление элементов для определенных разрешений

0 голосов
/ 28 марта 2020

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

1) В настоящее время я работаю над отзывчивостью моего сайта и удобством использования. этого Так как мое меню выглядит хорошо на p c, но не на мобильных устройствах, я хочу использовать панель навигации, видимую только на смартфонах. Я нашел некоторую помощь в W3Schools, но она не позволит мне иметь отдельные меню для разных разрешений. Как добавить div на мою страницу html, которая не отображается на экранах или планшетах p c, но отображается на телефонах?

2) Это то, что я ищу: Я хотел бы иметь 2 меню, одно для экранов ПК / ноутбука или планшета, а другое только для смартфонов. Я бы хотел использовать панель навигации в меню для смартфонов (используя меню гамбургеров). Если я использую класс для навигационной панели на домашней странице, он будет отображаться в каждом формате, а если я использую display: none; Это не покажет нигде. Как мне это исправить?

Я искал этот вопрос на stackoverflow (и на других сайтах) и нашел похожий вопрос , хотя решение там не помогло мне до сих пор , Если ответы там действительно заполняют мой вопрос, заданный здесь, что я делаю не так?

Текущий код :

html: 

<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script type="text/javascript">
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
    } else {
    x.style.display = "block";
  }
}

CSS: 

/*I won't put all css in here, as it would get a bit messy*/
* {
box-sizing: border-box;
}

.topnav {
  display: block;
}

@media only screen and (max-height: 768px){
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}

.topnav #myLinks {
display: none;
}

.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #4CAF50;
color: white;
}
}

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

(извините за мой плохой Engli sh, также я знаю, что этот ответ немного запоздал, но я надеюсь, что это поможет) У вас может быть один файл CSS, предназначенный для P C (в моем примере это p c. css), который скрывает меню, предназначенное для мобильных устройств, с display: none;, а другое, которое делает то же самое, но вместо этого скрывает меню, предназначенное для P C (в моем примере это называется мобильный. css). Это можно сделать с помощью следующего JS, который проверяет, меньше или равна ширина вашего экрана 699px, а затем изменяет CSS файл p c. css на мобильный. css

if (screen.width <= 699) {
    // get all links in the head (including CSS)
    var allLinks = document.head.getElementsByTagName('link');
    // find and replace the element
    for (var i = 0; i < allLinks.length; i++) {
        if (allLinks[i].href = "pc.css") {
            allLinks[i].href = "mobile.css";
        }
0 голосов
/ 28 марта 2020

Для настройки медиа-запросов вы используете 

@media (//media size in here) { 
  // css for that media query in here
}

Реальным примером этого является, например, 

@media (max-width: 990px) {
  .menu {
    display: none;
  }
}

Основное c меню бургера может быть достигнуто с помощью выполняя следующие шаги:

1) Создайте класс с бургер-меню в качестве предыдущего элемента-брата навигации, которую вы хотите скрыть на экране мобильного устройства. a) Вы не хотите, чтобы это отображалось на ваших настольных носителях, поэтому в css введите его как display: none;

2) Создайте медиазапрос для нужного устройства. Скажем, 480px для мобильного устройства.

3) В этом медиазапросе задайте стиль навигации, которую вы хотите отобразить при наведении курсора (или нажмите), в качестве отображения: нет;

4) Внутри этого Медиа-запрос, стиль вашего бургер-меню. В моем примере я изобразил что-то очень простое c по временным причинам, но вы можете исследовать использование диапазонов для создания адаптивного меню бургера.

5) В этом медиазапросе объявите псевдо при наведении курсора. -класс для вашего бургер-меню, которое обращается к скрытой навигации. Поскольку вы поместили бургер-меню в качестве предыдущего родственного элемента вашей навигации, вы можете использовать правило + css для его нацеливания следующим образом: 

.burger-menu:hover + .menu {

}

Это означает, что при наведении курсора на бургер -menu, вы будете влиять на css .menu. Вы можете указать, как стили .menu будут затронуты в селекторе CSS.

Вот базовый c пример того, как этот процесс работает с вашим кодом.

Добавьте это к ваш html, перед вашим .menu 

<div class="menu">

Добавьте это к вашему css файлу, внизу 

.burger-menu {
  display: none;
}
@media (max-width: 480px) {
  .menu {
    display: none;
  }
  .burger-menu {
    display: block;
    background-color: white;
    height: 30px;
    width: 30px;
    position: fixed;
    top: 10px;
    right: 10px;
  }
  .burger-menu:hover + .menu {
    display: block;
  }
}

Как правило, вы продвигаете это с помощью toggleClass с JQuery для добавления и удаления отображения в меню навигации при нажатии на меню бургера.

Ps преимущество использования интервалов для создания вашего бургер-меню будет в том случае, если вы хотите, чтобы оно имело хорошую анимацию, переходя от бургера. меню к кресту или стрелке и т. д. c.

...