stackoom
  简体   繁体   中英

Open link below menu bar html

 原文  2019-07-15 09:05:20  8   2    javascript/ html/ css

Question

I have a menu page for links which are in a href form. I know it has a target blank which opens it in another tab but is there any way that whenever the user choose a link, the link will open in the same page and the menu form will be transformed into a simple menu bar at the top? I am new to this field and still trying to learn. Is this possible? please help 

 <!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>

2 answers

solution1
 1  2019-07-15 10:06:35

This might not be what the OP initially wanted but below you can find my two cents on this by using containers. Instead of having an anchor to redirect the user altogether, I would hide the info away from him unless he clicked on the 'link' (while hiding the others).

OP tagged this as JavaScript but I saw Jquery was used thus the answer contains Jquery.

I apologize in advance for poor attention to details. I'm at work and I did create this in a rush. 

 //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>

solution2
 0  2019-07-15 09:27:42

To achieve this and open links from the menu bar on the same page as opposed to a new page, you will need to remove target="_blank" from your navigation links.

Updated Code: 

<section class="strips">
 <article class="strips__strip">
  <div class="strip__content">
   <a href="#" class="strip__title">ONE</a>
  </div>
 </article>

 <article class="strips__strip">
  <div class="strip__content">
   <a href="#" class="strip__title">TWO</a>
  </div>
 </article>

 <article class="strips__strip">
  <div class="strip__content">
   <a href="#" class="strip__title">THREE</a>
  </div>
 </article>

 <article class="strips__strip">
  <div class="strip__content">
   <a href="#" class="strip__title">FOUR</a>
  </div>
 </article>

 <article class="strips__strip">
  <div class="strip__content">
   <a href="#" class="strip__title">FIVE</a>
  </div>
 </article>
 <i class="fa fa-close strip__close"></i>
</section>

As you'll be opening the nav links on the same page, you'll want to add the navigation bar code to the webpage you're clicking to. This will ensure the navigation bar is transformed back to it's original state.

Eg - if you're clicking to a webpage named test.html , you will initially need to update the href within your anchor links to be href="test.html" . Thereafter you will create a new file named test.html and add the navigation bar code to that page also.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Progress bar below menu for each link menu bar in mobile doesn't open on top it goes below content I need help to open menu on click on a href link in html? How to get a bar to appear below a link? YUI Menu rendering below “fold” on first open Submiting a form to the destination of a side-bar menu link (javascript / php / html form) how to open html file without menu bar using vb.net window application How to show Topaz signature below menu in HTML? highlight currently selected link in css menu bar HREF link individual tab on menu bar?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM