原生js制作自适应浏览器大小的手风琴下拉菜单，左侧下拉分类菜单收缩展开效果代码。特定：随着浏览器大小、文字也会相应变化。不兼容IE6，7，8

使用方法

在页面引入适配adapter.js和控制menu.js代码

<script src="js/adapter.js"></script> <!--rem适配js-->
<script src="js/menu.js"></script> <!--控制js-->

Html结构

在页面需要显示的地方引入html隐藏菜单代码：

<!--隐藏菜单-->
<div id="ensconce">
    <h2>
        <img src="images/show.png" alt="">
        国内各地景点
    </h2>
</div>

下面引入html显示菜单代码：

   <!--显示菜单-->
    <div id="open">
        <div class="navH">
            国内各地景点
            <span><img class="obscure" src="images/obscure.png" alt=""></span>
        </div>
        <div class="navBox">
            <ul>
                <li>
                    <h2 class="obtain">北京景点<i></i></h2>
                    <div class="secondary">
                        <h3>故宫</h3>
                        <h3>十三陵</h3>
                        <h3>圆明园</h3>
                        <h3>长城</h3>
                        <h3>雍和宫</h3>
                        <h3>天坛公园</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">南京景点<i></i></h2>
                    <div class="secondary">
                        <h3>栖霞寺</h3>
                        <h3>夫子庙</h3>
                        <h3>海底世界</h3>
                        <h3>中山陵</h3>
                        <h3>乌衣巷</h3>
                        <h3>音乐台</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">上海景点<i></i></h2>
                    <div class="secondary">
                        <h3>东方明珠</h3>
                        <h3>外滩</h3>
                        <h3>豫园</h3>
                        <h3>文庙</h3>
                        <h3>世博园</h3>
                        <h3>田子坊</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">深圳景点<i></i></h2>
                    <div class="secondary">
                        <h3>华侨城</h3>
                        <h3>观澜湖</h3>
                        <h3>世界之窗</h3>
                        <h3>东门老街</h3>
                        <h3>七娘山</h3>
                        <h3>光明农场</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">广州景点<i></i></h2>
                    <div class="secondary">
                        <h3>白云山</h3>
                        <h3>长隆</h3>
                        <h3>黄花岗公园</h3>
                        <h3>中山纪念堂</h3>
                        <h3>华南植物园</h3>
                        <h3>南沙湿地公园</h3>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>