Int's blog

Int 的程式筆記

0%

發表於

漢堡選單是一個很常使用在手機版網頁的菜單呈現方式，因為按鈕是三條線，很像一個漢堡所以稱為漢堡選單。

hambar

原理

漢堡選單的原理是利用jquery的toggleClass來為navbar新增或移除css class，所以分成兩個部分，一個是css，一個是jquery。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.navbar{
	width: 100%;
	max-height: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    transform: translateY(100%);        
    overflow: hidden;
    transition: max-height 0.7s;
    background: $navbar__color;
}
.navbar.show{
	max-height: 500px;
}

首先是navbar的樣式，將navbar的高度設為0讓它消失，並用position和transform將navbar固定在自己想要的位置，transition設定展開動畫，overflow將多餘的內容隱藏，背景色設定成和原本的navbar相同。

.show將navbar的高度變成500px(這裡可以自訂)，因為transition的緣故會產生動畫。

JQuery

1
2
3
4
$('.menu-btn').click(function (e) {
    e.preventDefault();
    $('.navbar').toggleClass('show');
  });

按下漢堡選單後(我這裡的class叫menu-btn)，對navbar新增show class，所以高度會變成500，這時菜單就會出現了。而e.preventDefault()單純是用來取消a的預設動作。

範例

發表於

CSS中有一個屬性可以改變文字的顏色，就是color。

語法

1
2
3
.box {
	color: #000;
}

color後面可以接顏色色碼(16進制)、rgb function和rgba function，其中rgba是包含透明度。

要注意新手一開始會有點跟背景色搞混，這個是幫文字更改顏色，background-color是整個元素的背景色。

發表於

CSS有一個屬性叫background-attachment:fixed，詳細可以參考這篇。

不過他有一個很大的問題，就是safari以及一些安卓瀏覽器上不支援。

我原本設計了一個網站，在body上下了一個背景並使用了background-attachment:fixed這個屬性，但卻因為這個理由我沒辦法完整呈現我的背景。

不支援的理由主要是過於耗能，可以參考這篇。

那我能解決的辦法有兩個，一個是不要使用(沒錯，很像廢話，但查到的都是叫我改用scroll)，一個是改成用div以及position:fixed。

我當然是選擇後者，因為我還是希望我的網頁背景有fixed的效果，所以我在我的網頁最上面加上一個div並給他background-image

1
2
3
4
<body>
  <div class="background"></div>
  ...
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.background {
    background: url("../images/background-lg.png") no-repeat, $secondary;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    background-position-x: 50%;
    background-position-y: 50%;
    position: fixed;
    height: 100%;
    width: 100%;

    @include pad {
        background-image: url("../images/background-md.png");
        background-position: 80%;
        background-position-x: 80%;
    }
}

發表於 更新於

owl-carsouel是一個jquery插件，提供滾動式卡片樣式與動畫，官網，但是我卻發現他有一個bug，在手機版上如果左右滑動後點擊事件會失效。

查了查後發現是owl-carsouel一直以來的bug，按著這篇試著解決這個bug，簡單來說要把owl.carousel.js或owl.carousel.min.js中的(Math.abs(d.x)>3||(new Date).getTime()-this._drag.time>300)改成((Math.abs(delta.x) > 3 || new Date().getTime() - this._drag.time > 300) && event.type === 'mouseup')，我這著做之後在電腦上即使使用開發人員工具換成手機模式也不會產生bug了可喜可賀。

但是，沒錯，但是我用手機開網頁這個bug還是在，真的尷尬，現在我查不到任何解決方法了，值得慶幸的是再點一次同樣可以觸發，如果有人知道如何解決歡迎告訴我。

發表於

我在這篇有介紹到html中的錨點，而本篇會來介紹如何用JQuery來讓跳轉的動畫變得流暢。

載入JQuery

首先第一步當然是載入JQuery，載入的方法在JQuery介紹有說明。

撰寫JQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//回頂部
$('h1').on('click', function () {
    $("html,body").animate(
      {
        scrollTop: 0 //回到第一個區塊
      },
      800
    );
  })
  
  //其它連到對應區塊
  $(".navbar-list a").on("click", function () {
    var hrefLink = $(this).attr("href");
    console.log(hrefLink);
    $("html,body").animate(
      {
        scrollTop: $(hrefLink).offset().top//直接到相對位置
      },
      800
    );
  });

  • 首先我們來一步一步拆解，回頂部區塊就是會滾動回網頁最頂部，用在href=”#”的link中，所以當相對應得標籤被點擊(在我這裡是h1)，html和body就會用animate function滾回頂部，用800毫秒的時間，而這裡最重要的就是scrollTop()，scrollTop代表目前viewport最頂端的元素在網頁中的位置，所以將scrollTop設為0就會回到頂部。

  • 接著是其他按鈕會滾動到對應區塊的動畫，同樣按了對應的按鈕(我這裡叫navbar-list裡的a)就會產生滾動動畫，透過hrefLink取得id，再透過.offset().top，取得那個元素的頂部座標，就會產生滾動動畫了。

發表於

