Javascript CSS3: Move div container

问题

I've been messing with this code for awhile now and I'm stuck. I've done a lot of coding by hand but just now ramping up on the new things with HTML5, CSS3, and Javascript.

I'm trying to make a simple menu that slides up and down. I have a div that contains everything. The div has overflow set to hidden so when the menu is out of the viewing box, it can't be seen. It can then animate in and out of the view box.

I've been trying to do it with a Javascript function but it sounds like it's easier to just use CSS3 transitions? Any advice?

My Javascript code is below. I can't quite figure out how to do it with CSS3 transitions. Any advice would be much appreciated.

Html

<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
    <div id="mobileMenuWrapper" class="mobileMenuWrapper">
        <div style="height: 100px; width: 100%;">
            <div style="height: 100px; width: 100%; background-color: black; color: white;">
            Menu option<br>Menu option<br>Menu option
            </div>
        </div>
        <div style="position: relative; height: 50px; width: 100%; left: 50px;">
            <div style="height: 50px; width: 125px; background-color: black; color: white;    text-align: center;"><a href="javascript:moveMenuDown();">Menu</a></div>
        </div>
    </div>
</div>
</nav>
</header>

Javascript

var startPosition = -100;
var endPosition = 0;
var speed = 2;

function moveMenuDown(){
    // Get the element
    menu = document.getElementById("mobileMenuWrapper");

    // Grab the element's current CSS top position
    currentPosition = Number(menu.style.top.substr(0,(menu.style.top.length-2)));

    // Compare the position and move it
    if(currentPosition <= endPosition){

        // I'm stuck about the line below...how can I attach a CSS3 transition here? Or should I?
        menu.style.MozTransition = ???;

        // Here's my original code where I move the element manually
        menu.style.top = (currentPosition + speed) + 'px';
        moveMenuDown();
    }else{

    }
}

Updated entire HTML/CSS/JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menu test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
    .mobileMenu {
        position: absolute;
        height: 150px;
        width: 250px;
        top: 0px;
        left: 50px;
        overflow: hidden;
    }

    #mobileMenuWrapper {
    margin-top:-100px;
       transition: margin-top 0.5s ease;
    }

    #mobileMenuWrapper.show {
     margin-top:0px;
    }
</style>

<script type="text/javascript">
    function moveMenuDown(){

        menu = document.getElementById("mobileMenuWrapper hide");

        if(menu.className=="mobileMenuWrapper hide"){
            menu.className = menu.className.replace('hide','show');
        }else{
            menu.className = "mobileMenuWrapper hide";
        }
    }
</script>
</head>
<body>

<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
    <div id="mobileMenuWrapper" class="mobileMenuWrapper hide">
        <div style="height: 100px; width: 100%;">
            <div style="height: 100px; width: 100%; background-color: black; color: white;">
            Menu option<br>Menu option<br>Menu option
            </div>
        </div>
        <div style="position: relative; height: 50px; width: 100%; left: 50px;">
            <div style="height: 50px; width: 125px; background-color: black; color: white; text-align: center;"><a href="javascript:moveMenuDown();">Menu</a></div>
        </div>
    </div>
</div>
</nav>
</header>

</body>
</html>

回答1:

HTML: one additional class:

<header>
<nav>
<div id="mobileMenu" class="mobileMenu">
    <div id="mobileMenuWrapper" class="mobileMenuWrapper hide">
        <div style="height: 100px; width: 100%;">
            <div style="height: 100px; width: 100%; background-color: black; color: white;">
            Menu option<br>Menu option<br>Menu option
            </div>
        </div>
        <div style="position: relative; height: 50px; width: 100%; left: 50px;">
            <div style="height: 50px; width: 125px; background-color: black; color: white;    text-align: center;"><a id="move" href="javascript:moveMenuDown();">Menu</a></div>
        </div>
    </div>
</div>
</nav>
</header>

CSS: (very simple)

#mobileMenuWrapper{
margin-top:-100px; 
   transition: margin-top 0.5s ease;   
}

#mobileMenuWrapper.show{
 margin-top:0px;   
}

*just added class and transition.

JS, much simpler:

function moveMenuDown(){


 menu = document.getElementById("mobileMenuWrapper");
    if(menu.className=="mobileMenuWrapper hide"){
  menu.className = menu.className.replace('hide','show');
    }
    else {
         menu.className = "mobileMenuWrapper hide";  

    }
   }

('toggle' functionality added)

Fiddle: http://jsfiddle.net/8u0eka5x/

来源：https://stackoverflow.com/questions/26701254/javascript-css3-move-div-container

标签

javascript

css3