jQuery达成轻易美丽的Nav导航菜单作用_jquery_脚本之家【金沙网址】

金沙网址,jQuery达成轻易美丽的Nav导航菜单作用_jquery_脚本之家【金沙网址】。本文实例呈报了jQuery完毕轻巧美观的Nav导航菜单功效。分享给咱们供我们参谋,具体如下:

温和写的三个简易的导航菜单,先看成效:

鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示近些日子选中项。

页面代码,菜单的每一种都以三个 div ,此中富含一个 ul
用来放置呈现文字等,另一个 div
则是底层的蓝条,要求给第一项和终极一项设置不一致的 class ,样式供给接纳:

   首页 首页      A A      A A      退出 退出   

体制,重要正是各类菜单项的左侧边框的安装以致 ul 和 li 的职位设置:

*{ padding: 0; margin: 0;}body{ background-color: #fffff3; font: 12px/1.6em Helvetica, Arial, sans-serif;}ul,li{ list-style: none;}#nav{ text-align: center; height: 50px; font-size: 10px; line-height: 30px; background-color: #F0E6DB; margin-bottom: 10px;}.navItem{ cursor: pointer; position: relative; float: left; width: 100px; height: 50px; font-size: 15px; border-right: 2px solid rgb; border-left: 2px solid rgb; overflow: hidden; font-weight:bold;}.indexNavItem{ border-left: 4px solid rgb; margin-left: 10px;}.lastNavItem{ border-right: 4px solid rgb;}.logoutNavItem{ float: right; width: 120px; margin-right: 10px; border-left: 4px solid rgb;}.navUl{ position: relative; height: 100px; width: 100%; border-bottom: 5px solid rgb;}.navUl li{ height: 50px; line-height: 50px;}.highlighter{ position: absolute; bottom: 0; height: 5px; width: 100%;}.selectedNav{ background-color: #029FD4;}.hoverLi{ background-color: #029FD4; color: #ffffff;}

接下去正是给菜单编写悬浮和单击事件的 js 代码了,悬浮时将 ul 上移 li
的可观,鼠标移开后再回复,点击之后就是给蓝条的 div 增多样式就能够:

$ { $.hover.children.animate({ top: "-50px" }, 100); }, function.children.animate; }); $.click { $.children.removeClass; $.children.addClass

越多关于jQuery相关内容感兴趣的读者可查看本站专项论题:《jQuery切换特效与本事总括》、《jQuery扩大技艺总计》、《jQuery常用插件及用法总计》、《jQuery拖拽特效与技艺总括》、《jQuery表格操作技术汇总》、《jquery中Ajax用法计算》、《jQuery常见精粹特效汇总》、《jQuery动漫与特效能法计算》及《jquery选拔器用法计算》

可望本文所述对大家jQuery程序设计具备利于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注