本人新手，之前偶尔接触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

Pure Css 菜单的使用的更多相关文章

  1. Pure CSS 的网格布局（比bootstrap小很多且易扩展的css UI）

    (转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pur ...

  2. Pure.css网格系统学习心得——图片的响应式以及应用填充和边框网格单位的学习

    今天学习了pure.css可定制的网格系统,pure默认的网格系统是移动先行,如果我们想在小屏幕上有网格只要用pure-u-*就可以了,下面来说一下它的主要用法! <div class=&quo ...

  3. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  4. [SCSS] Pure CSS for multiline truncation with ellipsis

    1. Pure CSS 2. Responsive 3. No need to recalculate on resize or font’s load event 4. Cross browser

  5. Pure CSS Progress Chart

    Pure CSS Progress Chart CSS Progress Circle SCSS .example { text-align: center; padding: 4em; } .pie ...

  6. pure CSS waterfall layout

    pure CSS waterfall layout 纯 CSS 瀑布流布局 flex layout .container{} .item{} https://caniuse.com/?search=c ...

  7. pure.css 学习记录

    兼容性记录: IE 8+ Latest Stable: Firefox, Chrome, Safari iOS 6-8 Android 4.x 处理兼容性 <!--[if lte IE 8]&g ...

  8. pure css简单组件，借鉴bootstrap

    <!doctype html> <html> <head> <meta http-equiv="Content-type" content ...

  9. pure css兼容IE

    <!--[if lte IE 8]> <link rel="stylesheet" href="pure/0.5.0/grids-responsive- ...

随机推荐

  1. PHP设计模式笔记三：三种基本设计模式（工厂模式、单例模式、注册树模式） -- Rango韩老师 http://www.imooc.com/learn/236

    一.工厂设计模式 index.php $db = IMooc\Factory::createDatabase(); 使用工厂类的静态方法直接创建一个dababase对象,当类名发生修改时,在工厂里修改 ...

  2. [AngularJS + RxJS] Search with RxJS

    When doing search function, you always need to consider about the concurrent requests. AEvent ----(6 ...

  3. UIImagePickerController从拍照、图库、相册获取图片

    iOS 获取图片有三种方法: 1. 直接调用摄像头拍照 2. 从相册中选择 3. 从图库中选择 UIImagePickerController 是系统提供的用来获取图片和视频的接口: 用UIImage ...

  4. 浅谈管道模型(Pipeline)

    本篇和大家谈谈一种通用的设计与处理模型--Pipeline(管道). Pipeline简单介绍 Pipeline模型最早被使用在Unix操作系统中.据称,假设说Unix是计算机文明中最伟大的发明,那么 ...

  5. Verilog 读写文件

    Verilog 读写文件 在数字设计验证中,有时我们需要大量的数据,这时可以通过文件输入,有时我们需要保存数据,可以通过写文件保存. 读写文件testbench module file_rw_tb() ...

  6. 在用EF新增对象存贮至数据库时汪报错，但数据库里没有新增数据

    大致的问题是这样的: 原来一直用存贮数据的方法是用的是:DBContext.AddToXXXX(),这个方法.在写代码的时候看到VS提示这个方法已失效,推荐使用DBContext.XXXX.AddOb ...

  7. View not attached to window manager

    java.lang.IllegalArgumentException: View not attached to window manager 在用ProgressDialog的时候,任务结束后Dis ...

  8. linux oracle 设置随系统自动启动数据库实例和监听

    在root账户下修改/etc/oratab 文件: # vi /etc/oratab 找到orcl=/db/app/oracle/product/11.1.0/db_1 :N这一行 改为: orcl= ...

  9. Win7 32位系统下Java开发环境的安装及配置

    目录: Java JDK安装. Java JDK系统环境的配置. 配置常见问题的解决. Java JDK的安装 Java Jdk(Java Development Kit)Java开发不可缺少的环境, ...

  10. C++中的cout输出机制

    代码: #include <iostream> using namespace std; int hello(){ cout<<"hello"<< ...