这是一款简单的jQuery菜单条鼠标跟随线条特效。该特效在当鼠标在菜单项上移动时,会有线条跟随鼠标在菜单项下面移动,并且线条的长度会随着菜单项的长度而变化。
使用方法
在页面中引入jquery文件。
<script src="js/jquery.min.js" type="text/javascript"></script>
HTML结构
使用时,菜单的HTML结构如下:
<div class="menu"> <div class="menu-item current-menu-item"> <h6>Home</h6> <div class="wee"></div> </div> <div class="menu-item"> <h6>Contact</h6> </div> <div class="menu-item"> <h6>About</h6> </div> <div class="menu-item"> <h6>Blog</h6> </div> <div class="menu-item"> <h6>Jobs</h6> </div> </div>
CSS样式
为菜单添加下面的CSS样式,你可以根据实际情况,添加自己的菜单样式。
.menu { width: 100%; display: flex; align-items: center; justify-content: center; } .menu .menu-item { position: relative; cursor: pointer; } .menu .menu-item .wee { height: 2px; width: 100%; background-color: #002b75; position: absolute; left: 0; bottom: 0; transition: 0.75s; } .menu .menu-item h6 { margin: 0; padding: 0 1rem 1.5rem; font-size: 1rem; color: #232323; transition: 0.75s; } .menu .menu-item:hover h6 { color: #002b75; } .menu .current-menu-item h6 { color: #002b75; }
JavaScript
然后使用下面的jQuery代码来时线条在鼠标移动时,跟随鼠标移动。
$(document).ready(function() { $(window).on('load resize', function() { var $thisnav = $('.current-menu-item').offset().left; $('.menu-item').hover(function() { var $left = $(this).offset().left - $thisnav; var $width = $(this).outerWidth(); var $start = 0; $('.wee').css({ 'left': $left , 'width': $width }); }, function() { var $initwidth = $('.current-menu-item').width(); $('.wee').css({ 'left': '0' , 'width': $initwidth }); }); }); });
jQuery菜单条鼠标跟随线条特效的原文地址为:https://codepen.io/cmdeveloped/pen/LdmMwE
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!