How can I create a swipe menu with jquery that opens from below

Navigation
0

I'm looking for a menu in Jquery that can open and close with sliding up and down and tried several examples but I can not find what I'm looking for I leave some pictures in case you can help me:

    
asked by Perico Supertramp 22.12.2016 в 20:16
source

2 answers

0

In the end, solve what I found on this page

Slide and swipe menu

Thank you all for your answers.

    
answered by 01.02.2017 / 13:47
source
0

Look at this example to see if it works, greetings: 

$(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>
    
answered by 22.12.2016 в 23:48
About loading images BufferedImage in java Error sending mail C Sharp