html5手机端的点击弹出侧边滑动菜单代码



149 594 199



特效描述:html5手机端 点击弹出 侧边滑动菜单,html5滑动菜单

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script language="javascript" src="js/jquery-2.1.1.js"></script>
<script language="javascript" src="js/main.js"></script>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>

3. HTML代码

    <main>
        <header class="header">
            <h1>jQuery弹出侧边栏滑动菜单 <span>A Full-Screen Pushing Navigation</span></h1>
            <p>A full page menu, that replaces the current content by pushing it off the screen.</p>
        </header>
    </main>
    <a href="#cd-nav" class="cd-nav-trigger">Menu 
        <span class="cd-nav-icon"></span>
        <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
        <circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
        </svg>
    </a>
    <div id="cd-nav" class="cd-nav">
        <div class="cd-navigation-wrapper">
            <div class="cd-half-block">
                <h2>导航菜单</h2>
                <nav>
                    <ul class="cd-primary-nav">
                        <li><a href="#" class="selected">我的</a></li>
                        <li><a href="#">内容</a></li>
                        <li><a href="#">消息</a></li>
                        <li><a href="#">模板</a></li>
                        <li><a href="#">设置</a></li>
                        <li><a href="#">关于</a></li>
                    </ul>
                </nav>
            </div>
            <div class="cd-half-block">
                <address>
                    <ul class="cd-contact-info">
                        <li><a href="mailto:mingxuan@163.com">mingxuan@163.com</a></li>
                        <li>021-00000000</li>
                        <li>
                            <span>MyStreetName 24</span>
                            <span>W1234X</span>
                            <span>London, UK</span>
                        </li>
                    </ul>
                </address>
            </div>
        </div>
    </div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 收缩导航菜单 二级导航菜单 滑动选项卡切换 文字收缩展开 下拉导航菜单 图片滑动 图片收缩展开 竖直导航菜单 文字滑动 图标导航菜单 滑动手风琴 固定导航菜单 滑动星星打分 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到