Pure Css 菜单的使用

本人新手，之前偶尔接触Bootstrap，也做过一些响应式开发，但是都是略显皮毛，公司的业务需求也限制了深入学习。

 

现着手Pure Css学习，尝试了简单的左边菜单自动隐藏的demo。闲话少说，代码贴上才是硬道理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
        <title></title>
        <style media="screen">
            div {
                border: 1px solid red;
                box-sizing: border-box;
            }
            html, body {
                height: 100%;
            }

            #menu {
                position: fixed;
                left: -180px;
                width: 180px;
                height: 100%;
                overflow-y: auto;
            }
            .pure-g {
                height: 100%;
            }

            @media (min-width: 58em) {
                #menu {
                    left: 0;
                }
                body {
                    padding-left: 180px;
                }
            }
        </style>
    </head>
    <body>
        <div class="" id="menu">
            <div class="pure-menu pure-menu-open">
                <a class="pure-menu-heading">菜单标题</a>
                <ul>
                    <li><a href="#">功能1</a></li>
                    <li><a href="#">功能2</a></li>
                    <li><a href="#">功能3</a></li>
                    <li class="pure-menu-heading"><a href="#">功能4</a></li>
                    <li><a href="#">功能5</a></li>
                    <li><a href="#">功能6</a></li>
                    <li><a href="#">功能7</a></li>
                    <li><a href="#">功能8</a></li>
                </ul>
            </div>
        </div>

        <div class="pure-g">
            <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24">
                Put your content1.
            </div>
            <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24">
                Put your content2.
            </div>
            <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24">
                Put your content3.
            </div>
            <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24">
                Put your content4.
            </div>
            <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24">
                Put your content5.
            </div>
            <div class="pure-u-1 pure-u-sm-12-24 pure-u-md-8-24 pure-u-lg-4-24">
                Put your content6.
            </div>
        </div>
    </body>
</html>

朋友们可以点此链接即可查看原文效果，欢迎喜欢相互学习的加我好友哦。个人qq：814230294

posted @ 2016-04-20 14:39  RayChen1221  阅读(1305)  评论(0)  编辑  收藏  举报