分享一个微客聚的产品展示的菜单切换的界面

  •   
  • 4611
  • HTML
  • 5
  • super_dodo
  • 2015/03/02

分享一个微客聚的产品展示的菜单切换的界面。看上去的确很清爽。同时代码也很简介，相信很多用户都选择并喜欢这等简易简洁的代码风格。直接上图。经供参考和围观。底部有下载链接和展示页面。请复制链接并移步下载。如果觉得不错的话，也欢迎分享，相互交流学习。
20150302151936

直接上代码（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

「你什么时候发现自己喜欢他的？」

「那天我在街上看到一棵形状奇怪的榕树第一反应竟是拍下来给他看，那时候我就知道大事不好了。」