菜单电流和悬停效应

Question

我试图获得当前的菜单动画，所以我做了：

​

$(document).ready(function() {
			$('.menu li:eq(0)').addClass('current');
			$('.menu').onePageNav();
		});



// JavaScript Document

/*
 * jQuery One Page Nav Plugin
 * http://github.com/davist11/jQuery-One-Page-Nav
 *
 * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
 * Dual licensed under the MIT and GPL licenses.
 * Uses the same license as jQuery, see:
 * http://jquery.org/license
 *
 * @version 3.0.0
 *
 * Example usage:
 * $('#nav').onePageNav({
 *   currentClass: 'current',
 *   changeHash: false,
 *   scrollSpeed: 750
 * });
 */

;(function($, window, document, undefined){

	// our plugin constructor
	var OnePageNav = function(elem, options){
		this.elem = elem;
		this.$elem = $(elem);
		this.options = options;
		this.metadata = this.$elem.data('plugin-options');
		this.$win = $(window);
		this.sections = {};
		this.didScroll = false;
		this.$doc = $(document);
		this.docHeight = this.$doc.height();
	};

	// the plugin prototype
	OnePageNav.prototype = {
		defaults: {
			navItems: 'a',
			currentClass: 'current',
			changeHash: false,
			easing: 'swing',
			filter: '',
			scrollSpeed: 750,
			scrollThreshold: 0.5,
			begin: false,
			end: false,
			scrollChange: false
		},

		init: function() {
			// Introduce defaults that can be extended either
			// globally or using an object literal.
			this.config = $.extend({}, this.defaults, this.options, this.metadata);

			this.$nav = this.$elem.find(this.config.navItems);

			//Filter any links out of the nav
			if(this.config.filter !== '') {
				this.$nav = this.$nav.filter(this.config.filter);
			}

			//Handle clicks on the nav
			this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));

			//Get the section positions
			this.getPositions();

			//Handle scroll changes
			this.bindInterval();

			//Update the positions on resize too
			this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));

			return this;
		},

		adjustNav: function(self, $parent) {
			self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
			$parent.addClass(self.config.currentClass);
		},

		bindInterval: function() {
			var self = this;
			var docHeight;

			self.$win.on('scroll.onePageNav', function() {
				self.didScroll = true;
			});

			self.t = setInterval(function() {
				docHeight = self.$doc.height();

				//If it was scrolled
				if(self.didScroll) {
					self.didScroll = false;
					self.scrollChange();
				}

				//If the document height changes
				if(docHeight !== self.docHeight) {
					self.docHeight = docHeight;
					self.getPositions();
				}
			}, 250);
		},

		getHash: function($link) {
			return $link.attr('href').split('#')[1];
		},

		getPositions: function() {
			var self = this;
			var linkHref;
			var topPos;
			var $target;

			self.$nav.each(function() {
				linkHref = self.getHash($(this));
				$target = $('#' + linkHref);

				if($target.length) {
					topPos = $target.offset().top;
					self.sections[linkHref] = Math.round(topPos);
				}
			});
		},

		getSection: function(windowPos) {
			var returnValue = null;
			var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);

			for(var section in this.sections) {
				if((this.sections[section] - windowHeight) < windowPos) {
					returnValue = section;
				}
			}

			return returnValue;
		},

		handleClick: function(e) {
			var self = this;
			var $link = $(e.currentTarget);
			var $parent = $link.parent();
			var newLoc = '#' + self.getHash($link);

			if(!$parent.hasClass(self.config.currentClass)) {
				//Start callback
				if(self.config.begin) {
					self.config.begin();
				}

				//Change the highlighted nav item
				self.adjustNav(self, $parent);

				//Removing the auto-adjust on scroll
				self.unbindInterval();

				//Scroll to the correct position
				self.scrollTo(newLoc, function() {
					//Do we need to change the hash?
					if(self.config.changeHash) {
						window.location.hash = newLoc;
					}

					//Add the auto-adjust on scroll back in
					self.bindInterval();

					//End callback
					if(self.config.end) {
						self.config.end();
					}
				});
			}

			e.preventDefault();
		},

		scrollChange: function() {
			var windowTop = this.$win.scrollTop();
			var position = this.getSection(windowTop);
			var $parent;

			//If the position is set
			if(position !== null) {
				$parent = this.$elem.find('a[href$="#' + position + '"]').parent();

				//If it's not already the current section
				if(!$parent.hasClass(this.config.currentClass)) {
					//Change the highlighted nav item
					this.adjustNav(this, $parent);

					//If there is a scrollChange callback
					if(this.config.scrollChange) {
						this.config.scrollChange($parent);
					}
				}
			}
		},

		scrollTo: function(target, callback) {
			var offset = $(target).offset().top;

			$('html, body').animate({
				scrollTop: offset
			}, this.config.scrollSpeed, this.config.easing, callback);
		},

		unbindInterval: function() {
			clearInterval(this.t);
			this.$win.unbind('scroll.onePageNav');
		}
	};

	OnePageNav.defaults = OnePageNav.prototype.defaults;

	$.fn.onePageNav = function(options) {
		return this.each(function() {
			new OnePageNav(this, options).init();
		});
	};

})( jQuery, window , document );

/*------menu------ */

