nav.nav
.nav__elements
.nav__logo
span s
span y
span w
span r
span .
ul.nav__groups
li.nav__group
a.nav__group__link Furniture
ul.nav__group__dropdown
.multi-column
ul.product-list.multi(data-type="table")
li.product-list__title.title To Work On
li.product-list__link
a Writing desks
li.product-list__link
a Hipster desks
li.product-list__link
a Corner desks
li.product-list__link
a Floating desks
li.product-list__link
a Executive desks
li.product-list__link
a Gaming desks
li.product-list__link
a Console tables
li.product-list__link
a Standing desks
li.product-list__link
a Laptop stands
li.product-list__link
a Accent tables
ul.product-list.multi(data-type="chair")
li.product-list__title.title To Sit On
li.product-list__link
a Ergonomic chairs
li.product-list__link
a Swivel chairs
li.product-list__link
a Armchairs
li.product-list__link
a Kneeling chairs
li.product-list__link
a Chaise lounges
li.product-list__link
a Fabric sofas
li.product-list__link
a Sofa beds
li.product-list__link
a Bouncing balls
li.product-list__link
a Beanbags
ul.product-list.multi(data-type="support")
li.product-list__title.title Physical (& Emotional) Support
li.product-list__link
a Footstools
li.product-list__link
a Ottomans
li.product-list__link
a Coffee tables
li.product-list__link
a Shelving Units
li.product-list__link
a Bookcases
li.product-list__link
a Pool tables
li.product-list__link
a Mini bars
ul.article-list
li.article-list__title.title For Your Inspiration
li.article-list__link
a Are You Really A Millenial If You't Shop At Ikea?
li.article-list__link
a The Latest Trend: Purchasing Tables from Hipster Cafes
li.article-list__link
a 15 Uncomfortable but Instagram-Worthy Chairs For Your Home Office
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-table.jpg" data-match="table")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-chair.jpg" data-match="chair")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-support.jpg" data-match="support")
li.nav__group
a.nav__group__link Deco
ul.nav__group__dropdown
.multi-column
ul.product-list(data-type="floor")
li.product-list__title.title Floor Covers
li.product-list__link
a Area rugs
li.product-list__link
a Door mats
li.product-list__link
a Hallway runners
li.product-list__link
a Fake grass
ul.product-list(data-type="wall")
li.product-list__title.title Wall Covers
li.product-list__link
a Wall art
li.product-list__link
a #basic quotes
li.product-list__link
a Nature wallpapers
li.product-list__link
a Memo boards
li.product-list__link
a Chalk boards
ul.product-list(data-type="window")
li.product-list__title.title Window Capes
li.product-list__link
a Curtains
li.product-list__link
a Tapestries
li.product-list__link
a Hanging flowers
li.product-list__link
a Herb gardens
ul.product-list(data-type="cool")
li.product-list__title.title It Just Looks Cool
li.product-list__link
a Teepees
li.product-list__link
a Faerie lights
li.product-list__link
a Easels
li.product-list__link
a Vintage bicycles
ul.article-list
li.article-list__title.title For Your Inspiration
li.article-list__link
a Do the Eat, Pray, Love: Fake Grass For Your Office
li.article-list__link
a Do You Really Work Better When You're Stepping On A White, Fluffy Rug?
li.article-list__link
a Yoga Mats: An Exercise Tool and An Office Rug? Win!
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-floor.jpg" data-match="floor")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-wall.jpg" data-match="wall")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-window.jpg" data-match="window")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-cool.jpg" data-match="cool")
li.nav__group
a.nav__group__link Work Friends
ul.nav__group__dropdown
.multi-column
ul.product-list(data-type="plant")
li.product-list__title.title Plants
li.product-list__link
a Succulents
li.product-list__link
a Large plants
li.product-list__link
a Lucky charm plants
li.product-list__link
a Solar-powered plants
li.product-list__link
a Crochet succulents
ul.product-list(data-type="buddy")
li.product-list__title.title Buddies
li.product-list__link
a Giant plush toys
li.product-list__link
a Celebrity cutouts
li.product-list__link
a Mirrors
ul.product-list(data-type="items")
li.product-list__title.title For The Table
li.product-list__link
a Origami
li.product-list__link
a Figurines
li.product-list__link
a Candles
li.product-list__link
a Pixar lamps
ul.product-list(data-type="pets")
li.product-list__title.title For The Pets
li.product-list__link
a Pet beds
li.product-list__link
a Pet houses
li.product-list__link
a Cat trees & condos
li.product-list__link
a Bunny hutches
ul.article-list
li.article-list__title.title For Your Inspiration
li.article-list__link
a Why Pets Make The Best Colleagues Ever! (They Don't Talk, That's Why)
li.article-list__link
a Your Succulent Plants Die Too Easily? Try Crochet Plants Instead
li.article-list__link
a [Quiz] Which Eeveevolution Is Your Work Soulmate?
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-plant.jpg" data-match="plant")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-buddy.jpg" data-match="buddy")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-items.jpg" data-match="items")
img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-pets.jpg" data-match="pets")
.nav__cart CART
View Compiled
body {
background: #f4f6f3;
font-family: 'Ibarra Real Nova', sans-serif;
line-height: 1.4;
}
* {
box-sizing: border-box;
}
a {
color: #767A7F;
}
@keyframes bounce {
0% { transform: translateY(0px)}
50% { transform: translateY(-6px)}
}
.nav {
background: #fff;
display: block;
left: 0;
position: fixed;
top: 0;
width: 95%;
position: relative;
margin: 2rem auto;
font-size: 1.2rem;
box-shadow: -2px 4px 12px rgb(237, 237, 237);
background: #292F36;
max-width: 1400px;
a {
cursor: pointer;
padding: 1.5rem 2rem;
display: inline-block;
}
&__logo {
color: #B1B3B5;
font-size: 1.8rem;
align-self: center;
padding: .5rem 1.2rem .8rem;
cursor: pointer;
white-space: nowrap;
span {
display: inline-block;
transform: translateY(0);
}
&:hover {
span {
animation: .4s bounce ease-in-out;
&:nth-child(2) {
animation-delay: .1s;
}
&:nth-child(3) {
animation-delay: .2s;
}
&:nth-child(4) {
animation-delay: .3s;
}
&:nth-child(5) {
animation-delay: .4s;
}
}
&:before {
transform: translateY(0);
transition: .3s ease .5s;
}
}
&:before {
content: "So You Work Remotely. Home office furniture and decoration items you can show off on Instagram.";
position: absolute;
top: 100%;
left: 0;
padding: 1.2rem;
background: #fff;
font-size: 1.1rem;
width: calc(100% - 2.4rem);
transform: translateY(-100%);
z-index: -1;
color: #292F36;
}
}
&__elements {
display: flex;
}
&__cart {
display: inline-block;
font: 700 1.1rem Oswald;
letter-spacing: .02rem;
text-transform: uppercase;
color: #f9f9f9;
padding: 1.2rem;
align-self: center;
}
&__groups {
display: flex;
justify-content: center;
width: 100%;
}
&__group {
z-index: 2;
> a {
display: block;
font: 700 1.1rem Oswald;
letter-spacing: .02rem;
text-transform: uppercase;
color: #fff;
}
&:first-child > a {
padding-left: 6rem;
}
&:last-child > a {
padding-right: 6rem;
}
&__dropdown {
position: absolute;
top: 100%;
visibility: hidden;
display: none;
opacity: 0;
min-width: 450px;
left: 0;
padding: 1.5rem 2.5rem 2.5rem;
background: #fff;
transition: opacity 1.3s ease-in-out .3s, visibility 1s ease-out;
text-align: left;
width: 100%;
}
}
}
.product-list {
flex: 1;
min-width: 15rem;
padding-right: 1rem;
a {
padding: .5rem 0;
transition: .2s ease;
position: relative;
z-index: 2;
&:before {
content: '';
left: 0;
top: 85%;
width: 0;
transition: width .3s ease;
height: 3px;
position: absolute;
background: #292F36;
}
&:hover {
color: #292F36;
&:before {
width: 30px;
}
}
}
&__link {
padding-right: .5rem;
}
&__title {
width: 100%;
}
&.multi {
display: flex;
flex-wrap: wrap;
.product-list__link {
flex: 1 1 50%;
}
}
}
.title {
margin: 1.2rem 0 0.8rem;
text-transform: uppercase;
font: 700 1.1rem Oswald;
letter-spacing: .02rem;
}
.multi-column {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.article-list {
width: 100%;
padding-right: 30%;
display: flex;
flex-wrap: wrap;
margin-top: 1.3rem;
&__title {
width: 100%;
}
&__link {
flex: 1;
min-width: 11rem;
margin-right: 2rem;
position: relative;
transition: transform .3s ease;
&:before {
content: '';
width: 3.5px;
height: 0;
background: #292F36;
transition: height .3s ease;
position: absolute;
top: .8rem;
left: -.9rem;
}
&:hover {
transform: translateX(10px);
a {
color: #292F36;
}
&:before {
height: 30px;
}
}
}
a {
padding: .4rem 0;
}
}
//hovering
.nav__group {
a:hover + .nav__group__dropdown,
.nav__group__dropdown:hover,
li:hover > .nav__group__dropdown {
display: block;
opacity: 1;
visibility: visible;
}
}
.product-image {
position: absolute;
max-width: 33%;
height: 250px;
object-fit: contain;
object-position: bottom right;
bottom: 0;
right: 0;
transition: 1.3s ease;
opacity: 0;
z-index: 1;
&[data-match="table"], &[data-match="floor"], &[data-match="plant"] {
opacity: 1;
}
}
.product-list {
&[data-type="chair"]:hover ~ .product-image[data-match="chair"] {
opacity: 1;
}
&[data-type="support"]:hover ~ .product-image[data-match="support"] {
opacity: 1;
}
&[data-type="chair"]:hover ~ .product-image[data-match="chair"] {
opacity: 1;
}
&[data-type="wall"]:hover ~ .product-image[data-match="wall"] {
opacity: 1;
}
&[data-type="window"]:hover ~ .product-image[data-match="window"] {
opacity: 1;
}
&[data-type="cool"]:hover ~ .product-image[data-match="cool"] {
opacity: 1;
}
&[data-type="buddy"]:hover ~ .product-image[data-match="buddy"] {
opacity: 1;
}
&[data-type="items"]:hover ~ .product-image[data-match="items"] {
opacity: 1;
}
&[data-type="pets"]:hover ~ .product-image[data-match="pets"] {
opacity: 1;
}
}
View Compiled
