我正在尝试为一个网站制作这个导航,它现在似乎可以工作了,我只是无法获得正确的动画。我曾尝试使用 animate,但无法使其正常工作,我不确定这是否是解决它的最佳方式。
我希望我的菜单从它们所在的一侧滑入 - 而不是像标准 .show/.hide 那样从顶 Angular 缩小。
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 制作动画会更好?
最佳答案
根据您的需要修复它
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)
}
});
});
关于jquery - 问题导航幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18128803/