大屏幕上不显示菜单项 (pure.css)
Menu items don't show on large screens (pure.css)
这是 pure.css 框架 (https://purecss.io/)。我正在尝试从他们的示例中复制菜单。
文档(和一个工作示例):https://purecss.io/layouts/tucked-menu-vertical/
html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/custom.css">
<title>Hello, world!</title>
</head>
<body>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a href="#" class="pure-menu-heading custom-brand">Brand</a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<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">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="src/js/main.js"></script>
</body>
</html>
css
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
/*# sourceMappingURL=custom.css.map */
JS
(function (window, document) {
var menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
rollBack = setTimeout(toggleHorizontal, 500);
}
else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
代码笔:https://codepen.io/Kifsif/pen/xxwMQpd
问题是大屏幕上的菜单项没有显示。
从自定义包装器 class 中删除 overflow: hidden;
属性,它将显示。虽然我不确定大屏幕上的菜单是否定位正确,但这是另一个问题。
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
这是 pure.css 框架 (https://purecss.io/)。我正在尝试从他们的示例中复制菜单。
文档(和一个工作示例):https://purecss.io/layouts/tucked-menu-vertical/
html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/custom.css">
<title>Hello, world!</title>
</head>
<body>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a href="#" class="pure-menu-heading custom-brand">Brand</a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<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">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="src/js/main.js"></script>
</body>
</html>
css
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
/*# sourceMappingURL=custom.css.map */
JS
(function (window, document) {
var menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
rollBack = setTimeout(toggleHorizontal, 500);
}
else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
代码笔:https://codepen.io/Kifsif/pen/xxwMQpd
问题是大屏幕上的菜单项没有显示。
从自定义包装器 class 中删除 overflow: hidden;
属性,它将显示。虽然我不确定大屏幕上的菜单是否定位正确,但这是另一个问题。
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}