我是一个菜鸟，但我正在尝试构建这个固定在顶部的导航栏，它对它有平滑的缓动效果。我找到了一个对我有用的但是整个导航框都没有点击。你必须将鼠标悬停在单词上才能导航到下一页。这是我的代码：
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '#0b2b61',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;
$('<li. id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);
});
}); // end each
};
}）（jQuery的）;
现在我一直在寻找各处，我能够找到能够做到的代码，但我不知道该放在哪里。贝娄是代码：这个youtube视频完全符合我的要求：youtu（。）be / kzRwMRwKb6o
$("NotSureWhat to put in here").click(function(){
window.location=$(this).find("a").attr("href");return false;
});
请不要错过任何帮助。
好的，这是一个jfiddle，但似乎没有正常工作： http://jsfiddle.net/GoodVibeDJs/D2kZw/
PS。这是导航看起来的样子，除了我的固定。
http://mauryacravings.com/labs/components/menu/menu_44/JeffreyWay-SpasticNav-68832b9/
答案 0 :(得分：0)
为什么使用JS？你只能用css做这个，这里有一个小提琴http://jsfiddle.net/6XEMc/5/
<强> HTML
<nav>
<li class="it"><a href="#">ITEM 01</a></li>
<li class="it"><a href="#">ITEM 02</a></li>
<li class="it"><a href="#">ITEM 03</a></li>
<li class="it"><a href="#">ITEM 04</a></li>
<li class="it"><a href="#">ITEM 05</a></li>
<li class="it"><a href="#">ITEM 06</a></li>
<li class="it"><a href="#">ITEM 07</a></li>
<li class="it"><a href="#">ITEM 08</a></li>
<li class="it"><a href="#">ITEM 09</a></li>
<li class="it"><a href="#">ITEM 10</a></li>
</nav>
<p> 01</p>
<p> 02</p>
<p> 03</p>
<p> 04</p>
<p> 05</p>
<p> 06</p>
<p> 07</p>
<p> 08</p>
<p> 09</p>
<p> 10</p>
<p> 11</p>
<p> 12</p>
<p> 13</p>
<p> 14</p>
<p> 15</p>
<p> 16</p>
<p> 17</p>
<p> 18</p>
<p> 19</p>
<p> 20</p>
<p> 21</p>
<p> 22</p>
<p> 23</p>
<p> 24</p>
<p> 25</p>
<p> 26</p>
<p> 27</p>
<p> 28</p>
<p> 29</p>
<p> 30</p>
<p> 31</p>
<p> 32</p>
<p> 33</p>
<p> 34</p>
<p> 35</p>
<p> 36</p>
<p> 37</p>
<p> 38</p>
<p> 39</p>
<p> 40</p>
<p> 41</p>
<p> 42</p>
<p> 43</p>
<p> 44</p>
<p> 45</p>
<p> 46</p>
<p> 47</p>
<p> 48</p>
<p> 49</p>
<p> 50</p>
<p> 51</p>
<p> 52</p>
<p> 53</p>
<p> 54</p>
<p> 55</p>
<p> 56</p>
<p> 57</p>
<p> 58</p>
<p> 59</p>
<p> 60</p>
<p> 61</p>
<p> 62</p>
<p> 63</p>
<p> 64</p>
<p> 65</p>
<p> 66</p>
<p> 67</p>
<p> 68</p>
<p> 69</p>
<p> 70</p>
<p> 71</p>
<p> 72</p>
<p> 73</p>
<p> 74</p>
<p> 75</p>
<p> 76</p>
<p> 77</p>
<p> 78</p>
<p> 79</p>
<p> 80</p>
<p> 81</p>
<p> 82</p>
<p> 83</p>
<p> 84</p>
<p> 85</p>
<p> 86</p>
<p> 87</p>
<p> 88</p>
<p> 89</p>
<p> 90</p>
<p> 91</p>
<p> 92</p>
<p> 93</p>
<p> 94</p>
<p> 95</p>
<p> 96</p>
<p> 97</p>
<p> 98</p>
<p> 99</p>
<p> 100</p>
<强> CSS
* {
margin: 0;
padding: 0;
}
body {
background: url(http://wallpoper.com/images/00/44/48/44/blurred-grass_00444844.jpg) center fixed;
}
nav {
position: fixed;
top: 0;
left: 0;
}
nav li {
list-style: none;
display: block;
width: 150px;
}
nav li a {
width: 100%;
padding: 10px;
display: block;
text-align: right;
background: #963;
background: rgba(153, 102, 51, 0.9);
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #80552A;
}
nav li:hover {
width: 300px;
}
nav li {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
答案 1 :(得分：0)
除了需要修复很多事实外，请按照以下说明操作。
将此添加到您的#nav li a
padding: 13px 25px 0;
box-sizing: border-box;
height:100%;
并删除padding-right:50px＆amp; top:13px