Jump to content

Left

Members
  • Posts

    8
  • Joined

  • Last visited

Left's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Left

    Links inside :after CSS

    @dsonesuk Thank you for the code sample, that really help me get to where I wanted to go!
  2. Left

    Links inside :after CSS

    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; }
  3. Left

    Links inside :after CSS

    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>
  4. Left

    Links inside :after CSS

    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;}
  5. Left

    Links inside :after CSS

    Thank you, Now I get what you were saying. However I am not familiar with setting <a> to "block" Where is this done?
  6. Left

    Links inside :after CSS

    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.
  7. 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>
×
×
  • Create New...