Pure Css 菜單的使用

時間 2019-12-14

標籤 pure css 菜單使用欄目 CSS 简体版

原文原文鏈接

本人新手，以前偶爾接觸Bootstrap，也作過一些響應式開發，可是都是略顯皮毛，公司的業務需求也限制了深刻學習。css

現着手Pure Css學習，嘗試了簡單的左邊菜單自動隱藏的demo。閒話少說，代碼貼上纔是硬道理。html

<!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：814230294api

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。