分享一个微客聚的产品展示的菜单切换的界面
- 3878
- HTML
- 5
- super_dodo
- 2015/03/02
分享一个微客聚的产品展示的菜单切换的界面。看上去的确很清爽。同时代码也很简介,相信很多用户都选择并喜欢这等简易简洁的代码风格。直接上图。经供参考和围观。底部有下载链接和展示页面。请复制链接并移步下载。如果觉得不错的话,也欢迎分享,相互交流学习。
直接上代码(HTML部分,CSS样式请下载压缩包,解压后即可。)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>微客聚-左侧导航菜单的DEMO</title> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./bootstrap.css" rel="stylesheet" type="text/css"> <link href="./common.css" rel="stylesheet" type="text/css"> <script src="./jquery.js" type="text/javascript"></script> </head> <body> <div class="container top_distance"> <div class="container case-pannel"> <div class="case-ul"> <h2 class="title">功能介绍</h2> <ul class="nav nav-stacked" style="margin-top: -7px;"> <li class="">微官网</li> <li class="">微预约</li> <li class="">微相册</li> </ul> </div> <div class="case-pannel-sub"> <div class="sub-pannel" style="display: none;"> <h3 class="sub-pannel-h3">微官网:构建企业移动门户、模版丰富多彩</h3> <div class="sub-img"><img src="./1.png"></div> <p>微官网功能且使信息的展现更加赏心悦目,进一步提高用户体验。</p> </div> <div class="sub-pannel" style="display: none;"> <h3 class="sub-pannel-h3">微预约:预约挂号/试驾/看房/报名等各类预约不容错过</h3> <div class="sub-img"><img src="./2.png"></div> <p>微店微预约功能:预约挂号/试驾/看房/报名</p> </div> <div class="sub-pannel" style="display: none;"> <h3 class="sub-pannel-h3">微相册:全方位展示您的产品,有图有真相</h3> <div class="sub-img"><img src="./3.png"></div> <p>微相册功能:能随时随地创建微相册,发布新照片</p> </div> </div> </div> </div> <script type="text/javascript"> $(function () { $(".case-ul").find("li").hover( function () { $(".case-ul").find("li").removeClass("hover"); //所有的影藏 $(".case-pannel-sub").children().hide(); //所有的子内容体都隐藏 $(this).addClass("hover"); //当前按钮添加 var i = $(this).index(); // $(".case-pannel-sub").children().eq(i).show(); }, function () {} ); }); </script> </body> </html>
下载展示地址:http://www.dodobook.net/demo/vkj_menu/demo.html
「你什么时候发现自己喜欢他的?」
「那天我在街上看到一棵形状奇怪的榕树第一反应竟是拍下来给他看,那时候我就知道大事不好了。」
相关阅读
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
热门文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
最新文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例