时间戳

首页 > 解决方案 > 在网页中做一个响应式菜单

html - 在网页中做一个响应式菜单

问题描述

我想渲染我的菜单，使其能够在多个平台（例如桌面浏览器、移动设备和平板电脑）上响应。如何使用 CSS 完成此任务？

这是我当前的 CSS：

ul {
	top:0px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	z-index:99;
	cursor: pointer;
	background-color:white;
    text-align:center;
}
li {
	top:0px;
    width:20%;
	font-family:odin rounded;
	font-size:2.5vw;
    float: left;
	height:55px;
	background-color:rgb(240,240,240);
	
	border-right:1px solid black;
	transition:color 1s, background-color 1s;
	
}
li:hover	{
	color:white;
	background-color:black;
}

li a {
	
    display: flex;
	display: -webkit-flex;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

img.logo	{
	height:55px;
	width:auto;
	position:fixed;
	top:0px;
	z-index:99;
}
.text		{
	display:flex;
	align-items:center;
	text-align:center;
	justify-content: center;
}
a.princip:hover {
	background: transparent url('main.html');
	cursor: pointer;
}
#barre {
  overflow: hidden;
  background-color: #333;
  z-index:99;
}

#barre a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#barre a:hover {
  background-color: #ddd;
  color: black;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}




My HTML:
<div id="barre">
  <ul >
		<li class="text"><a href="main.html"><img class="logo" src="https://cdn1.imggmi.com/uploads/2018/7/18/97bc4958d2a5baf34ad21071a994bb0f-full.png" alt="problem"></a><pre style="font-family:odin rounded">    Team NoMaD</pre></li>
		
		<li class="text" onclick="location.href = 'main.html';">Menu</li>	
		<li class="text" onclick="location.href = 'members.html';">Membres</li>	
		<li class="text" onclick="location.href = 'calender.html';">Calendrier</li>
		<li class="text" onclick="location.href = 'contact.html';">Contact</li>
		
	</ul>
</div>
<script>
window.onscroll = function() {myFunction()};


var sticky = barre.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    barre.classList.add("sticky")
  } else {
    barre.classList.remove("sticky");
  }
}
</script>
<div class="carte">

理想的结果（在移动设备上）是菜单下拉显示为一条线和一个正方形。我在全屏菜单中遇到的问题之一不是一行。

标签： htmlcssdrop-down-menumenu

解决方案

将此添加到您的样式中

@media only screen and (max-width: 600px){
    li{
        width: 100%;
    }
}

使用此代码，您可以只使用纯 CSS 来实现响应式设计，但我强烈建议使用 Bootstrap4 和 SASS

推荐阅读