本文实例讲述了JS实现横向拉伸动感伸缩菜单效果代码。分享给大家供大家参考。具体如下:
这是一款JS实现的纵向拉伸变横向拉伸,动感伸缩菜单,紧身排列的CSS菜单,可用在博客等重要的位置部分作菜单,学习Javascript前端设计的也可以作为参考范例。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-row-show-menu-style-codes/
具体代码如下:
有弹性的菜单 *{ margin:0px; padding:0px;} body { background:#fff;} .naver{list-style-type: none; width:700px; overflow:hidden; margin:100px auto 0;} .naver li{ width:100px; height:50px; overflow:hidden; font-size:16px; text-align:center; cursor: pointer; } .naver li a,.naver li a:hover{display: block;width:100px; height:50px; line-height: 50px; color:#FFF; text-decoration: none; } .co1{ background:#649e37} .co2{ background:#028fbc}
希望本文所述对大家的javascript程序设计有所帮助。



