Jump to content

Push Menu Assistance


CandiAnne

Recommended Posts

I am working on a site to make it look and work like the images below. I got the push menu figured out because I found the tutorial here. I have the 2nd div for the line toggle and and the logo and the 3rd div for the main content

Problem is I don't know how to make the 2nd div full length height: 100% didn't work nor do I knoq how to center the lines on top or center the logo in the center of the div's length. Underneath the photos is my current code. Please assist as this is a ballpark I've never played in. Thank you in advance !!!!!!!!!

sample1-1.png.262a3b00c7021f04af3cf208a2672f2f.pngsample2-2.png.b20204b6c6c25c4ebcfd835c65a9adbf.png

<head>
<style>
body {
    font-family: "Lato", sans-serif;
   
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #212121;
    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 p {
        position: absolute;
        bottom: 100px;
        color: #CACFD2;
        font-size: 12px;
        left:10%;
        }

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav a.mail {
        color: #CACFD2;
        font-size: 12px;
        left:10%;
        padding: 0;
    text-decoration: none;
     
    }

    
#logozone {
background-color: #212121;
    transition: margin-left .5s;
    float: left;
    width: 10%;
    height: 100%;
    padding: 2px;
}

img {
   display: block;
    margin: auto;
    width: 50%;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 2px;}
  .sidenav a {font-size: 18px;}
}

</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">Current Projects</a>
  <p>client info</p>
  
</div>


<div id="logozone">
   <span style="text-align:center; font-size:30px;color:#CACFD2;cursor:pointer" onclick="openNav()">&#9776; 
   <div><img src="here.jpg"></div>
   </div>
    
 <script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("logozone").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("logozone").style.marginLeft= "0";
}
</script>
  
</div>

<div>This is a the main content area</div>
     
</body>

Link to comment
Share on other sites

You have to set your html and body height to 100% to make your div height: 100% work. I guess you want to center your logo vertically like in the image you showed. To do so, you can either use flexbox or if you want to support IE ≤ 9, you can wrap your logo in a div the size of your logo and style it like so

.logo_wrapper {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0; 
	height: 100px; /* height of your logo */
	width: 100px; /* width of your logo */
	margin: auto
}

BTW, you've an extra closing div in your code right after the closing script tag.

Edited by Junitar
Link to comment
Share on other sites

Your menu toggle is completely different from the one in images

Yours:

The open and close button elements are in different elements, one in the menu itself, the other in logo div.

Images:

both open and close buttons are in logo div, only one of these show at a time, open to show menu, close to hide menu.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...