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: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>

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;
}
 

Neue Beiträge

Forum-Statistiken

Themen
272.360
Beiträge
1.558.632
Mitglieder
187.834
Neuestes Mitglied
jordanx0206