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- ...
随机推荐
- [置顶] iOS 应用程序内部国际化,不跟随系统语言
前言:网络上关于iOS国际化的文章很多,但基本上都是基于跟随系统语言的国际化,笔者就不赘述了-0 – 今天要讲的是不跟随系统的切换语言版本方案,即程序内部的切换语言版本方案. 一.总则: 应用内部语言 ...
- 在线C语言编译器/解释器
在线C语言编译器/解释器 本文介绍两个C语言在线解释器/编译器,这些工具可以提高代码片段检测方便的工作效率,并可以保证这些代码的正确性,而且还可以和别人一起编辑/分享之间的代码,这样可以共同分析代码并 ...
- android面试题之七
三十六.请解释下在单线程模型中Message.Handler.Message Queue.Looper之间的关系. 简单的说,Handler获取当前线程中的looper对象,looper用来从存放Me ...
- 《javascript设计模式》读书笔记四(单例模式)
1.单利模式简单介绍 在<设计模式>中单利模式是一种比較简单的模式,定义例如以下: 确保某一个类仅仅有一个实例,并且自行实例化并向整个系统提供这个实例. 在javascript中则将代码组 ...
- python进阶之路4.2---装饰器
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- arraylist与List<>
arraylist 不用规定 类型 list<>用规定类型 推荐list 这个编译检查类型 出错率低 代码质量高
- js中完数的输出
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- C/C++中的函数传值
一.运行如下程序段 #include <iostream> #include <string> #include <cstring> //strcpy #inclu ...
- vector的用法总结
Reference Constructors vector Constructs a vector of a specific size or with elements of a specific ...
- 对面向对象程序设计(OOP)的认识
前言 本文主要介绍面向对象(OO)程序设计,以维基百科的解释: 面向对象程序设计(英语:Object-oriented programming,缩写:OOP),指一种程序设计范型,同时也是一种程序开发 ...