How can I change the style properties of this element?

Question

I'm trying to make a drop down menu for the mobile version of a website and can't seem to figure out what I'm doing wrong. I have the initial position where I want it (fixed in the upper right corner of the screen) but it does nothing when you click on the Menu tab. Here's my JSFiddle

<div id="mobile-nav-wrapper">
    <ul id="mobile-nav">
        <li>Main Menu</li>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Register</li>
            <li>FAQs</li>
            <li>Facebook</li>
        </ul>
        <li>This Page</li>
        <ul>
            <li>Some Text</li>
            <li>Who?</li>
        </ul>
    </ul>
    <span id="mobile-nav-button" onclick="pullmenu('#mobile-nav-wrapper')">Menu</span
</div>

Answer 1

Your JavaScript function isn't a global. You have configured JSFiddle to wrap it in an onload handler. It isn't accessible outside the scope of that function.

Don't use intrinsic event attributes, they depend on globals. Bind your event handlers with JS instead.

span isn't an interactive element. It doesn't appear in the focus order so has serious accessibility implications when you depend on people interacting with it. Use a button instead. Apply CSS if you don't like the way it looks.

<button type="button" id="mobile-nav-button">Menu</button>

<script>
document.getElementById('mobile-nav-button').addEventListener('click', function (evt) {
   pullmenu('#mobile-nav-wrapper');
});

function pullmenu(etc) { etc }
</script>

Answer 2

JavaScript

<script>
function pullmenu(menu) {
var x = document.getElementById(menu).style;
if (x.top == "-15em") {x.top="0";}
else {x.top="-15em";}
}
</script>

HTML :

<span id="mobile-nav-button" onclick="pullmenu('mobile-nav-wrapper')">Menu</span>

Example