Complications with <div> and <header> tag placements

[frogwarrior]

It would be really helpful if you provided a full, working example of where to place each div tag. I've been playing around with them and getting different results every time. Sometimes the trigger button disappears. Somtimes the trigger button is there, but when I click it, it either loads an empty panel with a black background, or it pulls everything to do side but doesn't include a panel at all.

Heres some examples:

jPanelMenu

        <a class="menu-trigger ss-icon">Click here &#xED50;</a>

        <nav href="#custom-menu-selector">
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#usage">Usage</a></li>
                <li><a href="#inner-workings">Inner-Workings</a></li>
                <li><a href="#animation">Animation</a></li>
                <li><a href="#options">Options</a></li>
                <li><a href="#api">API</a></li>
                <li><a href="#tips">Tips &amp; Examples</a></li>
                <li><a href="#license">License</a></li>
                <li><a href="#changelog">Changelog</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>

        </header>
</div>
<div class="jPanelMenu-menu">

In that case theres no trigger button, and I can briefly see a black empty panel load before it disappears.

<div id="jPanelMenu-menu" />
<header class="main">
        <h1 class="logo"><a href="." class="ss-list">jPanelMenu</a></h1>


        <a href="#custom-menu-selector" class="menu-trigger ss-icon">Click here &#xED50;</a>

        <nav>
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#usage">Usage</a></li>
                <li><a href="#inner-workings">Inner-Workings</a></li>
                <li><a href="#animation">Animation</a></li>
                <li><a href="#options">Options</a></li>
                <li><a href="#api">API</a></li>
                <li><a href="#tips">Tips &amp; Examples</a></li>
                <li><a href="#license">License</a></li>
                <li><a href="#changelog">Changelog</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>

        </header>

<div class="jPanelMenu-menu">

that loads a blank gray page, no panel, no content.

            <header class="main">


        <h1 class="logo"><a href="." class="ss-list">jPanelMenu</a></h1>


        <a href="#custom-menu-selector" class="menu-trigger ss-icon">Click here &#xED50;</a>
        <div id="jPanelMenu-menu" />
        <nav>
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#usage">Usage</a></li>
                <li><a href="#inner-workings">Inner-Workings</a></li>
                <li><a href="#animation">Animation</a></li>
                <li><a href="#options">Options</a></li>
                <li><a href="#api">API</a></li>
                <li><a href="#tips">Tips &amp; Examples</a></li>
                <li><a href="#license">License</a></li>
                <li><a href="#changelog">Changelog</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
        </div>
        </header>   

<div class="jPanelMenu-menu">

In this case the trigger button loads fine, but when I click it, I get a blank empty panel. Strangely enough, the closest I have to having it working fully was when I accidentally had two of the same menu, one placed in the header. In that case it worked, only issue was it was displaying "Click me" instead of the neat looking icon. Some practical examples would be very useful.