个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有一个 href 形式的链接菜单页面。我知道它有一个目标空白，可以在另一个选项卡中打开它，但是有什么方法可以让用户选择一个链接时，该链接将在同一页面中打开并且菜单表单将转换为顶部的简单菜单栏？我是这个领域的新手，仍在努力学习。这可能吗？请帮忙
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<title>DOE Dynamic Dashboard</title>
<link rel = "icon" href = "http://www.iconhot.com/icon/png/free-arrow/256/pie-chart-4.png" type = "image/x-icon">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 20vw;
}
.strips__strip:nth-child(3) {
left: 40vw;
}
.strips__strip:nth-child(4) {
left: 60vw;
}
.strips__strip:nth-child(5) {
left: 80vw;
}
.strips__strip:nth-child(1) .strip__content {
background:#29363B;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #EA495F;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #F4837D;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #FAA664;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #99B998;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
@media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
<!-- content: ""; -->
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
}
@media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 2vw;
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
}
.strip__close--show {
opacity: 1;
}
@keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
body {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 30px;
color: white;
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
a {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
a:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
:root {
--mainColor: white;
}
</style>
<script>
var Expand = (function() {
var tile = $('.strips__strip');
var tileLink = $('.strips__strip > .strip__content');
var tileText = tileLink.find('.strip__inner-text');
var stripClose = $('.strip__close');
var expanded = false;
var open = function() {
var tile = $(this).parent();
if (!expanded) {
tile.addClass('strips__strip--expanded');
// add delay to inner text
tileText.css('transition', 'all .5s .3s cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.addClass('strip__close--show');
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
expanded = true;
}
};
var close = function() {
if (expanded) {
tile.removeClass('strips__strip--expanded');
// remove delay from inner text
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.removeClass('strip__close--show');
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)')
expanded = false;
}
}
var bindActions = function() {
tileLink.on('click', open);
stripClose.on('click', close);
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Expand.init();
</script>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">ONE</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">TWO</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">THREE</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">FOUR</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">FIVE</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
</body>
</html>最佳答案
这可能不是 OP 最初想要的，但您可以在下面通过使用容器找到我的两分钱。除非他点击“链接”(同时隐藏其他链接)，否则我会向他隐藏信息，而不是使用 anchor 来完全重定向用户。
OP 将此标记为 JavaScript，但我看到使用了 Jquery，因此答案包含 Jquery。
对于对细节的关注不足，我提前表示歉意。我在工作，我确实匆忙创建了这个。
//Attach a click event for each of the elements that would act as a link
$("li").each(function(index,el){
el.onclick = function() {
//Upon clicking one of the elements, check ALL the elements once again.
//If the elements are not the one that have been clicked, hide it, otherwise expand it.
$("li").each((indexSec,elSec)=>{
if (el !== elSec) {
elSec.style.height = "0"
} else {
el.style.height = "200px"
}
});
}
})body {
background: white;
}
ul {
display: block;
top:0;
left:0;
width:100vw;
box-sizing: border-box;
padding:0;
margin:0;
position: absolute;
height:75px;
list-style-type: none
}
ul li {
width:100%;
height:50px;
border-bottom: 2px solid black;
transition:.1s;
overflow:hidden;
}
ul li p {
box-sizing: border-box;
margin:0;
position:relative;
height:50px;
text-align:center;
width:100%;
line-height: 50px;
}
ul li:hover {
background: grey;
cursor:pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUl">
<li>
<p class="li-title">One</p>
<p class="li-content">One - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt.</p>
</li>
<li>
<p class="li-title">Two</p>
<p class="li-content">Two - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
<li>
<p class="li-title">Three</p>
<p class="li-content">Three - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
<li>
<p class="li-title">Four</p>
<p class="li-content">Four - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
<li>
<p class="li-title">Five</p>
<p class="li-content">Five - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
</ul>关于javascript - 打开菜单栏html下方的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57036459/
25
4
0
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。 我知道这可以用 JavaScript 来
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。 然而 有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
也许这是一个简单的解决方案，但我坚持了下来。 这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单 我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。 您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。 这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
- SELECT - 上面的显示:none不起作用。我也尝试过“隐藏”，但没有成功。 如何隐藏此选择菜单？ 最佳答案 换行与 或并将 id 添加到标签。 - SELECT
我使用 Jquery 创建菜单，如下所示: homeinfo2info3 Jquery 代码如下: $(document).ready(function(){ $(".prof_info1").unb
我是 C 新手，我需要为项目构建一个带有循环的菜单。我有两个问题。 1) 我想在 else 中添加一个字符，如果在主菜单中按“2”后询问某事，问题将是“你要去参加事件吗？”用户可以输入聊天“Y”或“N
大家好，过去几个小时我一直在为类(class)编写这个程序，但似乎无法解决最后两个问题。它基本上是一个略微修改的 CashRegister 类，通过菜单提供基本功能。我遇到的问题是: 1) 用户第一次
List studentInfo = new LinkedList(); int choice; boolean flag = true; Student student =
我正在使用 bootsrap 4 alpha 6 和 midnight.js 来更改导航菜单切换器的颜色。我想在它旁边插入一个文本(菜单)。捕获中的示例。对于文本切换器，我使用 fontawesome
我正在尝试使用 CSS 菜单解决菜单在 IE 6 中无法正确显示的问题 alt text http://content.screencast.com/users/Dokmanc/folders/Jin
我无法让这段代码工作 - 我想要的是当我将鼠标悬停在圆圈上时，菜单会出现，然后如果我将鼠标从圆圈或菜单上移开，它就会消失。我尝试做的任何事情都是非常错误的，例如 onmouseover 在圆圈上然后在
我有一个典型的 CSS 顶部导航，当您滑过不同的父菜单项时，它会显示一个子菜单。如何更改代码以保持显示事件子菜单。因此，如果您在该父菜单项或其子项之一的页面上，它将保持显示该子菜单，除非您将鼠标悬停在
我很亲近。我怎样才能在我的 上有 MENU 1。 fiddle显示为默认菜单选项，然后在 MENU 2 悬停时更改？ 提前致谢。继续编码! :) 最佳答案 要根据您的响应完全远离 jquery 进行编
我是一名优秀的程序员,十分优秀！