Jump to content
CandiAnne

Push Menu Assistance

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>

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...