首页 文章

如何删除桌面屏幕中的汉堡菜单图标但仅在移动设备中需要？

提问于
浏览 次
0

需要帮忙！这是侧滑动导航菜单 . 我需要更改此导航栏显示没有汉堡包菜单图标（而不是菜单图标，我需要'家，关于'等等）在桌面屏幕上，但只需要在移动屏幕上 . 这是我正在使用的代码：

<!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>

谢谢很多帮助 .

html css menu navigation

3 回答

  • 0

    具有max-width的媒体查询告诉浏览器在浏览器缩小到该大小时应用样式 . 最小宽度恰恰相反 . 它告诉浏览器在浏览器增长到该大小时应用样式 .

    在您列出的第二个媒体查询中，这是第一个在缩小浏览器时将激活的媒体查询，您告诉它显示：none将隐藏元素并删除它占用的空间 . 您还设置了visibility：hidden，它只隐藏元素但不删除它占用的空间 . 在此使用可见性是多余的 .

    在第一个媒体查询中，这是缩小浏览器时将激活的第二个媒体查询，您告诉它显示：阻止将撤消先前显示的块：无，但您仍然设置可见性：隐藏，而不是而不是将其切换到可见性：可见，因此元素仍然不会显示 .

    这是一个简单的移动优先方法示例，而不是像您的示例那样的桌面优先显示/隐藏类 .

    .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 */
   }
}
    回复于
  • 0

    这是基于屏幕宽度的显示/隐藏的媒体查询 . 更改媒体查询最小宽度以修复特定视口（移动屏幕宽度）

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

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

    在JS Fiddle预览：https://jsfiddle.net/itsselvam/r9uxtgaf/

    回复于
  • 1

    快速提示！

    如果您使用的是bootstrap 4，则可以使用预定义的类来执行此操作 .

    例如 . <div class="d-none d-md-block">Hamburger Icon code</div>

    这里的元素对于任何最小宽度小于768px的屏幕都显示无属性，并且最小宽度的显示块大于768px .

    回复于

相关问题