Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revamp Pure Menu #142

Closed
wants to merge 10 commits into from
Closed

Revamp Pure Menu #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d20590c
Revamp menus
tilomitra Jul 19, 2013
fa7ffd3
Revamp Menus to make them mobile-first with dropdown support
tilomitra Aug 24, 2014
f0754b3
update Gruntfile for new menus
tilomitra Aug 24, 2014
5aaebe0
add border-box rule
tilomitra Aug 25, 2014
b247b2d
add customized menu example
tilomitra Aug 25, 2014
e8c0245
Merge branch 'master' of github.com:yui/pure into new-menu
tilomitra Aug 25, 2014
87eff25
change order of concatenation
tilomitra Aug 25, 2014
eab6a0c
add z-index in case another menu is behind this menu
tilomitra Aug 25, 2014
4a52463
add white background over dropdown children
tilomitra Aug 25, 2014
9c55ca2
update menus manual test
tilomitra Aug 25, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions Gruntfile.js
View file
Open in desktop
Expand Up @@ -74,8 +74,8 @@ grunt.initConfig({

{'build/menus-nr.css': [
'build/menus-core.css',
'build/menus.css',
'build/menus-paginator.css'
'build/menus-dropdown.css',
'build/menus.css'
]},

{'build/menus.css': [
Expand Down
132 changes: 47 additions & 85 deletions src/menus/css/menus-core.css
View file
Open in desktop
@@ -1,46 +1,33 @@
/*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-list,
.pure-menu-item {
position: relative;
}

.pure-menu ul {
left: -10000px;
.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;
display: inline-block;
}

.pure-menu-open > ul:focus {
outline: 0;
.pure-menu-item {
padding: 0;
margin: 0;
height: 100%;
text-align: left;
}

.pure-menu li { position: relative; }

.pure-menu a,
.pure-menu .pure-menu-heading {
.pure-menu-link,
.pure-menu-heading,
.pure-menu-responsive-toggle {
display: block;
color: inherit;
line-height: 1.5em;
padding: 5px 20px;
text-decoration: none;
white-space: nowrap;
}
Expand All @@ -52,40 +39,6 @@
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 {
Expand All @@ -95,42 +48,51 @@
width: 100%;
}


/* HORIZONTAL MENU CODE */
/* HORIZONTAL MENU */
.pure-menu-horizontal {
width: 100%;
border-left: none;
border-right: none;
}

/* Initial menus should be inline-block so that they are horizontal */
.pure-menu-horizontal li {
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-heading {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}

/* Submenus should still be display: block; */
.pure-menu-horizontal li li {
.pure-menu-item .pure-menu-item {
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";
/* RESPONSIVE MENUS */
/* Hide the toggle button by default. It will show on small screen sizes */
.pure-menu-responsive .pure-menu-list {
display: none;
}
/*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;

.pure-menu-responsive-toggle {
display: block;
}

/* Adjusting separator for vertical menus */
.pure-menu-horizontal li.pure-menu-separator {
height: 50%;
width: 1px;
margin: 0 7px;
.pure-menu-responsive-toggle:after {
content: "\25BE";
float: right;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
margin-right: -15px;
margin-top: -1px;
}

/* Submenus should be horizontal separator again */
.pure-menu-horizontal li li.pure-menu-separator {
height: 1px;
width: auto;
margin: 7px 2px;
.pure-menu-is-active .pure-menu-list,
.pure-menu-is-active .pure-menu-item {
display: block;
}

.pure-menu-is-active .pure-menu-separator {
width: auto;
height: 1px;
}
41 changes: 41 additions & 0 deletions src/menus/css/menus-dropdown.css
View file
Open in desktop
@@ -0,0 +1,41 @@
/* By default, don't show the .pure-menu-children. */
.pure-menu-children {
display: none;
position: absolute; /* absolute positioned inside a relative container */
margin: 0;
padding: 0;
z-index: 2;
}

/* Vertical Menus - when an item is interacted with, show the children */
.pure-menu-item:hover > .pure-menu-children,
.pure-menu-item:focus > .pure-menu-children {
display: block;
top: 0;
left: 100%;
width: 100%;
}

/* Horizontal Menus - when an item is interacted with, show the children */
.pure-menu-horizontal .pure-menu-item:hover > .pure-menu-children,
.pure-menu-horizontal .pure-menu-item:focus > .pure-menu-children {
top: 100%;
left: 0;
width: inherit;
}

.pure-menu-is-active .pure-menu-children {
display: block;
position: static;
}

/* Regular Menus - show the dropdown arrow */
.pure-menu-has-children > .pure-menu-link:after {
padding-left: 0.5em;
content: "\25B8";
}

/* Horizontal Menus - show the dropdown arrow */
.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
content: "\25BE";
}
55 changes: 0 additions & 55 deletions src/menus/css/menus-paginator.css
View file
Open in desktop

This file was deleted.

14 changes: 6 additions & 8 deletions src/menus/css/menus-r.css
View file
Open in desktop
@@ -1,10 +1,8 @@
@media (max-width: 480px) {
.pure-menu-horizontal {
width: 100%;
@media (min-width: 48em) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whole file should be killed, since it has media queries in it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no way for this to work for people since we have no idea how many items are in the menu, and that's a variable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ericf Read the section Responsive Menus and Overriding Media Queries in the PR Description.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I read that. So if people are going to have to add media queries anyways, we should remove this. If I have a menu with two–three items in it, it might not need to collapse on an iPad in portrait, or an larger screen phone, etc.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should still provide the option of linking to this file from the CDN. I am cool with excluding it from the build roll-ups, so it has to be pulled in separately.

.pure-menu-responsive .pure-menu-list {
display: inline-block;
}

.pure-menu-children li {
display: block;
border-bottom: 1px solid black;
.pure-menu-responsive-toggle {
display: none;
}
}
}