17做网站骗子,网页美工设计报价单,奉贤网站建设专家,学院网站信息化建设这篇文章#xff0c;我给大家分享一个导航菜单的效果。用cssJS实现#xff0c;效果如图#xff1a;
本例实现效果#xff1a;当鼠标移动到其他菜单项时#xff0c;会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后#xff0c;被点击的菜单名称文字字体会加粗。
现在我给大家分享一个导航菜单的效果。用cssJS实现效果如图
本例实现效果当鼠标移动到其他菜单项时会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后被点击的菜单名称文字字体会加粗。
现在看看简单的菜单布局结构 ulspan classli_bg/span !-- 滑动的背景色 --lia href###首页/a/lilia href###热播剧集/a/lilia href###最新电影/a/lilia href###影业资讯/a/lilia href###娱乐八卦/a/lilia href###明星图库/a/li/ul
非常清爽简洁的标准菜单结构css也很简单 * {margin: 0px;padding: 0px;}ul {list-style: none;}html,body {height: 100%;width: 100%;background: #ececec;}a {text-decoration: none;}ul {position: relative; background: #f9f9f9; display: flex;width: 50%;border-radius: 25px;height: auto;padding:0px;left: 50%;top: 50%;transform: translate(-50%, -50%); }ul li {position: relative;z-index: 10;flex: 1;text-align: center;}ul li a {font-size:14px;color: #666;width: auto;height:20px;padding:15px;display: block;text-align: center;transition: all .3s;}ul li a:hover{ text-shadow:0px 0px 15px #fff; transition: all .3s;}.li_bg {width: 17%;height: auto;display: inline-block;background-color: #ffcc00;box-shadow: 0 0px 15px 0 rgba(255, 204, 0, 0.58);position: absolute;left: 0;top: 0px;bottom: 0px;margin: auto;z-index: 2;border-radius: 25px; }.this a{ font-weight: 700; color: #333;}
在css中定义的 .this 就是当li被点击时给它增加的样式类名通过修改 .this a 就可以实现点击后想要的效果。我这里就是给字体加粗改变了字体颜色的深度。
接下来我们让背景色块跟着鼠标动起来 // 需求鼠标经过哪个导航栏目背景色滑动过去 var liList document.getElementsByTagName(li);var bg document.getElementsByClassName(li_bg)[0];var header 0;var liLeft 0;console.log(0);// 添加事件// 遍历li for (var i 0; i liList.length; i) {liList[i].onmouseover function () {liLeft this.offsetLeft (this.offsetWidth - bg.offsetWidth) / 2;}}// 使用定时器setInterval(function () {header header (liLeft - header) / 10;bg.style.left header px;}, 10)
写到这里背景色块跟随鼠标滑动已经实现了。接下来我们来完善点击后给li增加this属性的的代码 $(document).ready(function (){$(li).each(function(index){$(this).click(function(){ $(li).removeClass(this);$(li).eq(index).addClass(this);});});});
这段代码也很容易理解当那个li项被点击移除所有li的this类名然后给被点击的li增加this类名。
好了这个例子的效果就完美实现了。需要《cssjs实现导航栏色块跟随滑动点击后增加样式》源码的同学可以点击下载了。 感谢您阅读本篇如果对您有所帮助请收藏点赞谢谢
