Left Posted January 10, 2018 Share Posted January 10, 2018 I have been struggling to figure out how to and a link on a rotating block menu. Nothing I seem to do creates the desired effect.... HELP! I'm pulling my hair out on this one. I want to make the content Labels links. CSS: *,*:before,*:after { box-sizing: border-box; } :after { content: ""; link: ""; } nav { float: left; position: relative; top: 13px; left: -13px; background: transparent; } nav ul { text-align: center; } nav ul li { position: relative; width: 69px; cursor: pointer; background: crimson; color: white; text-transform: uppercase; transition:all .5s ease-out; } nav ul li:after { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } nav ul li div { position: relative; } MENU HTML: <section id="menu"> <nav class="navbar-fixed-top"> <ul> <li> <div style="font-size: 1.25rem;" class="icon-notebook"></div> </li> <li> <div style="font-size: 1rem;" class="socicon socicon-play"></div> </li> <li> <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div> </li> <li> <div style="font-size: 1.25rem;" class="icon-global"><div class="nav ul li"></div> </li> </ul> </nav> </section> Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2018 Share Posted January 10, 2018 There is no CSS "link" property. If you want a link you must use the <a> tag in HTML. You should not be using CSS to add content to the page, CSS is only for changing the appearance of the content. Put the text and links in the HTML. Link to comment Share on other sites More sharing options...
Left Posted January 10, 2018 Author Share Posted January 10, 2018 I have the CSS link property, just didn't copy it here. Yes I thought of that and tried that, but that results in the icon and the label being on the same side of the cube. Then when you hover over the link is no longer shown. The idea here is for the front of the cube to have the icon, and the side to have the linked label. Link to comment Share on other sites More sharing options...
Left Posted January 10, 2018 Author Share Posted January 10, 2018 Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2018 Share Posted January 10, 2018 What I was saying is that there is no such thing as a "link" property in CSS. Change your structure to be like this: <li> <a href="#"> <div style="font-size: 1.25rem;" class="icon-notebook"></div> <span class="label">BIO</span> </a> </li> Then change the selectors, replacing references to nav ul li with nav ul li a and replacing nav ul li:after with nav ul li .label. Be sure to set the display of the <a> element to "block" Link to comment Share on other sites More sharing options...
Left Posted January 10, 2018 Author Share Posted January 10, 2018 Thank you, Now I get what you were saying. However I am not familiar with setting <a> to "block" Where is this done? Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2018 Share Posted January 10, 2018 The <a> element is by default an inline element, you need it to be a block to be styled correctly. Read about inline and block elements here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes Link to comment Share on other sites More sharing options...
Left Posted January 10, 2018 Author Share Posted January 10, 2018 (edited) Ok, I tried adding a "block" value in CSS like this: a {display: block;} Also tried inserting it into like this: nav ul li a { display: block; position: relative; width: 69px; cursor: pointer; background: crimson; color: white; text-transform: uppercase; transition:all .5s ease-out; } also: .block {display: block;} Edited January 10, 2018 by Left Link to comment Share on other sites More sharing options...
Left Posted January 10, 2018 Author Share Posted January 10, 2018 So my code now looks like this and the lay-out is completely messed up.... *,*:before,*:after { box-sizing: border-box; } } nav { float: left; position: relative; top: 13px; left: -13px; background: transparent; } nav ul { text-align: center; } nav ul li a { display: block; position: relative; width: 69px; cursor: pointer; background: crimson; color: white; text-transform: uppercase; transition:all .5s ease-out; } nav ul li.label { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } nav ul li div { position: relative; } html: <section id="menu"> <nav class="navbar-fixed-top"> <ul> <li> <a class="block" href="bio.html"> <div style="font-size: 1.25rem;" class="icon-notebook"></div> <span class="label">BIO</span> </a> </li> <li> <a class="block" href="disc.html"> <div style="font-size: 1rem;" class="socicon socicon-play"></div> <span class="label">DISC</span> </a> </li> <li> <a class="block" href="video.html"> <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div> <span class="label">Video</span> </a> </li> <li> <a class="block" href="past.html"> <div style="font-size: 1.25rem;" class="icon-global"></div> <span class="label">Shows</span> </a> </li> </ul> </nav> </section> Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2018 Share Posted January 10, 2018 These rules need to be removed: nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } There should be a space between "li" and ".label" here: nav ul li.label { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } These selectors need to be changed to take the new <a> element into account: nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } Do you understand the concept of what is trying to be done here? The structure we're working with is very simple: One <a> element, with a <div> and a <span> as children. The list surrounding it is not important. Link to comment Share on other sites More sharing options...
Left Posted January 10, 2018 Author Share Posted January 10, 2018 I am new to CSS but I do think I am following. Thank you for your time a patients. So including the <a> element would look like this: nav ul li a:hover { transform: translateX(-69px); } nav ul li a:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li a > div { display: inline-block; padding: 24px 0; background: transparent; } Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2018 Share Posted January 10, 2018 The :after pseudo-element has been replaced with the <span> element, so you will not need it anymore. Put all the properties from your :after selector on the .label element instead. This is more advanced CSS, if you're new to CSS you probably should get more familiar with regular CSS before moving on to things like this. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2018 Share Posted January 11, 2018 To have the content: property work as a link it has to be placed within anchor link, most :hover :after should be transferred to this anchor element from li element see https://codepen.io/anon/pen/RxyPJE Link to comment Share on other sites More sharing options...
Left Posted January 19, 2018 Author Share Posted January 19, 2018 @dsonesuk Thank you for the code sample, that really help me get to where I wanted to go! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now