打开垂直菜单时，如何将网页的一部分移动
美好的一天， 我有一个网页，显示几个图像，文本和垂直菜单。当我点击三个水平条时，当菜单展开时，我意识到它与我页面的其余部分重叠。我希望我的整个页面可以相应地改变。
我怎样才能轻松实现这一目标？我希望我的解释以及屏幕截图和下面的代码可以帮助您理解我的问题。感谢您的时间和帮助。
我的html页面：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Domoos mobile</title>
<meta http-equiv="refresh" content="600">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_mobile.css"/>
<link rel="stylesheet" type="text/css" href="css/navimobile.css">
<script type="text/javascript" src="scripts/navimobile.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<header class="banner" id="header" role="banner">
<div id="domoos_logo"><img src="assets/icons/logo_Domoos_lab.png" alt="" style="width:75px;height:54px;"></div>
<div id="tag_domoos_title">Domoos mobile</div>
<div id="datetime">
<script type="text/javascript">window.onload = getTimeDate('datetime');</script>
</div>
<div id="tag_sunrise_sunset"><p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 06:25 ↓ 20:33</p></div>
</header>
<div id="current_weather_conditions_title">Conditions météo actuelles</div>
<div id="tag_additional_weather_information">
<Marquee Behavior="scroll" Scrolldelay="180">Vent 15 km/h SO • Humidité 79% • Pression 1011.4 hPa • Dernière mise à jour: 18.08.2016 17:15
</Marquee>
</div>
<div id="tag_weather_temperature">24°C</div>
<div id="tag_weather_condition">Pluie faible</div>
<div id="meteo_icon"><img src="assets/meteo_icons/neige-forte-big.png" alt="" style="width:40px;height:40px;"></div>
<div id="current_weather_forecast_title">Prévisions météorologiques</div>
<div id="meteo_forecast_day1">
<p>Samedi 20.08.2016</p>
</div>
<div id="meteo_forecast_temperature_day1">
<p>12°C | 20°C</p>
</div>
<div id="meteo_forecast_condition_day1">
<p><img src="assets/meteo_icons/pluie-moderee.png" alt="" width="18" height="18"> Pluie modérée</p>
</div>
<div id="meteo_forecast_day2">
<p>Dimanche 21.08.2016</p>
</div>
<div id="meteo_forecast_condition_day2">
<p><img src="assets/meteo_icons/eclaircies.png" alt="" width="18" height="18"> Pluie modérée</p>
</div>
<div id="meteo_forecast_temperature_day2">
<p>-12°C | -20°C</p>
</div>
<div id="meteo_forecast_day3">
<p>Lundi 22.08.2016</p>
</div>
<div id="meteo_forecast_temperature_day3">
<p>12°C | 20°C</p>
</div>
<div id="meteo_forecast_condition_day3">
<p><img src="assets/meteo_icons/ensoleille.png" alt="" width="18" height="18"> Faibles passages nuageux</p>
</div>
<div id="hyperlinks_mobile">
<a href="home_mobile.html">Domoos home</a>
•
<a href="domotics1.html">Domotique</a>
•
<a href="domotics1.html">Chambres</a>
•
<a href="domotics1.html">SDB / WC</a>
•
<a href="domotics1.html">WC Visiteurs</a>
•
<a href="domotics1.html">Entrée</a>
•
<a href="domotics1.html">Salon</a>
•
<a href="domotics1.html">Cuisine</a>
•
<a href="domotics1.html">Terrasse</a>
</div>
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰</span>
<div class="footer" id="footer">Domoos web mobile version 0.0</div>
</body>
</html>
my mystyle_mobile css文件：
#tag_domoos_title{
font-family:Arial;
font-size: 150%;
text-align: left;
position: absolute;
top: 5px;
left: 130px;
color:blue;
z-index:10;
font-weight: 900;
}
#tag_update{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 20px;
left: 90px;
color:blue;
}
#datetime{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 40px;
left: 130px;
color:blue;
}
#tag_sunrise_sunset{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 50px;
left: 50px;
color:black;
}
#tag_weather_temperature{
font-family:Arial;
font-size: 100%;
text-align: right;
position: absolute;
top: 145px;
right: 15px;
color:black;
font-weight: 900;
}
#current_weather_conditions_title{
font-family:Arial;
font-size: 95%;
text-align: left;
position: absolute;
top: 110px;
left: 10px;
color:blue;
font-weight: 900;
}
#current_weather_forecast_title{
font-family:Arial;
font-size: 95%;
text-align: left;
position: absolute;
top: 200px;
left: 10px;
color:blue;
font-weight: 900;
}
#tag_weather_condition{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 130px;
left: 10px;
color:black;
font-weight: 600;
}
#tag_additional_weather_information{
font-family:Arial;
font-size: 90%;
text-align: center;
position: absolute;
top: 150px;
left: 10px;
width: 250px;
color:black;
}
#meteo_icon {
position: absolute;
right: 10px;
top: 100px;
}
#meteo_forecast{
font-family:Arial;
font-size: 100%;
float:left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
height:434px;
width:870px;
top:200px;
position: relative;
}
#meteo_forecast_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 215px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 285px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 355px;
left: 10px;
color:black;
font-weight: 600;
}
#meteo_forecast_temperature_day1{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 215px;
right: 5px;
color:black;
}
#meteo_forecast_temperature_day2{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 285px;
right: 5px;
color:black;
}
#meteo_forecast_temperature_day3{
font-family:Arial;
font-size: 80%;
text-align: right;
position: absolute;
top: 355px;
right: 5px;
color:black;
}
#meteo_forecast_condition_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 235px;
left: 10px;
color:black;
}
#meteo_forecast_condition_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 305px;
left: 10px;
color:black;
}
#meteo_forecast_condition_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 375px;
left: 10px;
color:black;
}
#domoos_logo {
position: absolute;
left: 50px;
top: 0px;
}
#lorem{
font-family:Arial;
font-size: 100%;
text-align: left;
position: absolute;
top: 100px;
left: 10px;
height: auto;
}
#footer
{
font-family:Arial;
font-size: 40%;
clear: both;
border: 1px groove #aaaaaa;
background: blue;
color: White;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
}
#hyperlinks_mobile
{
font-family:Arial;
font-size: 80%;
text-align: center;
position: absolute;
top: 500px;
left: 10px;
color:black;
}
ul {
background: #bbb;
}
li, [class*="grid"] > * {
background: #ccc;
}
header, footer {
background: #ddd;
}
body {
background-color:#ddd;
}
我的navimobile css文件：
body {
font-family: "Lato", sans-serif;
}
.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, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
我的javascript：
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";
}
3 个答案:
答案 0 :(得分：1)
我看到你的HTML代码。我想你只修复了css：
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 20;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
答案 1 :(得分：1)
您的代码在这里工作正常，请查看代码段
＆＃13;
＆＃13;
＆＃13;
＆＃13;
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}body {
padding: 30px;
}
.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;
text-align: center;
}
.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;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
} <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div>
<header class="banner" id="header" role="banner">
<div id="domoos_logo"><img src="assets/icons/logo_Domoos_lab.png" alt="" style="width:75px;height:54px;"></div>
<div id="tag_domoos_title">Domoos mobile</div>
<div id="datetime">
<script type="text/javascript">window.onload = getTimeDate('datetime');</script>
</div>
<div id="tag_sunrise_sunset">
<p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 06:25 ↓ 20:33</p>
</div>
</header>
<div id="current_weather_conditions_title">Conditions météo actuelles</div>
<div id="tag_additional_weather_information">
<Marquee Behavior="scroll" Scrolldelay="180">
Vent 15 km/h SO • Humidité 79% • Pression 1011.4 hPa • Dernière mise à jour: 18.08.2016 17:15
</Marquee>
</div>
<div id="tag_weather_temperature">24°C</div>
<div id="tag_weather_condition">Pluie faible</div>
<div id="meteo_icon"><img src="assets/meteo_icons/neige-forte-big.png" alt="" style="width:40px;height:40px;"></div>
<div id="current_weather_forecast_title">Prévisions météorologiques</div>
<div id="meteo_forecast_day1">
<p>Samedi 20.08.2016</p>
</div>
<div id="meteo_forecast_temperature_day1">
<p>12°C | 20°C</p>
</div>
<div id="meteo_forecast_condition_day1">
<p><img src="assets/meteo_icons/pluie-moderee.png" alt="" width="18" height="18"> Pluie modérée</p>
</div>
<div id="meteo_forecast_day2">
<p>Dimanche 21.08.2016</p>
</div>
<div id="meteo_forecast_condition_day2">
<p><img src="assets/meteo_icons/eclaircies.png" alt="" width="18" height="18"> Pluie modérée</p>
</div>
<div id="meteo_forecast_temperature_day2">
<p>-12°C | -20°C</p>
</div>
<div id="meteo_forecast_day3">
<p>Lundi 22.08.2016</p>
</div>
<div id="meteo_forecast_temperature_day3">
<p>12°C | 20°C</p>
</div>
<div id="meteo_forecast_condition_day3">
<p><img src="assets/meteo_icons/ensoleille.png" alt="" width="18" height="18"> Faibles passages nuageux</p>
</div>
<div id="hyperlinks_mobile"> <a href="home_mobile.html">Domoos home</a> • <a href="domotics1.html">Domotique</a> • <a href="domotics1.html">Chambres</a> • <a href="domotics1.html">SDB / WC</a> • <a href="domotics1.html">WC Visiteurs</a> • <a href="domotics1.html">Entrée</a> • <a href="domotics1.html">Salon</a> • <a href="domotics1.html">Cuisine</a> • <a href="domotics1.html">Terrasse</a> </div>
<span style="font-size:20px;cursor:pointer; position:absolute; top:15px; left:15px;" onclick="openNav()">☰</span>
<div class="footer" id="footer">Domoos web mobile version 0.0</div>
答案 2 :(得分：0)
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？