Как убрать значок меню гамбургера на рабочем столе, но нужно только на мобильном устройстве? - PullRequest
Новая
       7

Как убрать значок меню гамбургера на рабочем столе, но нужно только на мобильном устройстве?

0 голосов
/ 10 декабря 2018

нужна помощь!Это боковое скользящее навигационное меню.Мне нужно изменить этот показ навигационной панели без значка меню гамбургера (вместо значка меню мне нужно «домой, о» ... и т. Д.) На экране рабочего стола, но нужно только на экране мобильного телефона.Вот код, который я использую: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
}
</script>

</body>
</html>

Большое спасибо.

Ответы [ 3 ]

0 голосов
/ 10 декабря 2018

Вот медиа-запрос для отображения / скрытия в зависимости от ширины экрана.Измените минимальную ширину медиазапроса, чтобы исправить конкретный видовой экран (ширина экрана мобильного устройства) 

.menu {display: none; /* Hide on Desktop */}

@media (min-width: 600px) {
   .menu {display: block; /* Show on Mobile */}
}

Предварительный просмотр на JS Fiddle: https://jsfiddle.net/itsselvam/r9uxtgaf/

0 голосов
/ 10 декабря 2018

Просто быстрый совет!

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

Например, <div class="d-none d-md-block">Hamburger Icon code</div>

здесь элемент имеет отображениесвойство none для экрана с минимальной шириной менее 768 пикселей и блоком отображения с минимальной шириной более 768 пикселей.

0 голосов
/ 10 декабря 2018

Медиа-запрос с максимальной шириной говорит браузеру применять стили, когда браузер сжимается до этого размера.Мин-ширина противоположна.Он сообщает браузеру применять стили, когда размер браузера увеличивается до этого размера.

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

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

Вот простой пример подхода, ориентированного на мобильные устройства, а не настольного компьютера.сначала как ваш пример, чтобы показать / скрыть класс. 

.my-mobile-image {
   display: none; /* This is how it looks on mobile */
}

@media (min-width: 600px) {
   .my-mobile-image {
     display: block; /* This is how it looks on desktop */
   }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...