Today, I would like to share with you how to make a Breadcrumbs. Breadcrumbs show the hierarchy of content between the site's root and the user's current location.
Created
May 3, 2023 01:22
-
-
Save w3tweaks/ea0130e6a2dd15018295d90778581a63 to your computer and use it in GitHub Desktop.
Cutup #6 Breadcrumbs
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
| <body> | |
| <h5>Cutup #6</h5> | |
| <h1>Breadcrumbs</h1> | |
| <p class="title-definiton">Showing the hierarchy of content between the site's root and the user's current location.</p> | |
| <nav> <!--To provide navigation links--> | |
| <ol class="breadcrumb " itemscope itemtype="http://schema.org/BreadcrumbList"> | |
| <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> | |
| <a itemprop="item" href="#"> | |
| <span itemprop="name">Home</span> | |
| </a> | |
| <meta itemprop="position" content="1" /> | |
| </li> | |
| <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> | |
| <a itemprop="item" href="#"> | |
| <span itemprop="name">Level 1</span> | |
| </a> | |
| <meta itemprop="position" content="2" /> | |
| </li> | |
| <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> | |
| <a itemprop="item" href="#"> | |
| <span itemprop="name">Level 2</span> | |
| </a> | |
| <meta itemprop="position" content="3" /> | |
| </li> | |
| <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> | |
| <a itemprop="item" href="#"> | |
| <span itemprop="name">Current Location</span> | |
| </a> | |
| <meta itemprop="position" content="4" /> | |
| </li> | |
| </ol> | |
| </nav> | |
| <br> <br> | |
| </body> | |
| <footer> | |
| <div class="footer"> | |
| <h5>Please check this article.</h5> | |
| <a class="c-btn" href="https://medium.com/@nana8/69de0d1ad00" target="_black">Go to the Medium</a> | |
| </div> | |
| </footer> |
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
| // Global | |
| body { | |
| background: #c7ffd3; | |
| font-family: Roboto Mono; | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: #666; | |
| width: 700px; | |
| margin: 0 auto; | |
| } | |
| .title-definiton { | |
| width: 500px; | |
| margin-bottom: 30px; | |
| } | |
| .breadcrumb { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| li { | |
| display: inline-block; | |
| position: relative; | |
| // Last child | |
| &:last-child { | |
| a { | |
| cursor: default; | |
| } | |
| &::before, | |
| &::after { | |
| background: #ffffc0; | |
| } | |
| } | |
| // :Hover | |
| &:not(:last-child):hover { | |
| &::before, | |
| &::after { | |
| background: lightsalmon; | |
| } | |
| } | |
| &::before, | |
| &::after{ | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| height: 50%; | |
| width: 100%; | |
| background: white; | |
| border-left: 2px solid #666; | |
| border-right: 2px solid #666; | |
| z-index: -2; | |
| } | |
| &::before { | |
| top: -2px; | |
| transform: skew(30deg); | |
| border-top: 2px solid #666; | |
| } | |
| &::after { | |
| bottom: -2px; | |
| transform: skew(-30deg); | |
| border-bottom: 2px solid #666; | |
| } | |
| } | |
| a { | |
| display: inline-block; | |
| position: relative; | |
| line-height: 2.5; | |
| padding: 0 20px; | |
| color: #666; | |
| text-decoration: none; | |
| } | |
| li { | |
| &:first-child { | |
| background-color: white; | |
| border-left: 2px solid #666; | |
| left: -5px; | |
| box-sizing: content-box; | |
| &:hover { | |
| background-color: lightsalmon; | |
| } | |
| &::before, | |
| &::after { | |
| left: 5px; | |
| } | |
| } | |
| } | |
| //Footer | |
| .footer { | |
| margin: 100px 0; | |
| } | |
| //button default style | |
| .c-btn { | |
| text-decoration: none; | |
| padding: 0 18px; | |
| border: 2px solid #666; | |
| border-radius: 5px; | |
| color: #666; | |
| transition: all 0.3s ease-in-out; | |
| &:hover { | |
| background-color: lightsalmon; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment