时间:2021-05-26
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果。分享给大家供大家参考。具体如下:
偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力。鼠标放到菜单上,菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果,不是忘记有类似效果的网站的网址,就是压根儿找不到。。又不知道怎么描述,今天总算碰到了,真给力。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-meizu-web-nav-menu-style-codes/
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Meizu魅族导航菜单</title><script type="text/javascript" src="jquery1.3.2.js"></script><style>div,h1,h2,h3,h4,p,form,label,input,textarea,img,span{margin:0;padding:0;}ul,li{list-style:none;padding:0;margin:0;}img{border:none;}.csc_top{background:url(images/shopping_tab.jpg) 0 0 no-repeat;width:958px;height:45px;margin:0 auto;position:relative;z-index:101;}.slideMenu{height:38px;}li.current a{color:#00b5f7;cursor:pointer;}li.current a:hover{color:#00b5f7;cursor:pointer;}.lavaLampWithImage3 li a:hover,.lavaLampWithImage3 li a:active{border:none;color:#00B5F7;text-decoration:none;}.lavaLampWithImage3 .sep{padding-top:13px;font-size:10px;color:#aeadad;float:left;height:20px;border-top:none;}.lavaLampWithImage3{position:relative;height:28px;float:left;}.lavaLampWithImage3 .current{color:#008ace;}.lavaLampWithImage3 .current a{color:#008ace;}.lavaLampWithImage3 li{float:left;list-style:none;padding-bottom:11px;}.lavaLampWithImage3 li.back{background:url(images/b_slider.gif) center bottom no-repeat;width:120px;height:28px;z-index:8;position:absolute;}.lavaLampWithImage3 li a{font:bold 14px arial;text-decoration:none;color:#303030;outline:none;text-align:center;top:6px;letter-spacing:0;z-index:10;display:block;float:left;height:28px;position:relative;overflow:hidden;padding:5px 20px 0 17px;font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"����";font-weight:normal;font-size:13px;}</style></head><body><div class="csc_top"> <div class="shead_left"> <ul id="1" class="lavaLampWithImage3"> <li class="current"> <a href="#" style="padding: 5px 30px 0;">Meizu</a> </li> <span class="sep">|</span> <li > <a href="#" style="padding: 5px 30px 0;">魅族</a> </li> <span class="sep">|</span> <li> <a href="#" style="padding: 5px 30px 0;"></a> </li> </ul> </div></div></div><script type="text/javascript" src="MZPub-CSC-0121.js"></script></body></html>希望本文所述对大家的jQuery程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
魅族官网查询真伪教程首先搜说魅族官网,进入魅族的官方网站后,点击右上角的“服务支持”。如下图。接下来,你就会看到“服务支持&
本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下:这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引
官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete当前版本:1.1需要JQ
后期官方网站的发展取决于官方网站的设计。因此,设计一个好的官方网站是每个需要建立官方网站的公司应该注意的事情。一个好的网站制作公司如何设计官方网站? 1.初步
一、用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/API:htt