.menu {
margin-top: 11%;
 position:fixed;
  width: 50%;
  right: -25%;
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  z-index: 9999;
  margin-right: 20px;
}

.menu li {
  display: inline;
  text-align: center;
  
}


#verti {
  display: inline-block;
  width: 25%;
  padding: 20px 0 10px 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.one.current ~ hr {
  margin-left: 0%;
}

.two.current ~ hr {
  margin-left: 25%;
}

.three.current ~ hr {
  margin-left: 50%;
}

.four.current ~ hr {
  margin-left: 75%;
}

.one:hover ~ hr {
  margin-left: 0%;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

.menu hr {
  height: .15rem;
  width: 25%;
  margin: 0;
  background: rgba(0,0,0,1);
  border: none;
  transition: .3s ease-in-out;
}


/*------menu fin------ */

div {
  margin: 60px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
    <li class="one"><a id="verti" href="#home">home</a></li><!--
 --><li class="two"><a id="verti" href="#work">work</a></li><!--
 --><li class="three"><a id="verti" href="#about">about</a></li><!--
 --><li class="four"><a id="verti" href="#contact">contact</a></li>
    <hr />
  </ul>

<div id="home" class="point">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.

Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.
</div>
 <div id="work" class="point">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.

Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.

Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.

In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.

Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
        
        </div>
        
                <div id="about" class="point">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.

Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.

Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.

In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.

Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
        
        </div>
        <div id="contact" class="point">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit lectus a nisl consectetur fermentum. Nam dictum posuere ligula. Vestibulum lacinia imperdiet justo sit amet placerat. Duis maximus, magna dapibus viverra suscipit, neque quam bibendum massa, ut consectetur leo leo eget lectus. Donec sit amet placerat orci. Sed a elit ac magna faucibus bibendum. Integer pretium eros quis pulvinar egestas. Aenean interdum posuere ante, vel lobortis diam consectetur sed.

Vivamus sit amet velit et nulla pharetra malesuada ut sed ex. Cras tincidunt aliquet ipsum, at vehicula nibh venenatis eget. In eget mauris fermentum, congue mi sed, venenatis ipsum. Curabitur vitae ipsum sem. Praesent ac bibendum risus. Cras sapien nisl, fringilla at accumsan sit amet, fringilla a ante. Cras quam eros, consequat nec tristique sed, ultricies in metus. Maecenas aliquet vel arcu ut volutpat. Vivamus et neque iaculis neque bibendum ornare. Nunc pulvinar, ligula et congue laoreet, ipsum lectus congue tortor, eu posuere nulla purus id risus. Integer justo risus, volutpat maximus vestibulum a, sodales hendrerit nisi. Nunc non ullamcorper quam.

Aliquam vehicula bibendum elit, quis vestibulum velit. Maecenas ut convallis nisi, ut ultricies ex. Donec semper ex id dui maximus, in interdum turpis vehicula. Sed non ultricies eros, et pretium lorem. Donec ac tortor justo. Curabitur vel sem metus. Nam quis bibendum ipsum. Donec ac magna non nulla euismod dapibus posuere fringilla velit. In elementum mauris gravida rutrum fringilla. Nulla facilisi. Praesent eu tortor interdum, iaculis elit id, tempus augue. Nunc quis arcu nec erat pharetra sodales et a enim. Donec sit amet odio vitae eros ultrices finibus ac nec nunc.

In feugiat nunc at rhoncus vestibulum. Donec blandit id risus eget consectetur. Vestibulum ac felis iaculis, maximus turpis vel, hendrerit eros. Sed sagittis erat eu ante vestibulum efficitur. Proin viverra, ligula at luctus molestie, eros urna lobortis lectus, ut fringilla odio velit a sapien. Sed ultricies ultrices tellus a facilisis. Nam viverra arcu vel purus tempus tristique. Phasellus quis pellentesque arcu, at tincidunt dui. Curabitur imperdiet lorem vel rhoncus imperdiet. Curabitur lacinia purus non lectus posuere consectetur. Ut interdum varius arcu, ac aliquet mi auctor volutpat. Curabitur quam ante, vehicula a nulla quis, porta efficitur neque. Integer ut ornare nulla. Nulla consequat, dui eget luctus placerat, turpis metus ultricies magna, a pulvinar justo mauris sit amet dui. Aliquam vestibulum malesuada sem, sit amet ultrices diam hendrerit a.

Nulla facilisi. Cras fermentum leo ligula, vitae tristique mi rutrum ac. Vivamus vitae ante eros. Praesent auctor eu leo non dictum. Praesent venenatis ut quam ut cursus. In hac habitasse platea dictumst. Phasellus iaculis, ex eu scelerisque aliquet, ligula nulla semper metus, sit amet molestie leo libero a nisi. Ut egestas orci vel lorem placerat sollicitudin nec congue justo.
</div>
        <footer>
    </footer>
        </section>

​

我想让不活动菜单的不透明度在0.4，活动的菜单在1当然，我想要在相同的时间，在人力资源，当当前的事件变化和悬停也有人有想法？

Answer 1

将css从.menu li更改为：

.menu li {
  display: inline;
  text-align: center;
  opacity: 0.4;
}

并为.current类添加一个新样式：

.current {
  opacity: 1 !important;
}