CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Tasos Anesiadis
Tasos Anesiadis

Reputation: 1150

HTML, trying to create a sliding menu on the left (with screenshots)

I'm a beginner in web development. I'm trying to create a website with Google Maps, and I also want a menu sliding in and out on the left side. The problem is: when the menu is going in, it pushes the map lower, instead of covering it, like it should. Also the CSS that makes that menu slide, doesn't seem to work properly, meaning it does not "slide".

Menu Hidden: https://i.sstatic.net/0wiY3.jpg

Menu Showing: https://i.sstatic.net/a9SNb.jpg

I searched a lot, tried an awful lot of stuff, but I just can't seem to make it work. The nav menu is called 'menu' and the div that contains the map is called 'map'.

Any help appreciated, and please keep it simple. Thank you.

Here's my HTML code:

<% @page_title = "Main Page" %>

<!DOCTYPE html>
<html>
  <head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">


  </script>
  <title>Google Map Demo</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
  <input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">&#9776;</label>
    <div id = "qne_header"> TITLE</div>

    <nav class="menu" > 
        <ul> 
            <li><a href="#">HOME</a></li> 
            <li><a href="#">ABOUT</a></li> 
            <li><a href="#">WORK</a></li> 
            <li><a href="#">INSPIRATION</a></li> 
            <li><a href="#">BLOG</a></li> 
            <li><a href="#">CONTACT</a></li> 
        </ul> 
    </nav>

    <div id="map"></div>

    <script>
    var resize_flag=true;
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 40.53, lng: 22.88},
            zoom: 8,
            disableDefaultUI: true
        });
    }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyRSefwx9vuhCMEOLrxXsinO2efTsf4K4&callback=initMap"
    async defer></script>
  </body>
</html>

Here's my CSS code:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

#qne_header{
    height : 5%;
    background-color: #b3e6ff;
    text-align: center;
    font-size: 200%;
 }

#map {

    position:absolute;
    height: 99%;
    width: 100%;
    margin: auto;
    transition: all .3s ease-in-out; 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out;   
}

a {
    text-decoration: none; color:#00a5cc; 
}

nav { 
    width:10%;
    text-align:center;
} 

nav a { 
    display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC; 
}

nav a:hover { 
    background:#E5DAC0; color :#FFF; 
} 

nav li:last-child a {
    border-bottom:none; 
}

.menu-icon {
    padding:10px 20px; 
    background:#FFFFFF; color:#987D3E; 
    cursor:pointer; 
    float:left; 
    margin-top:4px; 
    border-radius:5px;
    margin-top: 5px;
}

#test{
    position:relative;

}

#menuToggle { display:none; }

#menuToggle:checked ~ .menu { 
    position:absolute; 
    left:0px; 
}

.menu { 
    width: 240px;

    left: -240px;
    position:absolute; 
    background:#FFFFFF;  
    transition: all .3s ease-in-out; 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
}

li { 
    list-style-type:none;
}

Upvotes: 1

Views: 156

Answers (2)

TcAcS
TcAcS

Reputation: 36

This solution is very simple, the menu is actually showing up at the right place when you press the button. The problem is that it appears to be below the map.

Give the .menu class a z-index of 1 and the menu will position itself in front of the map.

.menu {
    z-index: 1;
}

Upvotes: 1

Spencer Rohan
Spencer Rohan

Reputation: 1939

Remove position:absolute; off of .menu and it works.

EDIT:

#map{ z-index: -1; }

This allows the Map to be below the header/menu sections.

#map {
    position:absolute;
    height: 99%;
    width: 100%;
    margin: auto;
    transition: all .3s ease-in-out; 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out;   
    z-index: -1;
  }

This may cause issues with adjusting the map -- posting a JSFiddle will help everyone troubleshoot.

Upvotes: 2

Related Questions