0

Busco un menú en Jquery que se pueda abrir y cerrar con deslizamiento arriba y abajo e probado con varios ejemplos pero no encuentro lo que estoy buscando dejo unas fotos por si me podéis ayudar:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

2
  • con jquery? pero esa es una aplicación de teléfono, o especifica cuál tecnología estas usando
    – Rene Limon
    Commented el 22 dic. 2016 a las 19:21
  • ¿Qué ejemplos ha probado?¿cómo no te funcionan?
    – Alvaro Montoro
    Commented el 23 dic. 2016 a las 7:41

2 respuestas 2

0

Mira este ejemplo a ver si te sirve, saludos:

$(document).ready(function() {
  $("ul#demo_menu1").sidebar();
  $("ul#demo_menu2").sidebar({
    position: "right",
    callback: {
      item: {
        enter: function() {
          $(this).find("a").animate({
            color: "red"
          }, 250);
        },
        leave: function() {
          $(this).find("a").animate({
            color: "white"
          }, 250);
        }
      }
    }
  });
  $("ul#demo_menu3").sidebar({
    position: "top",
    open: "click"
  });
  $("ul#demo_menu4").sidebar({
    position: "bottom"
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Sliding-Sidebar-Menu-jQuery-Sidebar/css/dark-glass/sidebar.css" rel="stylesheet"/>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Sliding-Sidebar-Menu-jQuery-Sidebar/src/jquery.sidebar.js"></script>



<body>
  <ul id="demo_menu1">
    <li><a href="#">jQuery</a>
    </li>
    <li><a href="#">Write</a>
    </li>
    <li><a href="#">Less</a>
    </li>
    <li><a href="#">Do</a>
    </li>
    <li><a href="#">More</a>
    </li>
  </ul>
  <ul id="demo_menu2">
    <li><a href="#">jQuery</a>
    </li>
    <li><a href="#">Write</a>
    </li>
    <li><a href="#">Less</a>
    </li>
    <li><a href="#">Do</a>
    </li>
    <li><a href="#">More</a>
    </li>
  </ul>
  <ul id="demo_menu3">
    <li><a href="#">jQuery</a>
    </li>
    <li><a href="#">Write</a>
    </li>
    <li><a href="#">Less</a>
    </li>
    <li><a href="#">Do</a>
    </li>
    <li><a href="#">More</a>
    </li>
  </ul>
  <ul id="demo_menu4">
    <li><a href="#">jQuery</a>
    </li>
    <li><a href="#">Write</a>
    </li>
    <li><a href="#">Less</a>
    </li>
    <li><a href="#">Do</a>
    </li>
    <li><a href="#">More</a>
    </li>
  </ul>
  <b style="font-size:80px;position:absolute;top:42%;left:35%;"><a href="http://www.jqueryscript.net/menu/jQuery-Plugin-For-Sliding-Sidebar-Menu-jQuery-Sidebar.html" style="color:#000;">Download this plugin</a></b> 
  <script type="text/javascript">
  </script>
</body>

0

Al final solucione con lo que encontre en esta pagina

Slide and swipe menu

Gracias a todos por vuestras repuestas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.