library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #424 from jamesalley/new-menu

Browse Source 
New Menu
This commit is contained in:
James Alley 2015-02-02 13:31:51 -08:00
commit 325a3b72d9
16 changed files with 443 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Gruntfile.js
View File

@ -72,15 +72,12 @@ grunt.initConfig({
'build/grids-units.css'
]},
{'build/menus-nr.css': [
'build/menus-core.css',
'build/menus.css',
'build/menus-paginator.css'
]},
{'build/menus.css': [
'build/menus-nr.css',
'build/menus-r.css'
'build/menus-core.css',
'build/menus-horizontal.css',
'build/menus-dropdown.css',
'build/menus-scrollable.css',
'build/menus-skin.css',
]},
// Rollups
@ -99,7 +96,7 @@ grunt.initConfig({
'build/grids.css',
'build/buttons.css',
'build/forms-nr.css',
'build/menus-nr.css',
'build/menus.css',
'build/tables.css'
]}
]

26
HISTORY.md
View File

@ -1,8 +1,32 @@
Pure Change History
===================
0.6.0 (2015-02-07)
------------------
* Upgraded Normalize.css to 3.0.1.
* Upgraded Normalize.css to 3.0.2.
* Dropped IE7 support.
* Refactored Menus.
### Menus
* Implemented flatter, low-specificity selectors, not attached to HTML elements,
for easier customization.
* Removed pure-menu-open class.
* Added pure-menu-scrollable capability, to allow for scrollable menus when
restricted by width or height.
* Added pure-menu-allow-hover to reveal dropdowns on hover.
* Removed various default styling properties, making menus a bit more bare-bones,
a bit less opinionated, a bit easier to customize on top.
* Broke Menu up into files for core, horizontal, dropdowns, scrollable, and skin,
again for improved optimization and ease of customization: take only what you
need.
* Removed Paginator.
* While not part of the Pure repo itself, the accompanying Pure website now
features additional menu examples and an example script for enabling dropdowns
and improved accessiblity.
0.5.0 (2014-05-27)
------------------

3
bower.json
View File

@ -1,6 +1,7 @@
{
"name": "pure",
"version": "0.5.0",
"description": "Use Pure's ridiculously tiny CSS to start any web project.",
"version": "0.6.0",
"main": "build/pure.css",
"devDependencies": {
"normalize-css": "^3.0"

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "pure",
"version": "0.5.0",
"version": "0.6.0",
"private": true,
"repository": "git://github.com/yahoo/pure.git",
"scripts": {

1
src/base/css/base.css
View File

@ -12,6 +12,7 @@
* Always hide an element when it has the `hidden` HTML attribute.
*/
.hidden,
[hidden] {
display: none !important;
}

1
src/buttons/css/buttons.css
View File

@ -32,6 +32,7 @@
.pure-button-active,
.pure-button:active {
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
border-color: #000\9;
}
.pure-button[disabled],

16
src/forms/css/forms.css
View File

@ -1,3 +1,11 @@
/*csslint box-model:false*/
/*
Box-model set to false because we're setting a height on select elements, which
also have border and padding. This is done because some browsers don't render
the padding. We explicitly set the box-model for select elements to border-box,
so we can ignore the csslint warning.
*/
.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
@ -64,7 +72,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
.pure-form select:focus,
.pure-form textarea:focus {
outline: 0;
outline: thin dotted \9; /* IE6-9 */
border-color: #129FEA;
}
@ -74,14 +81,13 @@ since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]):focus {
outline: 0;
outline: thin dotted \9; /* IE6-9 */
border-color: #129FEA;
}
.pure-form input[type="file"]:focus,
.pure-form input[type="radio"]:focus,
.pure-form input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: thin solid #129FEA;
outline: 1px auto #129FEA;
}
.pure-form .pure-checkbox,
@ -140,6 +146,8 @@ since IE8 won't execute CSS that contains a CSS3 selector.
outline-color: #e9322d;
}
.pure-form select {
/* Normalizes the height; padding is not sufficient. */
height: 2.15em;
border: 1px solid #ccc;
background-color: white;
}
@ -219,7 +227,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
margin: 0 1em 0 0;
}
.pure-form-aligned .pure-controls {
margin: 1.5em 0 0 10em;
margin: 1.5em 0 0 11em;
}
/* Rounded Inputs */

143
src/menus/css/menus-core.css
View File

