Utilizing the CSS triangle trick and some nice hover transitions creates a cool little breadcrumb menu.
A Pen by Sumer Mixon on CodePen.
Created
October 17, 2016 11:29
-
-
Save o-l-e/c37d16cd874e1b5b73cbb26801a35fda to your computer and use it in GitHub Desktop.
Pure CSS Animated Breadcrumb
This file contains hidden or 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 class="breadcrumb"> | |
| <ul> | |
| <li> | |
| <div class="arrow-end"></div> | |
| <div class="content home"><a href="#">Home</a></div> | |
| <div class="arrow-right"></div> | |
| </li> | |
| <li> | |
| <div class="arrow-end"></div> | |
| <div class="content"><a href="#">Level One</a></div> | |
| <div class="arrow-right"></div> | |
| </li> | |
| <li> | |
| <div class="arrow-end"></div> | |
| <div class="content"><a href="#">Level Two</a></div> | |
| <div class="arrow-right"></div> | |
| </li> | |
| </ul> | |
| </nav> |
This file contains hidden or 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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or 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
| $color-text: #FFFFFF; | |
| $color-text-hover: #F2CB05; | |
| $color-background: #2795B6; | |
| $color-background-hover: #04B2D9; | |
| $size-box: 20px; // use an even number or things get ugly | |
| $size-font: 15px; | |
| a { | |
| font-family: sans-serif; | |
| line-height: $size-box; | |
| font-size: $size-font; | |
| text-decoration: none; | |
| color: $color-text; | |
| transition: color .5s; | |
| } | |
| li { | |
| list-style-type: none; | |
| float: left; | |
| } | |
| .arrow-end, .content, .arrow-right { | |
| float: left; | |
| } | |
| .content { | |
| background-color: $color-background; | |
| padding-right: $size-box; | |
| padding-left: $size-box/2; | |
| transition: | |
| padding-right .5s, | |
| padding-left .5s, | |
| color .5s; | |
| } | |
| .home { | |
| // line to far left | |
| box-sizing: content-box; | |
| margin-left: -9999px; | |
| border-left: 9999px solid $color-background; | |
| } | |
| .arrow-right { | |
| width: 0; | |
| height: 0; | |
| border-top: $size-box/2 solid transparent; | |
| border-bottom: $size-box/2 solid transparent; | |
| border-left: $size-box/2 solid $color-background; | |
| } | |
| .arrow-end { | |
| width: 0; | |
| height: 0; | |
| border-top: $size-box/2 solid $color-background; | |
| border-right: $size-box/2 solid $color-background; | |
| border-bottom: $size-box/2 solid $color-background; | |
| border-left: $size-box/2 solid transparent; | |
| } | |
| .breadcrumb { | |
| transition: | |
| padding-right .5s, | |
| padding-left .5s, | |
| color .5s; | |
| ul { | |
| li{ | |
| &:hover{ | |
| .content { | |
| background-color: $color-background-hover; | |
| padding-right: $size-box*2; | |
| padding-left: $size-box*1.5; | |
| a { | |
| color: $color-text-hover; | |
| } | |
| } | |
| .home { | |
| border-left-color: $color-background-hover; | |
| } | |
| .arrow-end { | |
| border-top-color: $color-background-hover; | |
| border-right-color: $color-background-hover; | |
| border-bottom-color: $color-background-hover; | |
| } | |
| .arrow-right { | |
| border-left-color: $color-background-hover; | |
| } | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment