CODEWITHSUNDEEP
htmlcss
Laurent
Laurent

Reputation: 733

How can I make one part of my webpage move when I open the vertical menu

Good day, I have a web page that displays several images, texts and also a vertical menu. When I click on the three horizontal bars, when the menu unfolds, I realise that it overlaps the rest of my page. I would like that my entire page shifts horizontaly accordingly.

How can I easily achieve that ? I hope that my explanations as well as the screenshots and the code below will help you to understand my issue. Thanks for your time and your help.

enter image description here enter image description here.

my html page : 

<!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()">&times;</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">&#8593; 06:25 &#8595; 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 &#0149; Humidit&#233; 79%  &#149; Pression 1011.4 hPa  &#149; Derni&#232;re mise &#224; jour: 18.08.2016 17:15
        </Marquee>
    </div>
    <div id="tag_weather_temperature">24&deg;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&deg;C | 20&deg;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&#233r&#233e</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&#233r&#233e</p>
    </div>
    <div id="meteo_forecast_temperature_day2">
        <p>-12&deg;C | -20&deg;C</p>
    </div>
    <div id="meteo_forecast_day3">
        <p>Lundi 22.08.2016</p>
    </div>
    <div id="meteo_forecast_temperature_day3">
        <p>12&deg;C | 20&deg;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>
        &#0149;
        <a href="domotics1.html">Domotique</a>
        &#0149;
        <a href="domotics1.html">Chambres</a>
        &#0149;
        <a href="domotics1.html">SDB / WC</a>
        &#0149;   
        <a href="domotics1.html">WC Visiteurs</a>
        &#0149;
        <a href="domotics1.html">Entrée</a>
        &#0149;
        <a href="domotics1.html">Salon</a>
        &#0149;
        <a href="domotics1.html">Cuisine</a>
        &#0149;
        <a href="domotics1.html">Terrasse</a>
    </div>
        <span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776;</span>
        <div class="footer" id="footer">Domoos web mobile version 0.0</div>
</body>
</html>

my mystyle_mobile css file :

#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;
}

my navimobile css file :

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;}
}

my 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";
}

Upvotes: 1

Views: 62

Answers (3)

Jishnu V S
Jishnu V S

Reputation: 8409

your code working fine here please check with the snippet

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()">&times;</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">&#8593; 06:25 &#8595; 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 &#0149; Humidit&#233; 79%  &#149; Pression 1011.4 hPa  &#149; Derni&#232;re mise &#224; jour: 18.08.2016 17:15
      </Marquee>
        </div>
    <div id="tag_weather_temperature">24&deg;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&deg;C | 20&deg;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&#233r&#233e</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&#233r&#233e</p>
        </div>
    <div id="meteo_forecast_temperature_day2">
          <p>-12&deg;C | -20&deg;C</p>
        </div>
    <div id="meteo_forecast_day3">
          <p>Lundi 22.08.2016</p>
        </div>
    <div id="meteo_forecast_temperature_day3">
          <p>12&deg;C | 20&deg;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> &#0149; <a href="domotics1.html">Domotique</a> &#0149; <a href="domotics1.html">Chambres</a> &#0149; <a href="domotics1.html">SDB / WC</a> &#0149; <a href="domotics1.html">WC Visiteurs</a> &#0149; <a href="domotics1.html">Entrée</a> &#0149; <a href="domotics1.html">Salon</a> &#0149; <a href="domotics1.html">Cuisine</a> &#0149; <a href="domotics1.html">Terrasse</a> </div>
    <span style="font-size:20px;cursor:pointer; position:absolute; top:15px; left:15px;" onclick="openNav()">&#9776;</span>
<div class="footer" id="footer">Domoos web mobile version 0.0</div>

Upvotes: 1

longnx1986
longnx1986

Reputation: 21

I see code your html. I think you only fix 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;

}

Upvotes: 1

Jenti Dabhi
Jenti Dabhi

Reputation: 880

You can add margin left to your body

see this link

http://www.w3schools.com/howto/howto_js_sidenav.asp

Upvotes: 0

Related Questions