navigation slide in issue

Question

Я пытаюсь сделать эту навигацию для веб-сайта, и, похоже, сейчас она работает, я просто не могу получить правильную анимацию. Я попытался использовать анимацию, но я не мог заставить ее работать, и я не уверен, что это даже лучший способ обойти ее.

Я хочу, чтобы мои меню скользят со стороны, в которой они живут, - не уменьшайте масштаб с верхнего угла, как это делает стандартная .show/.hide.

HTML

<div class="wrapper"> 
    <div class="nav"> 
     <a href="#" class="nav-show">menu</a> 
     <a href="#" class="search-show">search</a> 

     <div class="nav-wrap"> 
      <ul> 
       <li><a herf="#">1</a></li> 
       <li><a herf="#">2</a></li> 
       <li><a herf="#">3</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
      </ul> 
     </div> 

     <div class="search-wrap"> 
      <ul> 
       <li><a herf="#">1</a></li> 
       <li><a herf="#">2</a></li> 
       <li><a herf="#">3</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS

body {background-color:#567;} 
* {margin:0; padding:0;} 
ul, li {margin:0; padding:0;} 

.wrapper {width:100%; height:60px; background-color:#333;} 
.nav {width:100%; height:60px;} 
.nav-show {width:60px; background-color:#666; color:#FFF; display:inline-block; height:100%; line-height:60px; text-align:center;} 
.search-show {width:60px; background-color:#666; color:#FFF; display:inline-block; height:100%; line-height:60px; text-align:center; float:right;} 

.nav-wrap {width:90%; background-color:#999; color:#000;padding:10px; display:none; position:fixed; top:60px; left:0; bottom:0; overflow:auto;} 
.nav-wrap ul {list-style:none; background-color:#F60;} 
.nav-wrap ul li {height:60px; width:100%; background-color:#CCC;margin-bottom:5px;} 

.search-wrap {width:90%; background-color:#999; color:#000;padding:10px; display:none; position:fixed; top:60px; right:0; bottom:0; overflow:auto;} 
.search-wrap ul {list-style:none; background-color:#F60;} 
.search-wrap ul li {height:60px; width:100%; background-color:#CCC;margin-bottom:5px;} 

Jquery

$(document).ready(
    function(){ 
     $(".nav-show").click(function() { 
      $(".search-wrap").hide("slow"); 
      $(".nav-wrap").toggle("slow"); 
     }); 

     $(".search-show").click(function() { 
      $(".nav-wrap").hide("slow"); 
      $(".search-wrap").toggle("slow"); 
     }); 
    }); 

я также сделал fiddle

Я знаю, что мой код jquery не самый лучший, я довольно новобранец, поэтому, если это можно сделать умнее, мне бы очень хотелось его увидеть. Может быть, лучше использовать CSS3 для анимации?

Answer 1

Попробовать ослабление плагин, выглядит великолепно:

FIDDLE

$(document).ready(
    function(){ 
     $(".nav-show").click(function() { 
      $(".search-wrap").hide("slow"); 
      $(".nav-wrap").toggle('slide', {direction: 'left'}, 1000, "easeOutExpo"); 
     }); 

     $(".search-show").click(function() { 
      $(".nav-wrap").hide("slow"); 
      $(".search-wrap").toggle('slide', {direction: 'right'}, 1000, "easeOutExpo"); 
     }); 
    }); 

Answer 2

Fixed его в соответствии с вашими потребностями

jsFiddle новых

HTML:

<div class="nav-wrap hidden"> 
      <ul> 
       <li><a herf="#">1</a></li> 
       <li><a herf="#">2</a></li> 
       <li><a herf="#">3</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
      </ul> 
     </div> 

     <div class="search-wrap hidden"> 
      <ul> 
       <li><a herf="#">1</a></li> 
       <li><a herf="#">2</a></li> 
       <li><a herf="#">3</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
       <li><a herf="#">4</a></li> 
      </ul> 
     </div> 

JS:

$(document).ready(
function(){ 
    $(".nav-show").click(function() { 
     $(".search-wrap").hide('slide', {direction: 'right'}, 1000); 
     $(".search-wrap").addClass("hidden"); 
     if($(".nav-wrap").hasClass('hidden')){ 
      $(".nav-wrap").show('slide', {direction: 'left'}, 1000); 
      $(".nav-wrap").removeClass("hidden"); 
     } else { 
      $(".nav-wrap").addClass("hidden"); 
      $(".nav-wrap").hide('slide', {direction: 'left'}, 1000) 
     } 
    }); 

    $(".search-show").click(function() { 
     $(".nav-wrap").hide('slide', {direction: 'left'}, 1000); 
     $(".nav-wrap").addClass("hidden"); 
     $(".search-wrap").show('slide', {direction: 'right'}, 1000); 

     if($(".search-wrap").hasClass('hidden')){ 
      $(".search-wrap").show('slide', {direction: 'right'}, 1000); 
      $(".search-wrap").removeClass("hidden"); 
     } else { 
      $(".search-wrap").addClass("hidden"); 
      $(".search-wrap").hide('slide', {direction: 'right'}, 1000) 
     } 

    }); 
});