个人中心
gpt4 book ai didi

css - 手机菜单不显示在手机上，只显示在桌面上

转载 作者：行者123 更新时间：2023-11-28 05:08:34 25 4
gpt4 key购买 nike

我在我的网站上创建了 CSS 移动菜单，它在我的笔记本电脑上运行良好。当我在 680px 下最小化笔记本电脑上的浏览器时，默认菜单变成了移动菜单，但在智能手机上不能那样工作，它会保留默认菜单。我做错了什么？ 

/* CSS Document */
body{
	font-family: 'Prompt', Sans-serif;
	background-image: url(wallpaper.png);
	background-color:#ECCB6C;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	text-align: center;
	}
header{
	background-image:url(logo.png);
	background-repeat:no-repeat;
	background-position:bottom left;
	width:60%;
	height:220px;
	margin:0 auto;
	padding:0;
	}
nav{
	width:70%;
	height:auto;
	margin:0 auto 3px auto;
	background-image:url(hfbkg.png);
	padding:0 80px 0 80px;
	}
nav ul{
	overflow:hidden;
 	padding:0;
	text-align:center;
	margin:0;
	transition:max-height 0.4s;
	-webkit-transition:max-height 0.4s;
	-ms-transition:max-height 0.4s;
	-moz-transition:max-height 0.4s;
	-o-transition:max-height 0.4s;
	}
nav ul li{
	display:inline-block;
	padding:5px 7px;
	}
nav ul li:hover{
	background-color:#FFFFFF;
	}
.handle {
	width:100%;
	text-align:left;
	box-sizing:border-box;
	padding:15px 10px;
	cursor:pointer;
	color:#FFFFFF;
	display:none;
	}
	
@media screen and (max-width: 680px){
	nav ul{
		max-height:0;
	}
	.showing{
		max-height:20em;
	}	
	nav ul li{
		box-sizing:border-box;
		width: 100%;
		padding:15px 0px;
		margin:0;
		text-align:left; 
	}
	.handle{
		display:block;
	}
	}
	
@media (max-width:680px){
	#kontakt{
		width:100%;
	}
	#iframe{
		width:100%;
	}
	}
	
section{
	width:70%;
	height:auto;
	background-image:url(textbkg.png);
	line-height:1.5em;
	font-size:1.1em;
	padding:60px 80px;
	margin:0 auto;
	clear:both;
	}
section a:link {
	color:#000000;
	}
section a:hover {
	text-decoration: none;
	color:#FFAE00;
	}
section a:visited {
	text-decoration: none;
	color:#000000;
	}
#textarea{
	width:350px;
	height:200px;
	padding:2px;
	margin:5px;
	}
#ime{
	width:350px;
	height:20px;
	padding:2px;
	margin:5px;
	}
#email{
	width:350px;
	height:20px;
	padding:2px;
	margin:5px;
	}
#decoupauge img{
	margin:1%;
	border: thick solid;
	with: 15px;
	color: #353439;
	padding:2px;
	}
#ukrasi img{
	margin:1%;
	border: thick solid;
	with: 15px;
	color: #353439;
	padding:2px;
	}	
#sponzori{
	margin:5%;
	align-content:center;
	}
#kontaktobr{
	width:400px;
	height:auto;
	margin:20px 0;
	padding:10px;
	float:left;
	}
#iframe{
	float:right;
	margin:20px 0;
	padding:10px;
	}
#adresa { /* pošto su iframe i kontakt obrazac u floatu u adresi ne smije biti float zato što adresa razvlači section background do footera */
	width:410px;
	height:auto;
	margin:10px;
	padding:20px;
	}
#adresa p {
	margin:0px;
	padding:0;
	}
#adresa a:link{
	color:#000000;
	text-decoration: none;
	}
#adresa a:hover{
	text-decoration: none;
	color:#FFAE00;
	}
footer{
	width:70%;
	height:auto;
	margin:3px auto 0 auto;
	background-image:url(hfbkg.png);
	padding:5px 80px;
	text-align:end;
	color:#FFFFFF;
	clear:both;
	}
footer a:hover{
	color:#FBEE9A;
	}	
a{
	margin:0;
	}
a:link {
	color: #FFFFFF;
	text-decoration: none;
	}
a:visited {
	text-decoration: none;
	color:#FFFFFF;
	}
a:hover {
	text-decoration: none;
	color:#363539;
	}
a:active {
	text-decoration: none;
	color: #363539;
	}
p{
	text-align:justify;
	}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
<style type="text/css">
body,td,th {
	font-family: Prompt, Sans-serif;
}
</style>
</head>

<body background="wallpaper.png">

<header>
</header>
<nav>
<ul>
    <a href="index.html"><li>Početna</li></a>
    <a href="terapija.html"><li>Terapije</li></a>
    <a href="galerija.html"><li>Glerija</li></a>
    <a href="donacije.html"><li>Donacije</li></a>
    <a href="linkovi.html"><li>Linkovi</li></a>
    <a href="kontakt.html"><li>Kontakt</li></a>
 </ul>
 <div class="handle">Menu</div>
 </nav>
 <section>
   <h3><strong>O nama</strong></h3>
   <p> Udruga je počela sa radom 2013. godine..</p>
    </section>
    <script>
	$('.handle').on('click', function(){
		$('nav ul').toggleClass('showing');
	});
	</script>

<footer>
<a>Copyright 2016</a>
</footer>
</body>
</html>

最佳答案

您没有定义视口(viewport)？

在 <head> 中需要一个元标记工作:

<meta name="viewport" content="width=device-width, initial-scale=1" />

关于css - 手机菜单不显示在手机上，只显示在桌面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39701583/

25 4 0
文章推荐： javascript gridstack框架延迟加载
文章推荐： html - CSS :not for a specific td with :before selector in responsive table
文章推荐： javascript - 写 "$(' #dialog').modal ('show' );"as plain javascript?
文章推荐： html - 如何更改 div 侧边栏的高度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com