https://stackoverflow.com/questions/21491811
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianBesides the fact that a lot needs to be fixed, follow the instructions below.
Add this to your #nav li a
padding: 13px 25px 0;
box-sizing: border-box;
height:100%;
and remove padding-right:50px & top:13px
Get whole jquery navigation box to click
Domanda
I am a noob, but I am trying to build this navigation bar that is fixed to the top that has a smooth easing effect over it. I found one that has worked for me but the whole nav box doesn't click. you have to hover over the word to navigate to the next page. here is my code:
(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);
Now I have been looking everywhere and I was able to find the code that will do it but i have no idea where to put it. Bellow is the code: this youtube video does exactly what I want to do: youtu( .)be/kzRwMRwKb6o
$("NotSureWhat to put in here").click(function(){
window.location=$(this).find("a").attr("href");return false;
});
Please any help will be greatly appreciated.
OK here is a jfiddle but it doesn't seem to be working properly: http://jsfiddle.net/GoodVibeDJs/D2kZw/
ps. here is what the nav looks like except mine is fixed.
http://mauryacravings.com/labs/components/menu/menu_44/JeffreyWay-SpasticNav-68832b9/
Soluzione
Altri suggerimenti
WHY USING JS? you can do this only with css, here an fiddle 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;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
