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

    公司需要,开始了DevExpress的学习之旅,说它万恶也只是在不了解它的情况下,熟悉之后能很方便的实现很多想要的功能 这里简单写一下要整理的内容,也就是大纲,以后再慢慢添加 一.控件和组件 date ...

  2. 多封装，少开放。强烈建议C++标准添加class之间的注入机制

    近日在改动了一下下引擎代码(为了自己的组件),发现有些接口是仅仅有特定类及其内部函数才去訪问,却不使用友元声明的形式进行数据訪问--当然使用了普通非virtual的形式也就是意味着不建议重载. 故此: ...

  3. 事关Animation Tree的工作随笔（二）

    上回说到,游戏项目中客观会遇到逻辑状态的复杂性和动画状态的单一性之间的矛盾,那么Animation Tree是如何解决这个问题的呢? 这又需要引入一个定律:就是逻辑状态无论有多么复杂,但一套逻辑状态组 ...

  4. C# WPF 建立无边框（标题栏）的登录窗口

    前言:笔者最近用c#写WPF做了一个项目,此前未曾做过完整的WPF项目,算是一边学一边用,网上搜了不少资料,效率当然是不敢恭维的,有时会在一些很简单的问题上纠结很长时间,血与泪的教训可不少. 不过,正 ...

  5. CodeSmith使用总结--创建一个基础模板

    问:为什么要用CodeSmith? 答曰:因为我懒的写. Codesmith是一款非常不错的懒人工具,我也经常会用到,因为它在“重复代码”方面能够节省我们很多时间,并且解除了我们重复繁琐并且乏味的“码 ...

  6. javascript解决for循环中i取值的问题（转载）

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. web.config中的profile

    aspnet_regsql命令创建需要的表结构 public class UserProfile:ProfileBase { [SettingsAllowAnonymous(true)] //默认匿名 ...

  8. C/C++中的const int*和int * const

    代码: #include <iostream> using namespace std; int main(){ const int *p; ; p = &a; a = ; cou ...

  9. SurfaceFlinger

    D:\linux\ubuntu\touch\libhybris\libhybris_0.1.0+git20130606+c5d897a.orig\libhybris-0.1.0+git20130606 ...

  10. android之ListView，详细介绍实现步骤，举例，自定义listview适配器

    android之ListView,详细介绍实现步骤,举例,自定义listview适配器 本文来源于www.ifyao.com禁止转载!www.ifyao.com android中如何使用listVie ...