I have a side menu that opens when clicked to open the content pane. Based on the clicked menu item, I obviously need different things to fill in on the panel.
I wrote a function to work with the menu / panel, and it partially works. However, I am trying to determine what to load based on event.target.id(as the function accepts event), but it only matters when you click very close to the edges of the connected square. When I click near the actual text h1and h6and doesn’t have it id, it does not work.
Live demo (click on the edges of the Styles square, and then in the middle): http://jsfiddle.net/mANuD/
<div id="application-frame">
<div class="panel"></div>
<ul id="slide-out-menu">
<li>
<a href="#" class="item" id="styles-menu">
<h1>S</h1>
<h6>Styles</h6>
</a>
</li>
<li>
<a href="#" class="item" id="designers-menu">
<h1>D</h1>
<h6>Designers</h6>
</a>
</li>
<li>
<a href="#" class="item" id="code-menu">
<h1>C</h1>
<h6>Code</h6>
</a>
</li>
<li>
<a href="#" class="item" id="help-menu">
<h1>?</h1>
<h6>Help</h6>
</a>
</li>
</ul>
</div>
/ , , ?