【WordPress専用】ヘッダーの作り方(後編)

注意
ヘッダー(完成品)
JavaScript
まとめ・注意点

注意

前編をまだ見ていない方、HTML/CSSを導入していない方は、こちらをご覧ください。

前編

ヘッダー(完成品)

Logo

モバイルモードにする(ウィンドウ横幅を781px以下に縮める)と、
2つ目のリストが表示され、Menuをクリックすると展開されます。

JavaScript

環境的にCSSの読み込みにラグが生まれている為、ReSizing()関数を、
1秒後に呼び出しています。


const header = document.querySelector(".header-area");
const list = header.querySelector(".list-for-pc");

const top_link = list.querySelector(".top");
const span = top_link.querySelector("span");

const links = list.querySelectorAll(".link");

let links_position;

window.addEventListener("resize",ReSizing);

function GetStarting(){
    return top_link.getBoundingClientRect().left;
}

let now_position_num = 0;

function ReSizing(){
    const temp = [];
    const starting = GetStarting();

    for(let i = 0; i < 8; i++){
        const position = links[i].getBoundingClientRect().left;
        temp.push(position - starting);
    }

    links_position = temp; 
}

setTimeout(ReSizing, 1000);

function Reset(){
    now_position_num = 0;
    span.style.transform = "none";
    span.style.width = "120%";
}

list.addEventListener("mousemove",(el)=>{
    const starting = GetStarting();
    const position = el.pageX - starting;

    if(links_position != undefined){
        if(position < links_position[0]){
            Reset();
        }else{
            for(let i = 0; i < 8; i++){
                if(position > links_position[i] && links_position != i){
                    now_position_num  = i;
                }
            }
    
            span.style.transform = "translateX(" + links_position[now_position_num] + "px)";
            span.style.width = links[now_position_num].offsetWidth * 1.2 + "px";
        }
    }
}); 

list.addEventListener("mouseleave",function(){
    Reset();
});

const toggle = header.querySelector(".toggle-list");
const sp_links = toggle.querySelectorAll("li");

sp_links[0].addEventListener("click",function(){
    for(let i = 1; i < 7; i++){
        sp_links[i].classList.toggle("active");
    }
})

メソッドとは

このJavaScriptにはメソッドというものが使われています。
メソッドとは、オブジェクトに関連付けられた関数で、
中身を簡単に図解した一例がこちらになります。


// オブジェクトの定義
var myObject = {
    // プロパティ
    name: "John",

    // メソッド
    greet: function() {
        console.log("Hello, my name is " + this.name + ".");
    }
};

// メソッドの呼び出し
myObject.greet(); // "Hello, my name is John."

先頭にvarとありますが、定数constで宣言された場合でも、
振る舞いに違いがありません。

メソッド自体の中身を書き換える事は出来ませんが、
メソッドはElement(HTMLの要素)を書き換える役割があります。

ただし、印象としてはstyleプロパティを用い、
CSSのプロパティに変数または定数を代入する機会の方が多いです。

getBoundingClientRect()メソッド

getBoundingClientRect()メソッドは読み込み専用で、
Element要素が特有的に持つメソッドの一つで、6つのプロパティを含有しています。
これらのプロパティはDOMRectオブジェクトのプロパティと言います。


// HTML要素を取得
var element = document.getElementById("myElement");

// 要素の位置やサイズに関する情報を取得
var rect = element.getBoundingClientRect();

// 取得した情報を使って作業
console.log("要素の左上のX座標:", rect.left);
console.log("要素の左上のY座標:", rect.top);
console.log("要素の幅:", rect.width);
console.log("要素の高さ:", rect.height);
console.log("要素の右下のX座標:", rect.right);
console.log("要素の右下のY座標:", rect.bottom);