本人新手,之前偶尔接触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. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  2. hdu 3722

    单词间形成环,求最大值,,KM,,,,, #include<stdio.h> #include<string.h> #define N 210 #define inf 0x3f ...

  3. Thrift的安装和简单演示样例

    本文仅仅是简单的解说Thrift开源框架的安装和简单使用演示样例.对于具体的解说,后面在进行阐述. Thrift简述                                           ...

  4. Qt5官方demo解析集21——Extending QML - Adding Types Example

    本系列全部文章能够在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 又是一个新的系列了,只是这个系列和我们之前的Chapt ...

  5. 2014牡丹江——Domination

    题目链接 题意: 给一个n*m的矩阵,每天随机的在未放棋子的格子上放一个棋子.求每行至少有一个棋子,每列至少有一个棋子的天数的期望  (1 <= N, M <= 50). 分析: 比較明显 ...

  6. TPCC-UVA测试环境搭建与结果分析

    一.    准备 操作系统 :Linux, 内核版本2.6 需要软件:tpccuva-1.2.3, postgresql-8.1.15, gnuplot-4.2.5. tccuva是实现标准TPC-C ...

  7. linux 服务器更主板后无法识别网卡处理过程

    linux 服务器更主板后无法识别网卡处理过程   服务器故障报修,主板坏,更换主板后无法识别网卡,ifconfig 查看只显示:lo loopback 127.0.0.1. 系统加载网卡驱动后会去读 ...

  8. CATransform3D中m34字段的取值含义

    转载自:http://zhidao.baidu.com/link?url=OlVQoGOKIBmaXKgQisOLtzliTLPvreOOsRmny3yebA1Wb6-B3KtuKlRXmv0tO3y ...

  9. 使用hbase的api创建表时出现的异常

    /usr/lib/jvm/java-7-openjdk-amd64/bin/java -Didea.launcher.port=7538 -Didea.launcher.bin.path=/usr/l ...

  10. PAT 64.Complete Binary Search Tree

    题目链接: http://pat.zju.edu.cn/contests/pat-a-practise/1064 思路分析: 1)先对数组排好序. 2)采用中序遍历的方式,将排好序的元素逐个插入在完全 ...