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


akdesign

Erfahrenes Mitglied
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?


HTML:
<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:[email protected]">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>

CSS:
/* 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;
}
 

Forum-Statistiken

Themen
272.356
Beiträge
1.558.615
Mitglieder
187.832
Neuestes Mitglied
SirrDansen