Codepenのコードについて

質問

「Codepen」 というwebデザインのサイトについて質問があります。

素敵なメニューがあるので自分のサイトにも使いたいのですが、フリー版で登録してファイルをDLしてみたところ、サイトで見ている状態にはなりませんでした。サイト自体をDLしてみたところ、ベンダープレフィックスの記述もあったり別の javascript も記載されており大分違っていました。

HTML と CSS と JS だけで作成されていると記載されていますが、実は jquery を利用していたり、記載に無い別の javascript を利用しているようです。

アイコンなどは削除してコードを最低限にスリム化したいのですが、頁をまるごとDLしても元のサイトのような動きや表示をしないので困っています。

＜質問の頁＞

https://codepen.io/kieranfivestars/pen/JdbPBv

https://cdpn.io/kieranfivestars/fullpage/JdbPBv#

＜必要と思われる頁など（全て同じディレクトリに入れています。）＞

(1) index.html（大元の頁）

(2) font-awesome.min.css（これは削除してもOK？）

(3) jquery.min.js（必要みたい）

(4) stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js（必要みたい）

以下はhtmlからも削除しました。
(5) fontawesome-webfont.svg
(6) favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico

DLしたフォントは　font　というフォルダの中に入れています。

ウェブ上の頁とDLしたファイルのコードに違いがありましたので少し直したところ
見た目は動くようになりました。しかし横三本線のメニューの表示が少しおかしいです。（DLしたファイルでは　<ul class="open">　の　classの指定がされていませんでしたので追加しました。）

(2) font-awesome.min.css は削除すると、上下に動くハンバーガーメニューが止まってしまいました。

＜補足＞

以下は必要と思われるファイルのアドレスになります。

(1) index.html（大元の頁）

(2) font-awesome.min.css（これは削除してもOK？）
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome...

(3) jquery.min.js（必要みたい）
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

(4) stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js（必要みたい）
https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e...

●他に多数のフォントファイルもDLできました。必要なのかもしれませんが、ディレクトリは font という別のフォルダに入れたいので、
もしかしたら、font-awesome.min.css の中の url にディレクトリ名を追加しないといけないのかもしれません。

アイコン画像やsvgも一応保存しています。

今の状態のファイルは以下にありますので、一度見てもらえますとありがたいです。
７日間保存されています。

https://firestorage.jp/download/b19a1219f4ffb04658781c5d4892f410d8e59475

短縮URL
https://xfs.jp/jSR7aT

できるだけ必要のないコードは削除してシンプルにしたいと思っています。
出来れば CSS や javascript ファイルは外部タイプにして　html　はシンプルにしたいと思っています。

どなたかお知恵を拝借できればと思っております。
よろしくお願い致します。

回答No.2

celtis

>可能であれば、他サーバーのファイルを利用しないで、html と css と画像などだけで実現できたらと思っています。
アイコンを画像やCSS描画に置き換えたり、jQueryを使わないようにすることも可能でしょう。
元ファイルを無くしてしまったのでアップロードはできませんが、下記のようなコードで外部のリソースを使わないやり方にできると思います。
https://blog-and-destroy.com/27119

回答No.1

celtis

できるだけ簡素化してみました。

・アイコンフォントはCDNから読み込み
　https://saruwakakun.com/html-css/basic/font-awesome

・CSSを外部ファイルに切り出し
　https://saruwakakun.com/html-css/reference/where-css

・JQueryもCDNから読み込み
　https://webkaru.net/jquery/cdn-hosted-file-load/

・JavaScriptの実行部分は少ないのでHTML内に保存

下記のリンクから圧縮ファイルをダウンロードできます。
https://send.firefox.com/download/26d26d2e7b705a08/#kDyMIH2z-9xt1x6jUmcsyQ

お礼

とてもシンプルなコードで目的が果たせました。
ありがとうございます。

CSSアニメーションでこれだけのことができるようになっているとは驚きました。
私が触っていた時は、まだネットスケープとIEぐらいで、document.all などをつかって条件分岐したりしてクロスブラウザ対策をするくらいの時代でしたので。
CSS３アニメーションでかなりのこともできるのが実感できました。
新たに基本書と応用書と辞典を手にとって一から勉強しています。
中古で購入したので70％引きくらいになりました。
スマホベースにPCとレスポンシブでサイトを作成して単一のHTMLで更新できるようになることを第一の目的にしています。
この度は初心者に誠実に返答くださり本当にありがとうございました。

補足

早速のご回答ありがとうございます。
言われた通りにしてみたところ、見事に元の表示より三本線もキレイに表示されました。

このサイトコードは fontawsome とか Jquery　とか使ったりしていることが分かりましたが、
できれば、三本線は小さな画像でもいいですし、
https://webllica.com/humberger-menu-by-html-css/
のように<div>を利用したり、
onClick を利用した javascript を html 内に直接書き込んで Jquery を使わないようにできたら
一番良いのですが、css ファイルの中に、fontawsome やフォントの指定や、アニメーションの css があるようなので難しいでしょうか。可能であれば、他サーバーのファイルを利用しないで、html と css と画像などだけで実現できたらと思っています。css ファイルの中身をいじるとなるとやはり難しいのでしょうか。