Question

我是html和css的新手。但我一直在做一些事情。我正在尝试从w3.css这个resposive topnav 当我在手机上打开网站时，我会在“主页”顶部显示关闭图标。如果没有打开，它显示在，而不是在右侧。如果在计算机上，请放大，直到图标进入家中。我有这个html的在线版本：http://nbgsistem.com/teste_w3.html

<style>  
  ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0; 
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float:none;display:inline-block}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  transition: 0.2s;
  font-size: 100%;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:800px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    position:relative;
    float: right;
    display: inline-block;
  }
}


@media screen and (max-width:800px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    float:right;
    right: 0;
    top: 0;
  }


  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
</style>

</head>

                            <!--WebSite-->

<body background="images/NBG_back.png"> 

                            <!--Top Navigation-->


<div class="w3-black-mod w3-center">
    <a href="Index.html"><img src="images/NBG.png" alt="NBG Logo"  style="width:300px;height:100px;"></a>
</div>
<ul class="topnav w3-light-gray w3-large w3-center" id="myTopnav">
  <ul class="w3-navbar w3-black-mod w3-large w3-center">    
    <li><a class="w3-border-bottom w3-current" href="index.html">Home</a></li>
    <li><a class="w3-border-bottom w3-hover-selec" href="destaques.html">Destaques</a></li>
    <li><a class="w3-border-bottom w3-hover-selec" href="produtos.html">Produtos</a></li>
    <li><a class="w3-border-bottom w3-hover-selec" href="haccp.html">HACCP</a> </li>
    <li><a class="w3-border-bottom w3-hover-selec" href="fds.html">Fichas de Segurança</a></li>
    <li><a class="w3-border-bottom w3-hover-selec" href="contactos.html">Contactos</a></li>
    <li class="icon"><a href="javascript:void(0);" style="font-size:100%; position: relative" onclick="myFunction()">☰</a></li>
  </ul>
</ul>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav w3-light-gray w3-large w3-center") {
    x.className += " responsive";
} else {
    x.className = "topnav w3-light-gray w3-large w3-center";
}
</script>

提前致谢。

响应的topnav“关闭图标”覆盖所选标签

0 个答案: