jquery sidebar menu

by magizter

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<div data-role="page" id="home" data-theme="b">

    <div data-role="panel" id="navpanel" data-theme="a"
         data-display="overlay" data-position="right">
        <div data-role="controlgroup" data-corners="false">
            <a href="#" data-role="button">Tagszervezetek</a>
            <a href="#" data-role="button">Legközelebbi iroda</a>
            <a href="#" data-role="button">GY.I.K.</a>
            <a href="#" data-role="button">LIGA Hírek</a>
            <a href="#" data-role="button">Űrlap</a>
        </div>
    </div>

    <div id="header" data-role="header" data-theme="b">
        <a id="bars-button" data-icon="bars"  class="ui-btn-right" href="#navpanel">Menü</a>
    </div>
</div>

CSS

.ui-panel-inner {
            padding:0px; /*make the buttons flush edge to edge*/
        }
        .ui-controlgroup {
            margin:0; /*make the buttons flush to the top*/
        }
        #header {
            height:54px;
        }
        #bars-button {
            margin:10px 7px 7px 7px;
        }