Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Aug 2016
    Posts
    3
    Member #
    54939

    Positioning Problem with Push Menu

    EDIT: I ended up figuring it out, for details read last reply. If a mod could close this that would be great, thanks!


    I'm trying to design a push menu using HTML, CSS and Javascript/jQuery.

    To help you understand my problem I'll give you a little background info:
    I have a menu button at the top of the page that when clicked will push the body of the page over and reveal the hidden menu (which is to the left of the viewing area).

    So far I have most of that part working. The body pushes over and the menu shows up on click. Though, I haven't coded the exit button on the menu yet because I ran into this problem.

    PROBLEM:
    After clicking the menu button, the body pushes but the menu button doesn't go with it. I have checked everything in my html and css, and still can't figure out why it isn't moving. It's probably some simple oversight. I thought about just 'animating' the menu to move over at the same time but that feels like a cheap workaround to me. Any help would be greatly appreciated! Thanks!

    -TL;DR- See the 'MENU' at the top? That shouldn't be there. That element should be on the main body, to the right of the actual menu but it isn't pushing over with the body as the actual menu element comes out.
    site.jpg
    BTW, sorry it took out my tabs =/
    HTML:

    <!DOCTYPE html>
    <html>

    <head>
    <link rel='stylesheet' href='css/Open_Sans'/>
    <link rel='stylesheet' type='text/css' href='css/styles.css'/>
    <script type='text/javascript' src="js/jquery-3.1.0.min.js"></script>
    <script type='text/javascript' src='js/main.js'></script>
    <title>Push Menu Test</title>
    </head>

    <body>
    <div class='menu'>
    <div class="menuclosebtn">
    <img src="pics/close.png"/>
    </div>

    <!-- Menu -->
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    </div>

    <div id='bodywrap'>
    <div class='menuopenbtn'>Menu</div>
    </div>
    </body>

    </html>

    CSS:

    body {
    background: grey;
    left:0;
    margin:0;
    overflow:hidden;
    position: relative;
    }

    .menu {
    background: silver;
    left:-285px;
    height:100%;
    position: fixed;
    width:285px;
    }
    #bodywrap {
    height:100%;
    background-size: cover;
    }
    .menuopenbtn {
    width:40px;
    height:40px;
    line-height: 40px;
    padding:25px 25px;
    background-color:inherit;
    color:white;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    font-size:20px;
    text-align:center;
    opacity: .8;
    }

    .menu ul {
    border-top: 1px solid #636366;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
    }

    .menu a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    }

    .menuclosebtn {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
    }

    .active {
    opacity: 1;
    }
    Last edited by Dirtier; Aug 12th, 2016 at 07:28 PM.

  2.  

  3. #2
    Junior Member
    Join Date
    Aug 2016
    Posts
    3
    Member #
    54939
    I actually just thought of this. Could the 'MENU' actually be stuck on the body like it's supposed to, but the push menu is just going over the top of it? Instead of the body moving over as the push menu comes out and the 'MENU' not moving with the body?

  4. #3
    Junior Member
    Join Date
    Aug 2016
    Posts
    3
    Member #
    54939
    So I figured out what was wrong. It was something as small and trivial as accidentally adding a " . " into my jQuery selector for body where there shouldn't have been one. Sorry for wasting whoever read this' time. Syntax errors are a b*#$#.

    So, if a mod could please close this that would be great. Sorry again.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    No worries. I'm going to close it, but I'll leave it up so that people can see how you solved it.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com