Google提供了許多開源的線上字型，這篇會來介紹如何在自己的專案載入Google提供的字型。

  1. 首先到 Google Font的網站點選Font

  2. 選一個你想要的字型，也可以用搜尋的

  3. 我這邊示範選擇Roboto，點進去之後會看到下面的畫面

  4. 對自己想要的字重按+號，想按引入幾種就按幾種。

  5. 右手邊就會出現你選擇的字型

  6. 點選link可以貼到html的header上

  7. 又或者是點選import可以從scss上載入

  8. 這樣就載入完成了，可以使用font-family語法直接引入字型了

1
2
3
.body {
	font-family: Roboto;
}

發表於 更新於

我上次在這篇簡單介紹了jQuery，這篇要來介紹其中一個常見的function: toggleClass。

這個函式是我在學如何製作漢堡選單時學習到的，之後也會寫一篇關於如何製作漢堡選單的文章。

用途

toggleClass可以改變class的有無，比如說我對一個按鈕點擊後想要對某個元素做出樣式改變就可以使用。以下面這個例子來說，我設定成點擊.menu-btn後會修改.navbar-list的show class狀態，如果.navbar-list有show class會移除，沒有就會新增。

1
2
3
4
$('.menu-btn').click(function (e) {
    e.preventDefault();
    $('.navbar-list').toggleClass('show');
  });

發表於

按下一個按鈕，可以往下滾動到頁面中相對應的區塊，這是網頁設計中很常使用到的技巧，要達成這個效果就要使用到Html中的錨點(anchor)。

id

說到錨點就要提到html的一個屬性: id，id就像是當前區塊或元素的身分證，它代表了當前元素，所以整個頁面中id只會出現一次，而id就是所謂的錨點，透過找到這個獨一無二的id來達成。

1
2
3
<div id="section1">
  ...
</div>

常見於html中的id。

a標籤

那有了錨點，我們要怎麼讓使用者能使用這個功能？這時候就會用到a連結，我們一般預設a連結會寫成如下:

1
<a href="#">link</a>

那個href所指向的#指的就是首頁，如果改成id的名稱就可以跳轉到那個區塊。
但是，所有id名稱前面都要加上#，否則他會認為是外部連結。

範例

發表於 更新於

在Bootstrap中有一個很重要的東西稱作格線系統，BS5將網頁切分成row與column，一個row裡面會有12個column，所以在撰寫時會產生以下結構:

container > row > column

可以將網頁想成一個excel，container就是工作表，row與column就是欄位。

在常用的設計稿軟體中有些也支援格線系統(如Adobe XD、figma)，工程師可以依照設計師劃的格線為網頁原宿設定統一的寬度，不用去撰寫一些奇怪的寬高(我們稱為magic number，乍看之下沒辦法得到什麼語意化的資訊)

規則

row與column有個特別的規定，row裡面一定要接column，就像ul或ol裡面一定要接li，但container就沒有此限制。

正確例子

  • ex1:

    1
    2
    3
    4
    5
    <div class="container">
    	<div class="row">
      		<div class="col-6"></div><div class="col-6"></div>
      	</div>
    </div>

    這是最標準的寫法，container接row再接column。

  • ex2:

    1
    2
    3
    4
    5
    6
    <div class="container">
      	<h1>Title</h1>
    	<div class="row">
      		<div class="col-6"></div><div class="col-6"></div>
      	</div>
    </div>

    container底下可以接其他標籤

錯誤例子

  • ex1:
    1
    2
    3
    4
    5
    6
    <div class="container">
    	<div class="row">
          	<h3>sub title</h3>
      	<div class="col-6"></div><div class="col-6"></div>
      	</div>
    </div>
    row後面一定要接col，所以這樣寫是錯的。

格線系統的RWD

格線系統也支援RWD，寫法為 col-size-number，在col後面加上對應螢幕尺寸的代號(sm、md、lg、xl、xxl…)就可以達成RWD的效果。

結語

要特別注意，並不是網頁所有的元素都必須使用到格線系統，必須視情況使用，有時候我會在網頁中同時用到flex的排版與格線系統。

特別是文字的部分，因為設計師或客戶可能會更改設計稿的文字，所以就算一開始設計稿的某些文字部分是符合格線系統，也不要寫得剛剛好，又或者是就不要使用格線系統，避免之後修改或維護的困難。

發表於

RWD (Responsive Web Design) 中文稱作響應式網頁，是為了因應不同裝置螢幕大小不同導致網頁必須適應各種螢幕尺寸而衍生出的技術。

語法

1
2
3
4
5
6
7
@media (max-width: value) {
	...
}

@media (min-width: value) {
	...
}

通常我會使用max-width來開發，當螢幕寬度小於設定的值時會將樣式改變成括弧內的樣子。

max-width與min-width最大的區別在於max-width是以桌機使用者出發，min-width則是以手機使用者出發，一般來說會先學max-width比較容易上手。

常見斷點

所謂的斷點是當螢幕寬度達到某個數字時會改變樣式，那個數字就稱為斷點。一般網頁下的斷點為2~5個。

  1. 1200px
  2. 992px
  3. 768px或767px[註]
  4. 576px

以上是比較常用的斷點，1200為桌機，992為平板，768以下為手機，手機又視不同型號可以區分得更細，最小可以到320px。一般我在寫作業都是使用992與767兩個斷點，其他斷點的使用則是依專案需求來規劃。

[註]會有767px是因為平板的直式

其他斷點(手機螢幕尺寸)