@ -1,136 +1,37 @@
/*csslint adjoining-classes:false, outline-none:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/
.pure-menu ul {
position: absolute;
visibility: hidden;
/*csslint adjoining-classes: false, box-model:false*/
.pure-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pure-menu.pure-menu-open {
visibility: visible;
z-index: 2;
width: 100%;
.pure-menu-fixed {
position: fixed;
left: 0;
top: 0;
z-index: 3;
}
.pure-menu ul {
left: -10000px;
.pure-menu-list,
.pure-menu-item {
position: relative;
}
.pure-menu-list {
list-style: none;
margin: 0;
padding: 0;
top: -10000px;
z-index: 1;
}
.pure-menu > ul { position: relative; }
.pure-menu-open > ul {
left: 0;
top: 0;
visibility: visible;
.pure-menu-item {
padding: 0;
margin: 0;
height: 100%;
}
.pure-menu-open > ul:focus {
outline: 0;
}
.pure-menu li { position: relative; }
.pure-menu a,
.pure-menu .pure-menu-heading {
.pure-menu-link,
.pure-menu-heading {
display: block;
color: inherit;
line-height: 1.5em;
padding: 5px 20px;
text-decoration: none;
white-space: nowrap;
}
.pure-menu.pure-menu-horizontal > .pure-menu-heading {
display: inline-block;
*display: inline;
zoom: 1;
margin: 0;
vertical-align: middle;
}
.pure-menu.pure-menu-horizontal > ul {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
.pure-menu li a { padding: 5px 20px; }
.pure-menu-can-have-children > .pure-menu-label:after {
content: '\25B8';
float: right;
/* These specific fonts have the Unicode char we need. */
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
margin-right: -20px;
margin-top: -1px;
}
.pure-menu-can-have-children > .pure-menu-label {
padding-right: 30px;
}
.pure-menu-separator {
background-color: #dfdfdf;
display: block;
height: 1px;
font-size: 0;
margin: 7px 2px;
overflow: hidden;
}
.pure-menu-hidden {
display: none;
}
/* FIXED MENU */
.pure-menu-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* HORIZONTAL MENU CODE */
/* Initial menus should be inline-block so that they are horizontal */
.pure-menu-horizontal li {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
/* Submenus should still be display: block; */
.pure-menu-horizontal li li {
display: block;
}
/* Content after should be down arrow */
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after {
content: "\25BE";
}
/*Add extra padding to elements that have the arrow so that the hover looks nice */
.pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label {
padding-right: 30px;
}
/* Adjusting separator for vertical menus */
.pure-menu-horizontal li.pure-menu-separator {
height: 50%;
width: 1px;
margin: 0 7px;
}
/* Submenus should be horizontal separator again */
.pure-menu-horizontal li li.pure-menu-separator {
height: 1px;
width: auto;
margin: 7px 2px;
}

38
src/menus/css/menus-dropdown.css Normal file
View File

@ -0,0 +1,38 @@
/* Submenus should still be display: block; */
.pure-menu-item .pure-menu-item {
display: block;
}
.pure-menu-children {
display: none;
position: absolute;
left: 100%;
top: 0;
margin: 0;
padding: 0;
z-index: 3;
}
.pure-menu-horizontal .pure-menu-children {
left: 0;
top: auto;
width: inherit;
}
.pure-menu-allow-hover:hover > .pure-menu-children,
.pure-menu-active > .pure-menu-children {
display: block;
position: absolute;
}
/* Vertical Menus - show the dropdown arrow */
.pure-menu-has-children > .pure-menu-link:after {
padding-left: 0.5em;
content: "\25B8";
font-size: small;
}
/* Horizontal Menus - show the dropdown arrow */
.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
content: "\25BE";
}

19
src/menus/css/menus-horizontal.css Normal file
View File

@ -0,0 +1,19 @@
/* HORIZONTAL MENU */
.pure-menu-horizontal {
width: 100%;
white-space: nowrap;
}
.pure-menu-horizontal .pure-menu-list {
display: inline-block;
}
/* Initial menus should be inline-block so that they are horizontal */
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-separator {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}

55
src/menus/css/menus-paginator.css
View File

@ -1,55 +0,0 @@
/*csslint box-model:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/
.pure-paginator {
/* `pure-g` Grid styles */
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
*letter-spacing: normal; /* reset IE < 8 */
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
/* `pure-paginator` Specific styles */
list-style: none;
margin: 0;
padding: 0;
}
.opera-only :-o-prefocus,
.pure-paginator {
word-spacing: -0.43em;
}
/* `pure-u` Grid styles */
.pure-paginator li {
display: inline-block;
*display: inline; /* IE < 8: fake inline-block */
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.pure-paginator .pure-button {
border-radius: 0;
padding: 0.8em 1.4em;
vertical-align: top;
height: 1.1em;
}
.pure-paginator .pure-button:focus,
.pure-paginator .pure-button:active {
outline-style: none;
}
.pure-paginator .prev,
.pure-paginator .next {
color: #C0C1C3;
text-shadow: 0 -1px 0 rgba(0,0,0, 0.45);
}
.pure-paginator .prev {
border-radius: 2px 0 0 2px;
}
.pure-paginator .next {
border-radius: 0 2px 2px 0;
}

10
src/menus/css/menus-r.css
View File

@ -1,10 +0,0 @@
@media (max-width: 480px) {
.pure-menu-horizontal {
width: 100%;
}
.pure-menu-children li {
display: block;
border-bottom: 1px solid black;
}
}

27
src/menus/css/menus-scrollable.css Normal file
View File

@ -0,0 +1,27 @@
/* scrollable menus */
.pure-menu-scrollable {
overflow-y: scroll;
overflow-x: hidden;
}
.pure-menu-scrollable .pure-menu-list {
display: block;
}
.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
display: inline-block;
}
.pure-menu-horizontal.pure-menu-scrollable {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
/* a little extra padding for this style to allow for scrollbars */
padding: .5em 0;
}
.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
display: none;
}

51
src/menus/css/menus-skin.css Normal file
View File

@ -0,0 +1,51 @@
/* misc default styling */
.pure-menu-separator {
background-color: #ccc;
height: 1px;
margin: .3em 0;
}
.pure-menu-horizontal .pure-menu-separator {
width: 1px;
height: 1.3em;
margin: 0 .3em ;
}
.pure-menu-heading {
text-transform: uppercase;
color: #565d64;
}
.pure-menu-link {
color: #777;
}
.pure-menu-children {
background-color: #fff;
}
.pure-menu-link,
.pure-menu-disabled,
.pure-menu-heading {
padding: .5em 1em;
}
.pure-menu-disabled {
opacity: .5;
}
.pure-menu-disabled .pure-menu-link:hover {
background-color: transparent;
}
.pure-menu-active > .pure-menu-link,
.pure-menu-link:hover,
.pure-menu-link:focus {
background-color: #eee;
}
.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
color: #000;
}

86
src/menus/css/menus.css
View File

@ -1,86 +0,0 @@
/*csslint adjoining-classes:false*/
/*TODO: Remove this lint rule override after a refactor of this code.*/
/* MAIN MENU STYLING */
.pure-menu.pure-menu-open,
.pure-menu.pure-menu-horizontal li .pure-menu-children {
background-color: #fff; /* Old browsers */
border: 1px solid #b7b7b7;
}
/* remove borders for horizontal menus */
.pure-menu.pure-menu-horizontal,
.pure-menu.pure-menu-horizontal .pure-menu-heading {
border: none;
}
/* LINK STYLES */
.pure-menu a {
border: 1px solid transparent;
border-left: none;
border-right: none;
}
.pure-menu a,
.pure-menu .pure-menu-can-have-children > li:after {
color: #777;
}
.pure-menu .pure-menu-can-have-children > li:hover:after {
color: #fff;
}
/* Focus style for a dropdown menu-item when the parent has been opened */
.pure-menu .pure-menu-open {
background-color: #dedede;
}
.pure-menu li a:hover,
.pure-menu li a:focus {
background-color: #eee;
}
/* DISABLED STATES */
.pure-menu li.pure-menu-disabled a:hover,
.pure-menu li.pure-menu-disabled a:focus {
background-color: #fff;
color: #bfbfbf;
}
.pure-menu .pure-menu-disabled > a {
background-image: none;
border-color: transparent;
cursor: default;
}
.pure-menu .pure-menu-disabled > a,
.pure-menu .pure-menu-can-have-children.pure-menu-disabled > a:after {
color: #bfbfbf;
}
/* HEADINGS */
.pure-menu .pure-menu-heading {
color: #565d64;
text-transform: uppercase;
font-size: 90%;
margin-top: 0.5em;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dfdfdf;
}
/* ACTIVE MENU ITEM */
.pure-menu .pure-menu-selected a {
color: #000;
}
/* FIXED MENU */
.pure-menu.pure-menu-open.pure-menu-fixed {
border: none;
border-bottom: 1px solid #b7b7b7;
}

385
src/menus/tests/manual/menus.html
View File

@ -1,177 +1,268 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Menus Tests</title>
<link rel="stylesheet" href="../../../../build/base.css">
<link rel="stylesheet" href="../../../../build/buttons.css">
<link rel="stylesheet" href="../../../../build/menus.css">
<meta charset='utf-8'>
<meta name="viewport" content="width = device-width">
<title>Menus CSS</title>
<link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
<link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css">
<link rel="stylesheet" type="text/css" href="../../../../build/menus-min.css">
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<style>
#menu-1 {
border: 1px solid;
h1 {
font-size: 15px;
font-weight: normal;
}
body {
padding: 2em 2em 8em;
}
#menu-1 li a {
padding: 10px 20px;
background: rgb(150, 209, 255);
/* Update background on menu. */
.menu-custom,
.children-custom,
.menu-custom .pure-menu-list {
background: #111;
padding: 0.8em;
border-radius: 5px;
}
/* Make the heading white */
.heading-custom {
color: white;
}
.heading-custom:hover {
background-color: transparent;
}
/* Make links light-gray with a transition */
.link-custom {
color: #ddd;
transition: color 0.5s;
}
/* Color links blue on hover and focus */
.link-custom:hover,
.link-custom:focus {
color: #40a4ff;
background-color: transparent;
}
/* Update the positioning of the toggle button
because we are modifying the menu's padding, and change its color. */
.toggle-custom {
margin-right: 15px;
color: white;
}
.pure-menu-custom-1 {
border: 1px solid #ccc;
border-radius: 2px;
min-width: 480px;
}
.pure-menu-custom-2 {
border: 1px solid #ccc;
border-radius: 2px;
width: 150px;
}
.pure-menu-custom-2 .pure-menu-list {
display: block;
}
.pure-menu-custom-2 .pure-menu-children {
border: 1px solid #ccc;
border-radius: 2px;
width: 170px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.pure-menu-custom-3 {
border: 1px solid #ccc;
border-radius: 7px;
width: 180px;
height: 150px;
}
.pure-menu-custom-3 .pure-menu-list {
display: block;
}
</style>
</head>
<body>
<h1>Menus Tests</h1>
<h2>Horizontal Menu</h2>
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="#" class="pure-menu-heading">Site Title</a>
<ul>
<li><a href="#">Home</a></li>
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
<h1>plain div.pure-menu.pure-menu-horizontal</h1>
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-link pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
</ul>
</div>
<h2>Horizontal Menu (Custom)</h2>
<div id="menu-1" class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="#" class="pure-menu-heading">Site Title</a>
<ul>
<li><a href="#">Home</a></li>
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
</ul>
</div>
<h2>Vertical Menu</h2>
<div class="pure-menu pure-menu-open">
<a href="#" class="pure-menu-heading">Site Title</a>
<ul>
<li class="pure-menu-selected"><a href="#">Home</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li class="pure-menu-heading">Yahoo! Sites</li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
</ul>
</div>
<div class="pure-menu pure-menu-open">
<ul>
<li class="pure-menu-heading">Site Title</li>
<li class="pure-menu-selected"><a href="#">Home</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li class="pure-menu-heading">Yahoo! Sites</li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<li class="pure-menu-disabled"><a href="#">Disabled</a></li>
</ul>
</div>
<h2>Add Dropdowns to Menus</h2>
<p>
Adding dropdowns to menus requires the use of JavaScript. The <code>Y.Menu</code> module adds dropdown functionality and the ability to create JavaScript menus. It uses <code>csslist</code> to style these menus, so they look identical.
</p>
<div id="horizontal-menu">
<a href="#" class="pure-menu-heading">Site Title</a>
<ul id="std-menu-items">
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<h1>div.pure-menu.pure-menu-horizontal.pure-menu-custom-1</h1>
<div class="pure-menu pure-menu-horizontal pure-menu-custom-1">
<a href="#" class="pure-menu-link pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-separator"></li>
<li>
<a href="#">Other</a>
<ul>
<li class="pure-menu-heading">More from Yahoo!</li>
<li class="pure-menu-separator"></li>
<li><a href="#">Autos</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Answers</a></li>
<li>
<a href="#">Even More</a>
<ul>
<li><a href="#">Horoscopes</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">OMG</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
</ul>
</div>
<h1>div.pure-menu.pure-menu-custom-2</h1>
<div class="pure-menu pure-menu-custom-2">
<a href="#" class="pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-separator"></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
<li class="pure-menu-separator"></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
</ul>
</div>
<h1>plain div.pure-menu, with nested children. Note that with no width set, it's funky, but using inline-block would not be desirable for most cases.</h1>
<div class="pure-menu">
<a href="#" class="pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item pure-menu-has-children">
<a href="#" class="pure-menu-link">Blog</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Dust Helpers</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/react">React Mixins</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/javascript">Intl Message Format</a></li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
</ul>
</div>
<h1>div.pure-menu.pure-menu-custom-2, with nested children. Here, a width is set. Sub-sub menu functionality demonstrated as well.</h1>
<div class="pure-menu pure-menu-custom-2">
<a href="#" class="pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item pure-menu-has-children">
<a href="#" class="pure-menu-link">Blog</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Dust Helpers</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/react">React Mixins</a></li>
<li class="pure-menu-item pure-menu-has-children">
<a href="#" class="pure-menu-link">More Stuff</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Foo</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Bar</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/react">Baz</a></li>
</ul>
</li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
</ul>
</div>
<h2>Fixed Menus</h2>
<p>
Fixed menus can be created by adding the <code>pure-menu-fixed</code> class name to the wrapper. This will fix a menu to the top of the page.
</p>
<p>
<button class="pure-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
</p>
<div id="fixed-menu" class="pure-menu pure-menu-horizontal pure-menu-fixed">
<ul>
<li class="pure-menu-selected"><a href="#">Flickr</a></li>
<li><a href="#">Messenger</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Finance</a></li>
<h1>div.pure-menu.pure-menu-custom-2, with nested children. Here, a width is set to limit the menu width.
The .pure-menu-allow-hover class is in play as well, no click required to display a submenu.</h1>
<div class="pure-menu pure-menu-custom-2">
<a href="#" class="pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" class="pure-menu-link">Blog</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Dust Helpers</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/react">React Mixins</a></li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" class="pure-menu-link">More Stuff</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Foo</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Bar</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="/react">Baz</a></li>
</ul>
</li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
</ul>
</div>
<h2>Paginator</h2>
<h1>div.pure-menu.pure-menu-horizontal.pure-menu-scrollable</h1>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
<a href="#" class="pure-menu-link pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Borland</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
</ul>
</div>
<ul class="pure-paginator">
<li><a class="pure-button prev" href="#">&#171;</a></li>
<li><a class="pure-button" href="#">1</a></li>
<li><a class="pure-button pure-button-active" href="#">2</a></li>
<li><a class="pure-button" href="#">3</a></li>
<li><a class="pure-button" href="#">4</a></li>
<li><a class="pure-button" href="#">5</a></li>
<li><a class="pure-button next" href="#">&#187;</a></li>
</ul>
<h1>div.pure-menu.pure-menu-scrollable.pure-menu-custom-3</h1>
<div class="pure-menu pure-menu-scrollable pure-menu-custom-3">
<a href="#" class="pure-menu-link pure-menu-heading">Title</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Borland</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
</ul>
</div>
<h1>div.pure-menu.pure-menu-horizontal, with nested children, customized</h1>
<div class="menu-custom pure-menu pure-menu-horizontal" hidden>
<a href="#" class="heading-custom pure-menu-link pure-menu-heading">Title</a>
<ul class="list-custom pure-menu-list">
<li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Home</a></li>
<li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">About</a></li>
<li class="item-custom pure-menu-item pure-menu-has-children">
<a href="#" class="link-custom pure-menu-link">Blog</a>
<ul class="children-custom pure-menu-children">
<li class="item-custom pure-menu-item"><a class="link-custom pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
<li class="item-custom pure-menu-item"><a class="link-custom pure-menu-link" href="/dust">Dust Helpers</a></li>
<li class="item-custom pure-menu-item"><a class="link-custom pure-menu-link" href="/react">React Mixins</a></li>
<li class="item-custom pure-menu-item"><a class="link-custom pure-menu-link" href="/javascript">Intl Message Format</a></li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="link-custom pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="link-custom pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="link-custom pure-menu-link">Twitter</a></li>
</ul>
</div>
<script src="http://10.73.144.35:5000/js/menus.js"></script>
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
<script>
var Y = YUI({
fetchCSS: false,
classNamePrefix: 'pure'
}).use('gallery-sm-menu', 'event-tap', 'node-base', function (Y) {
var horizontalMenu = new Y.Menu({
container : '#horizontal-menu',
sourceNode : '#std-menu-items',
orientation : 'horizontal',
hideOnOutsideClick: false
});
horizontalMenu.render();
horizontalMenu.show();
Y.one('#showFixedMenuBtn').on('tap', function (e) {
Y.one('#fixed-menu').toggleClass('pure-menu-open');
});
});
</script>
</body>
</html>