Pure Css 菜单的使用
本人新手,之前偶尔接触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 菜单的使用的更多相关文章
- Pure CSS 的网格布局(比bootstrap小很多且易扩展的css UI)
(转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pur ...
- Pure.css网格系统学习心得——图片的响应式以及应用填充和边框网格单位的学习
今天学习了pure.css可定制的网格系统,pure默认的网格系统是移动先行,如果我们想在小屏幕上有网格只要用pure-u-*就可以了,下面来说一下它的主要用法! <div class=&quo ...
- 纯CSS菜单样式,及其Shadow DOM,Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- [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
- Pure CSS Progress Chart
Pure CSS Progress Chart CSS Progress Circle SCSS .example { text-align: center; padding: 4em; } .pie ...
- pure CSS waterfall layout
pure CSS waterfall layout 纯 CSS 瀑布流布局 flex layout .container{} .item{} https://caniuse.com/?search=c ...
- pure.css 学习记录
兼容性记录: IE 8+ Latest Stable: Firefox, Chrome, Safari iOS 6-8 Android 4.x 处理兼容性 <!--[if lte IE 8]&g ...
- pure css简单组件,借鉴bootstrap
<!doctype html> <html> <head> <meta http-equiv="Content-type" content ...
- pure css兼容IE
<!--[if lte IE 8]> <link rel="stylesheet" href="pure/0.5.0/grids-responsive- ...
随机推荐
- jQuery中ready与load事件的区别
1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...
- hdu 3722
单词间形成环,求最大值,,KM,,,,, #include<stdio.h> #include<string.h> #define N 210 #define inf 0x3f ...
- Thrift的安装和简单演示样例
本文仅仅是简单的解说Thrift开源框架的安装和简单使用演示样例.对于具体的解说,后面在进行阐述. Thrift简述 ...
- Qt5官方demo解析集21——Extending QML - Adding Types Example
本系列全部文章能够在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 又是一个新的系列了,只是这个系列和我们之前的Chapt ...
- 2014牡丹江——Domination
题目链接 题意: 给一个n*m的矩阵,每天随机的在未放棋子的格子上放一个棋子.求每行至少有一个棋子,每列至少有一个棋子的天数的期望 (1 <= N, M <= 50). 分析: 比較明显 ...
- TPCC-UVA测试环境搭建与结果分析
一. 准备 操作系统 :Linux, 内核版本2.6 需要软件:tpccuva-1.2.3, postgresql-8.1.15, gnuplot-4.2.5. tccuva是实现标准TPC-C ...
- linux 服务器更主板后无法识别网卡处理过程
linux 服务器更主板后无法识别网卡处理过程 服务器故障报修,主板坏,更换主板后无法识别网卡,ifconfig 查看只显示:lo loopback 127.0.0.1. 系统加载网卡驱动后会去读 ...
- CATransform3D中m34字段的取值含义
转载自:http://zhidao.baidu.com/link?url=OlVQoGOKIBmaXKgQisOLtzliTLPvreOOsRmny3yebA1Wb6-B3KtuKlRXmv0tO3y ...
- 使用hbase的api创建表时出现的异常
/usr/lib/jvm/java-7-openjdk-amd64/bin/java -Didea.launcher.port=7538 -Didea.launcher.bin.path=/usr/l ...
- PAT 64.Complete Binary Search Tree
题目链接: http://pat.zju.edu.cn/contests/pat-a-practise/1064 思路分析: 1)先对数组排好序. 2)采用中序遍历的方式,将排好序的元素逐个插入在完全 ...