It's a full-page nav because there's too many damn links.
Created
January 29, 2020 23:27
-
-
Save CodeMyUI/a0ebdf3f8a60bf8e5d90dc3d14213203 to your computer and use it in GitHub Desktop.
E-Commerce Navigation Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment