本人新手，之前偶尔接触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. JAVA学习第三十课（经常使用对象API）- String类：类方法练习

    intern方法 public class Main { public static void main(String[] args) { String str1 = new String(" ...

  2. ngui点击与场景点击判断

    注:NGUI 组件上加上 BoxCollider 并设置区域大小 public void OnMouseDown()    { if (UICamera.hoveredObject == null) ...

  3. IO中手机旋转事件的传递

    UIApplication -> delegate -> widnow -> rootViewController

  4. 安装mysql时提示The host 'xxx' could not be looked up with resolveip的解决办法

    1.首先用cat查看/etc/hosts文件,会显示以下内容: 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.loca ...

  5. python - 类的字段

    一.静态字段:保存在类里面 1.创建静态字段: class Foo: CC = 123 # 字段(静态字段),保存在类里 def __init__(self): self.name = 'alex' ...

  6. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  7. (转).net程序员转战android第二篇---牛刀小试

    上篇说道如何搭建android的开发环境,这一篇我们将牛刀小试一下, 完成我们第一个android APP应用. 我就从新建项目说起吧. 首先打开Eclipse,选择顶部的File(文件)——new( ...

  8. oracle学习笔记（二）表的查询

    --oracle表的管理 --创建表 )); --删除表 drop table users; --创建表 ),xm ),sex ),birthday date,sal ,)); ),cnmae )); ...

  9. iOS_SN_push/pop转场动画封装和一般动画封装

    封装类中的方法: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface AnimationE ...

  10. hdu1520 第一道树形DP，激动哇咔咔！

    A - 树形dp Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Sta ...