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も一応保存しています。
今の状態のファイルは以下にありますので、一度見てもらえますとありがたいです。
7日間保存されています。
https://firestorage.jp/download/b19a1219f4ffb04658781c5d4892f410d8e59475
短縮URL
https://xfs.jp/jSR7aT
できるだけ必要のないコードは削除してシンプルにしたいと思っています。
出来れば CSS や javascript ファイルは外部タイプにして html はシンプルにしたいと思っています。
どなたかお知恵を拝借できればと思っております。
よろしくお願い致します。
補足
そのURLにはどんな意味があってどこで入手できるんですか?