I am trying to use the Pure CSS framework for a responsive layout. I like their vertical menu, but I can't figure out how to add dropdown (collapsing) submenus.
I can't even get the horizontal menu example on their site to work here: http://purecss.io/menus/#add-dropdowns-to-menus
Vertical menu was the main reason I adopted Pure for my project, now I'm stuck.
Per Matthew's request here is code for an html page. Includes all code and links so you can load it in a browser for quickest understanding...
<!doctype html>
<html lang="en">
<head>
<!-- This page uses PURE CSS. See documentation at http://purecss.io/ -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For HTML5, place favicon.ico and apple-touch-icon(s) in the root directory -->
<!--Add PURE Base, which essentially is built-in Normalize.css,
an HTML5-ready CSS reset with minimal styling. -->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<!--Add style for vertical menu. -->
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://purecss.io/combo/1.11.5?/css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://purecss.io/combo/1.11.5?/css/layouts/side-menu.css">
<!--<![endif]-->
<!--Add yui for second-level menu support. -->
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
</head>
<body>
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<div id="menu">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading" href="#">Company</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="menu-item-divided pure-menu-selected">
<a href="#">Services</a>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="header">
<h1>Page Title</h1>
<h2>A subtitle for your page goes here</h2>
</div>
<div class="content">
<h2 class="content-subhead">The Layout</h2>
<p>
This is the basic "Side Bar" page design I want to customize. I got it from the Pure CSS <a href="http://purecss.io/layouts/" target="_blank">Layouts page</a>.
</p>
<h2 class="content-subhead">Horizontal Menu Example</h2>
<p>Following is the example <a href="http://purecss.io/menus/#add-dropdowns-to-menus" target="_blank">from Pure CSS Menus page</a> for adding drop-down to horizontal menu:</p>
<div id="demo-horizontal-menu">
<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>
<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>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- Script for adding drop-down. -->
<script>
YUI({
classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {
var horizontalMenu = new Y.Menu({
container : '#demo-horizontal-menu',
sourceNode : '#std-menu-items',
orientation : 'horizontal',
hideOnOutsideClick: false,
hideOnClick : false
});
horizontalMenu.render();
horizontalMenu.show();
});
</script>
<p> </p>
<p> </p>
<p style="color:garnet; font-weight:bold;">I am trying to learn how to add the above submenu functionality to Pure's vertical menu, which displays on the left side of this page.</p>
</div>
</div>
</div>
</body>
<!-- Script to make vertical menu responsive. -->
<script src="http://purecss.io/combo/1.11.5?/js/ui.js"></script>
</html>
There are a few issues about the styles for that vertical nav that make it awkward (the overflow-y had to be removed to allow any sub nav to display).
<!doctype html>
<html lang="en">
<head>
<!-- This page uses PURE CSS. See documentation at http://purecss.io/ -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For HTML5, place favicon.ico and apple-touch-icon(s) in the root directory -->
<!--Add PURE Base, which essentially is built-in Normalize.css,
an HTML5-ready CSS reset with minimal styling. -->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<!--Add yui for second-level menu support. -->
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<style>
body {
color: #777;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
padding-left: 0;
}
#layout.active {
position: relative;
left: 150px;
}
#layout.active #menu {
left: 150px;
width: 150px;
}
#layout.active .menu-link {
left: 150px;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
margin: 0 auto;
padding: 0 2em;
max-width: 800px;
margin-bottom: 50px;
line-height: 1.6em;
}
.header {
margin: 0;
color: #333;
text-align: center;
padding: 2.5em 2em 0;
border-bottom: 1px solid #eee;
}
.header h1 {
margin: 0.2em 0;
font-size: 3em;
font-weight: 300;
}
.header h2 {
font-weight: 300;
color: #ccc;
padding: 0;
margin-top: 0;
}
.content-subhead {
margin: 50px 0 20px 0;
font-weight: 300;
color: #888;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #191818;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #333;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #1f8dd6;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
#menu .pure-menu-children {
background: #191818;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 150px;
}
.menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .menu-link {
left: 150px;
}
}
</style>
</head>
<body>
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<div id="menu">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading" href="#">Company</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="menu-item-divided pure-menu-selected">
<a href="#">Services</a>
<ul>
<li class="pure-menu-heading">Sub Nav Heading</li>
<li class="pure-menu-separator"></li>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li>
<a href="#">Sub 3</a>
</li>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div id="main">
<div class="header">
<h1>Page Title</h1>
<h2>A subtitle for your page goes here</h2>
</div>
<div class="content">
<h2 class="content-subhead">The Layout</h2>
<p>
This is the basic "Side Bar" page design I want to customize. I got it from the Pure CSS <a href="http://purecss.io/layouts/" target="_blank">Layouts page</a>.
</p>
<!-- Script for adding drop-down. -->
<script>
YUI({
classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {
var horizontalMenu = new Y.Menu({
container : '#menu',
sourceNode : '#menu > .pure-menu > ul',
orientation : 'vertical',
hideOnOutsideClick: false,
hideOnClick : false
});
horizontalMenu.render();
horizontalMenu.show();
});
</script>
<p> </p>
<p> </p>
<p style="color:garnet; font-weight:bold;">I am trying to learn how to add the above submenu functionality to Pure's vertical menu, which displays on the left side of this page.</p>
</div>
</div>
</div>
</body>
<!-- Script to make vertical menu responsive. -->
<script src="http://purecss.io/combo/1.11.5?/js/ui.js"></script>
</html>