1
おはよう、 私はいくつかの画像、テキスト、および垂直メニューを表示するウェブページを持っています。 3つの横棒をクリックすると、メニューが展開されると、それが私のページの残りの部分と重なっていることがわかります。私はページ全体がそれに応じて水平にシフトしたいと思います。垂直メニューを開いたときにウェブページの一部を移動するにはどうすればいいですか
どうすれば簡単に達成できますか？私の説明、スクリーンショット、下のコードが私の問題を理解するのに役立つことを願っています。あなたの時間とあなたの助けに感謝します。
。
私の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>
私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";
}
に確認してくださいあなたが代わりの相対位置を使用しようとしました絶対の？ –
私は全く間違っているかもしれませんが、 '絶対的な'とすれば、それぞれの要素の位置をより適切に制御できると思っていました。 – Laurent