本人新手，之前偶尔接触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. 如何实现带照片缩略图的Listview

    ackage com.demo; import java.util.ArrayList; import android.app.Activity; import android.content.Con ...

  2. ssh命令

    使用ssh命令登陆远程系统 ssh [ip/address] -l [登陆用户名] 如: ssh www.xyz.cn -l root

  3. 搭建LAMP架构

    1. 为什么下载源码包需要到官网上去下载?简单说就是为了安全,如果是非官方下载的源码包,有可能被别有用心的人动过手脚. 2. 64位机器是否可以安装32位rpm包?64位机器是否可以安装32位的mys ...

  4. 远程连接到Fedora

    首先执行以下3点(主要是前两点) 第一: 开启ssh #service sshd restart 第二:关闭防火墙 #service iptables stop 第三:selinux(重启电脑后失效) ...

  5. C#高级编程第2章-核心C#

    内容提要: 声明变量:变量的初始化和作用域:C#的预定义数据类型:在C#程序中使用条件语句.循环和跳转语句指定执行流:枚举:名称空间: Main()方法:基本命令行C#编译器选项:使用System.C ...

  6. Django初学笔记1.

    1,安装python 和 Django , 参考网上教程(安装python,配置path, 安装django,配置path..) 2,查看django安装版本:cmd-->python--> ...

  7. 吸血鬼数字算法参考 -- javascript版本

    // 吸血鬼数字 java编程思想 第四章 75页 练习10 for (var i = 10; i <= 99; i++) { for (var j = i + 1; j < 99; j+ ...

  8. BZOJ4006 JLOI2015 管道连接(斯坦纳树生成森林)

    4006: [JLOI2015]管道连接 Time Limit: 30 Sec Memory Limit: 128 MB Description 小铭铭最近进入了某情报部门,该部门正在被如何建立安全的 ...

  9. QML添加右键菜单

    MouseArea { id: mouseRegion anchors.fill: parent; acceptedButtons: Qt.LeftButton | Qt.RightButton // ...

  10. C#如何设置下拉COMMBOX为不可输入,只有下拉条目

    设置下拉框的DropDownStyle属性为DropDownList