jQuery Menü mit data-role="panel" für Desktop Version

[akdesign]

Hallo,

ich habe eine rein mobile Website erstellt mit einem Panel Menü mit der data-role="panel" Funktion.
Nun fällt dem Kunden nachträglich ein, dass er doch eine Desktop Version möchte.

Ich habe aber keine Ahnung, wie ich dieses Menü nun in ein "offenes" Menü umwandeln sollte.

Jemand eine Idee?

<div data-role="panel" id="menu" data-display="push" data-rel="close">
      <nav>
      <h1><a href="#" data-rel="close" style="margin-left: .3em; padding: 0; position: absolute; top:.5em; letter-spacing: 120%; font-size: .8em;">X</a></h1>
          <ul>
            <li><a href="comingsoon.html">Our retail partners</a></li>
            <li><a href="http://www.amazon.com/shops/MauroInc" target="_blank">Order on Amazon</a></li>
            <li><hr></li>
            <li><a href="comingsoon.html">Testimonials</a></li>
            <li><a href="comingsoon.html">Photos and videos</a></li>
            <li><a href="comingsoon.html">Events</a></li>
            <li><hr></li>
            <li><a href="mailto:info@spinaorganics.com">Get in touch!</a></li>
            <li><a href="comingsoon.html">My account</a></li>
            <li><hr></li>
            <li><a href="privatelabel.html">Private label<br> by Spina Organics</a></li>
            <li><hr></li>
            <li><a href="comingsoon.html">Spina Organics <br>for groomers and retailers</a></li>
            <div id="netzwerke"><a href="http://instagram.com/spinaorganics" target="_blank"><img src="images/Instagram.png" alt="instagram" class="netzwerke"></a><a href="http://pin.it/rkm0LSQ" target="_blank"><img src="images/pinterest.png" alt="pinterest" class="netzwerke"></a><a href="https://www.facebook.com/Spina-Organics-2336534363238741/?ref=bookmarks" target="_blank"><img src="images/facebook.png" alt="facebook" class="netzwerke"></a><a href="https://twitter.com/SpinaOrganics" target="_blank"><img src="images/twitter.png" alt="twitter" class="netzwerke"></a><a href="https://www.youtube.com/channel/UCK4fZKAK-M7waSQVL7ilRWA" target="_blank"><img src="images/youtube.png" alt="youtube" class="netzwerke"></a></div>
        </ul>
      </nav>
  </div>

/* Menü  */
.menu {
    /*width: 10%;
    height: 10%;
    /*float: left;*/
    padding: 0;
    z-index: 999;
    /*position: absolute;*/
}

.menu a {
    background: no-repeat transparent;
    background-image: url(../images/menubar.png);
    filter:alpha(opacity=50);   /* IE */
    -moz-opacity: 0.50;   /* Mozilla */
    opacity: 0.50;   /* Opera */
    position: absolute;
    left: .3em;
    z-index: 999;
    width: 50px;
    height: 100%;
}

nav {
    background: #63656a;
    background-image: url(../images/SPINA_header_menu.png);
    background-repeat: no-repeat;
    background-size: 135%;
    background-position: top center;
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
}

ul {
    margin-top: 5em;
    list-style-type: none;
    padding-left: 1.5em;
}

ul li {
    font: normal .9em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    line-height: 1.8em;
    padding: 0;
}

div#text ul {
    margin-top: 0;
    padding-left: 1.1em;
    list-style-type: inherit;
}

div#text ul li {
    font: normal .8em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    line-height: 1.3em;
    padding: 0;
}

hr {
      /*background-color:#FFf;
      color:#FFf;
      border:#FFf;
      height:1px;*/
    margin-right: 10em;
}