纯CSS/YUI垂直多级菜单
我正在尝试使用纯CSS框架进行响应性布局。 我喜欢他们的垂直菜单，但我不知道如何添加下拉（折叠）子菜单 我甚至无法在他们的网站上使用水平菜单示例： 垂直菜单是我在项目中采用Pure的主要原因，现在我被卡住了 根据Matthew的要求，这里是html页面的代码。包括所有代码和链接，因此您可以将其加载到浏览器中，以便快速理解纯CSS/YUI垂直多级菜单,yui,yui-pure-css,Yui,Yui Pure Css,我正在尝试使用纯CSS框架进行响应性布局。 我喜欢他们的垂直菜单，但我不知道如何添加下拉（折叠）子菜单 我甚至无法在他们的网站上使用水平菜单示例： 垂直菜单是我在项目中采用Pure的主要原因，现在我被卡住了 根据Matthew的要求，这里是html页面的代码。包括所有代码和链接，因此您可以将其加载到浏览器中，以便快速理解 页面标题 您页面的副标题显示在此处 布局 这是我想要定制的基本“侧栏”页面设计。我是从纯CSS得到的。 水平菜单示例 以下是将下拉菜单添加到水平菜单的示例
-
页面标题
您页面的副标题显示在此处
布局
这是我想要定制的基本“侧栏”页面设计。我是从纯CSS得到的。
水平菜单示例
以下是将下拉菜单添加到水平菜单的示例：
-
- 来自雅虎的更多信息
-
尤伊({
classNamePrefix:'纯'
}).使用（'gallery-sm-menu'，功能（Y）{
变量水平菜单=新Y.菜单({
容器：“#演示水平菜单”，
sourceNode:“#标准菜单项”，
方向：“水平”，
hideOnOutsideClick:false，
hideOnClick:false
});
水平菜单。渲染（）；
horizontalMenu.show（）；
});
我正在尝试学习如何将上述子菜单功能添加到Pure的垂直菜单中，该菜单显示在本页左侧
身体{
颜色：#777；
}
.纯img响应{
最大宽度：100%；
高度：自动；
}
/*
将过渡添加到容器中，以便它们可以推入和移出。
*/
#布局，
#菜单，
.菜单链接{
-webkit过渡：所有0.2秒都可以轻松过渡；
-moz转换：所有0.2秒都放松；
-ms转换：所有0.2秒缓解；
-o型过渡：所有0.2秒缓解；
过渡：所有0.2秒缓解；
}
/*
这是包含菜单和内容区域的父级“”。
*/
#布局{
位置：相对位置；
左侧填充：0；
}
#layout.active{
位置：相对位置；
左：150px；
}
#layout.active#菜单{
左：150px；
宽度：150px；
}
#layout.active.菜单链接{
左：150px；
}
/*
“内容”是所有内容的所在。
*/
.内容{
保证金：0自动；
填充：0.2em；
最大宽度：800px；
边缘底部：50px；
线高：1.6em；
}
.标题{
保证金：0；
颜色：#333；
文本对齐：居中；
填充物：2.5em2em0；
边框底部：1px实心#eee；
}
.标题h1{
边际：0.2米0；
字号：3em；
字体大小：300；
}
.标题h2{
字体大小：300；
颜色：#ccc；
填充：0；
边际上限：0；
}
.内容分目{
利润率：50px 0 20px 0；
字体大小：300；
颜色：#888；
}
/*
“菜单”是包含“纯菜单”的父级
显示在页面的左侧。
*/
#菜单{
左边距：-150px；/*“#菜单”宽度*/
宽度：150px；
位置：固定；
排名：0；
左：0；
底部：0；
z-index:1000；/*因此菜单或其navicon保持在所有内容之上*/
背景：191818；
-webkit溢出滚动：触摸；
}
/*
菜单中的所有锚点都应该这样设计。
*/
#菜单a{
颜色：#999；
边界：无；
填充：0.6em 0.6em 0.6em；
}
/*
删除所有背景/边框，因为我们将它们应用于#菜单。
*/
#菜单，纯菜单，
#菜单，纯菜单{
边界：无；
背景：透明；
}
/*
添加该光边框以将项目分成多个组。
*/
#菜单，纯菜单ul，
#菜单。纯菜单。菜单项被分割{
边框顶部：1px实心#333；
}
/*
更改悬停/焦点上锚定链接的颜色。
*/
#菜单。纯菜单李a：悬停，
#菜单。纯菜单李a：焦点{
背景：#333；
}
/*
这将设置所选菜单项“”的样式。
*/
#菜单。选择纯菜单，
#菜单，纯菜单标题{
背景#1f8dd6；
}
/*
这将设置选定菜单项“ ”内链接的样式。
*/
#菜单。选择一个纯菜单{
颜色：#fff；
}
/*
这将设置菜单标题的样式。
*/
#菜单，纯菜单标题{
字体大小：110%；
颜色：#fff；
保证金：0；
}
#菜单，纯菜单儿童{
背景：191818；
}
/*--响应菜单的动态按钮-------------------------------------*/
/*
打开/关闭菜单的按钮是定制的，不是纯功能的一部分。这是
工作原理：
*/
/*
`.menu link`表示打开/隐藏的响应菜单切换
小屏幕。
*/
.菜单链接{
销售时点情报系统
<!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>
<!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>