Codecademy front-end engineer course
DAY17
- Secondary navigation
- About the Secondary Navigation
1) What is Secondary Navigation?
| Primary navigation | contains the most important links and buttons that need to be displayed on every single page of the site. |
| Secondary navigation | consists of a clickable list of pages or attributes that led to the current page. It can help users understand the extent of the site and also where they are currently. |
2) Why do we call them breadcrumbs?
Think about the story of Hansel and Gretel, where the kids drop breadcrumbs as they walked in the woods so that they would be able to find their way back.
3) Benefit of using breadcrumbs
- Even if they enter to a seemingly random page on our site, they already have an idea of where they are in the website.
- The breadcrumb also hints at the extent of the site.
- Breadcrumbs also provide a way for a user to quickly jump backward in their navigation of the site.
*The decision to use breadcrumbs is a judgment call depending on the type, depth, and complexity of your site
- Simple Example of Breadcrumbs [브레드크럼의 예시]
* Breadcrumbs are usually displayed as a horizontal list of pages and take up minimal space.
*Users expect to find them in the header, left-aligned, and below any primary navigation.
*Typically they are separated with a “>” or a “/“ symbol.
.breadcrumb > li {
display:inline; /*displayed next to each other, on the same line*/
}
.breadcrumb li+li::before {
padding: 10px;
content:">"; /*content property to “>” to place the greater than sign between each adjacent breadcrumb.*/
}
.breadcrumb a {
text-decoration:none; /*breadcrumbs is that they are often not underlined.*/
}
.breadcrumb a:hover {
color:red;
}
- Where do Breadcrumbs Lead
if you clicked on any of the breadcrumbs, it wouldn’t take you to a new page.
This is because we have set href="#".
Since breadcrumbs are typically relative to the current page, the breadcrumb list on each page needs to be different.
However, they should expect the breadcrumb style and list to stay consistent.
1) 첫번째 전체 단계 (brownshoes.html)
- shoes -> shoes.html
- flats -> flats.html
- brown -> leave this as '#' since we are already on that page
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="./styles.css">
<h1> Brown Shoes </h1>
<ul class="breadcrumb">
<li>
<a href="shoes.html">Shoes</a>
</li>
<li>
<a href="flats.html">Flats</a>
</li>
<li>
<a href="#">Brown</a>
</li>
</ul>
</html>
2) 중간적 단계 (flats.html)
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="./styles.css">
<h1>Flats</h1>
<ul class="breadcrumb">
<li>
<a href="shoes.html">Shoes</a>
</li>
<li>
<a href="#">Flats</a>
</li>
</ul>
</html>
3) 마지막단계이자 시작점인 단계 (shoes.html)
- Since “shoes” is the starting breadcrumb, this page will only have one breadcrumb that links to this page ('#').
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="./styles.css">
<h1>Shoes</h1>
<ul class="breadcrumb">
<li><a href="#">Shoes</a></li>
</ul>
</html>
- Breadcrumb Styles [브레트크럼 스타일]
The example below makes use of a couple of CSS tricks to create an arrow effect.
We’re using the ::before and ::after pseudo-elements(가상요소) to add filled rectangles (with empty content) before and after each list item:
.breadcrumb li a::before, .breadcrumb li a::after {
content: "";
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}By setting a portion of the border to transparent, it creates the “tail” of the arrow:
.breadcrumb li a::before {
left: -10px;
border-left-color: transparent;
}
**예시 코드
/*we create the before and after pseudo-elements.*/
.breadcrumb a::before,
.breadcrumb a::after {
content: "";
position: absolute;
border-color: darkcyan;
border-style: solid;
border-width: 15px 5px;
}
/*The total width of our pseudo-elements is 10px, since the border has 5px on the left and 5px on the right.
Given this, move the pseudo-elements to the proper location*/
.breadcrumb a::before {
left: -10px;
/*Style the before elements as “tails”*/
border-left-color: transparent;
}
.breadcrumb a::after {
left: 100%;
/*the CSS trick to turn these into arrows*/
border-color: transparent;
border-left-color: darkcyan;
}
/*lets add a hover state*/
.breadcrumb a:hover {
background-color: blue;
}
.breadcrumb a:hover::before {
border-color: blue;
border-left-color: transparent;
}
.breadcrumb a:hover::after {
border-left-color: blue;
}
.breadcrumb {
text-align: left;
}
/*the “body” of the arrows.*/
.breadcrumb li {
float:left;
}
.breadcrumb a {
color: #fff;
background: darkcyan;
text-decoration: none;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 15px;
padding: 0 5px;
}
- Breadcrumb Types [브레드크럼의 유형]
| Location [hierarchical structure of site] 로케이션 | based on where you are with respect to the navigation structure of the website. Shopping > Food > Apples |
| Attribute [attributes of current page or item] 특성 | based breadcrumbs are based on the attributes of the page or product that you are browsing. * Since the order of these attributes is not prescriptive, you’ll see some sites display these at the same level in the UI. If you want to allow users to remove attributes, provide an (x) button or similar to indicate they can be removed. Apple: Red Small |
| Path [unique to a user’s journey on the site] 패스 | based on a user’s unique path through the site. ... > About > Home > Login |
- Breadcrumb Pitfalls [브레드크럼의 함정]
- Path based breadcrumbs are unique to a user’s journey and are not commonly implemented. Only use this type of breadcrumbs if there is a compelling(합당한) reason for it.
- While breadcrumbs are common, it is not the primary way users will navigate a site.
- The rule of not adding anything extraneous to the design applies here. If the site only contains a few pages or if the pages in the breadcrumbs are already available through primary navigation, there is little reason to include breadcrumbs in the design.
*브레드크럼 주요 코드
<ul class="breadcrumb">
<li class="location">
<a href="#">Shop</a>
</li>
<li class="location">
<a href="#">Groceries</a>
</li>
<li class="attribute">
<a href="#">Blueberries</a>
</li>
<li class="attribute">
<a href="#">Organic</a>
</li>
</ul>.breadcrumb li{
display:inline;
}
.breadcrumb li+li::before {
content: "/ ";
}
.breadcrumb li.attribute a{
color:gray;
}
.breadcrumb li.attribute::after {
content: "x";
color: red;
font-size: 10px;
vertical-align: super;
}'Web' 카테고리의 다른 글
| [CSS] 21) 플렉스박스 (#display:flex) (0) | 2021.02.19 |
|---|---|
| [CSS] 20) 미디어쿼리 (#@media #DPI) (3) | 2021.02.08 |
| [CSS] 16)링크와 버튼 (#title, #hover state) (0) | 2021.02.04 |
| [Front-end] 15)웹페이지 텍스트 디자인 꿀팁 (0) | 2021.02.01 |
| [Front-end] 14)적절한 UI를 위한 색조합 꿀팁 (0) | 2021.01.30 |
