DAY 19 制作 Nav Bar - dropdown content

针对 dropdown content，再来做一些微调，让他更像 vogue 官方的样式

// _dropdown.sass

.dropdown
    position: relative
    display: inline-block

    &-content
        display: none
        background-color: $primary-background-color
        box-shadow: $gray -2px 2px 5px
        margin-left: -4px
        min-width: 120px
        max-height: 300px
        overflow: auto
        padding: 4px
        position: absolute

这次我们加上了高度限制，并且让 overflow 的内容会 auto hide，那就可以使用 scroll bar 的方式来卷动 content 的内容检视

上面的 box-shadow 常常被用到，我们把它抽出来当 variable 使用吧！

一样先在 _variable.sass 中取名并放入设定值

// _variable.sass
    
//font 
@font-face
    font-family: 'Noto Sans TC', sans-serif
    font-family: 'Noto Serif TC', serif
    font-family: 'Prata', serif
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&family=Noto+Serif+TC:wght@500&family=Prata&display=swap')

$logo-font: 'Prata', serif
$sans-font: 'Noto Sans TC', sans-serif
$serif-font: 'Noto Serif TC', serif

$menu-item-font-size: 12px

//color
$primary-color: #000
$secondary-color: #EE0000
$primary-background-color: #fff
$gray: #f2f2f2

//shadow
$default-box-shadow: $gray -2px 2px 5px

顺便大概区分了一下个区域所设定的内容，避免之後东西越来越多找不到

然後把预设好的 box-shadow 再放回有使用的地方

// _dropdown.sass
    
.dropdown
    position: relative
    display: inline-block

    &-content
        display: none
        background-color: $primary-background-color
        box-shadow: $default-box-shadow
				// ...

大概就是以上这样啦！我们明天见！

除此之外，也欢迎大家走走逛逛关於我们团队夥伴的文章

lu23770127 - SASS 基础初学三十天

10u1 - 糟了！是世界奇观！

juck30808 - Python - 数位行销分析与 Youtube API 教学

HLD - 浅谈物件导向与Design Pattern介绍

SiQing47 - 前端？後端？你早晚都要全端的，何不从现在开始？