jQuery手机端商品分类菜单竖直切换特效代码下载


jQuery手机端商品分类菜单竖直切换特效代码下载
jQuery手机端商品分类菜单竖直切换特效代码下载以及商品分类、菜单竖直切换等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>

3. HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.5" charset="utf-8"/>
<title>商户详情</title>
<!--sucai58.com 专注html3+css3素材的网站-->
</head>
<body >
<!--标题区域 start-->
<div class="top_tit">
    <span class="top_tit_left"></span>
    <span class="top_tit_center">商户详情</span>
</div>
<!--标题区域 end-->
<div class="height2"></div>
<!--内容区域 start-->
<div class="Z_con2_2">
    <div class="F_wd_top_con2">
        <div class="F_wd_top_con2_l" id="wrapper">
            <div>
                <ul class="sy">
                    <li class="current">精品美食</li>
                    <li>美容美发</li>
                    <li>开心购物</li>
                    <li>生活一查通</li>
                </ul>
            </div>
        </div>
        <div class="F_wd_top_con2_r" id="wrapper1">
            <div class="content">
                 <ul class="by" style="display: block">
                     <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">宫保鸡丁</li>
                     <li class="F_wd_top_con2_r_borb1">酱牛肉</li>
                     <li class="F_wd_top_con2_r_borb1">北京烤鸭</li>
                     <li class="F_wd_top_con2_r_borb1">酸菜鱼</li>
                 </ul>
            </div>
            <div class="content">
                <ul class="by">
                    <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">精剪</li>
                    <li class="F_wd_top_con2_r_borb1">面膜保湿</li>
                    <li class="F_wd_top_con2_r_borb1">去痘抗痘</li>
                    <li class="F_wd_top_con2_r_borb1">化妆品</li>
                </ul>
            </div>
            <div class="content">
                <ul class="by">
                    <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">超市购物</li>
                    <li class="F_wd_top_con2_r_borb1">商场购物</li>
                </ul>
            </div>
            <div class="content">
                <ul class="by">
                    <li class="F_wd_top_con2_r_borb1 F_wd_top_con2_r_borb2">地图</li>
                    <li class="F_wd_top_con2_r_borb1">充值话费</li>
                    <li class="F_wd_top_con2_r_borb1">58同城</li>
                </ul>
            </div>
        </div>
     </div>
</div>
<!--内容区域 end-->
<!--js放底部-->
</body>
</html>

相关推荐

发表评论

相关文章