CodePenを真似しておしゃれなメニューを作りたい

■　実現したいこと

下記リンクをコピペしてメニューを作りたい
[リンク１] https://codepen.io/rachsmith/pen/alnzE
[リンク２]　https://photoshopvip.net/97481 （この中の Circular Links Menu (Responsive) というところが上記リンク１です）

■　起きている不具合

上記参考リンクではHTMLファイルが全くないのでどうしたらよいかわかりません。
読み込んでいるjQueryもなさそうです。
Javascriptの部分をHTMLファイルの<script>～</script>内に貼り付けもしましたが、それでもうまくいきません。

■　試してみたこと

下記のようにファイルを作成してみましたが、画面が赤くなるだけでした。
そもそもなぜHTMLファイル無しにこのような状態にできるのかがわかりません。
作成するファイルもCSSとJavascriptのみでできるものでしょうか？

html
1<!DOCTYPE HTML>
2
3<html>
4<head>
5	<title>メニューの練習</title>
6	<link rel="stylesheet" type="text/css" href="css/reset.css">
7	<link rel="stylesheet" type="text/css" href="css/style.css">
8<script type="text/javascript">
9　　（上記リンクのJavascript欄をコピペ）
10</script>
11</head>
12<body>
13</body>
14</html>

css
1(style.cssの内容)
2@charset "UTF-8";
3　　（上記リンクのcss欄をコピペ）

行動規範の内容に同意します

回答1件

ベストアンサー

スクリプトの実行するタイミングの問題かと。操作するdom要素を読み込んでから実行するようにします。今回はbody要素に追加してますので、body要素を読み込んでから実行するようにします。

一番簡単なのは、</body> の直前に<script>ブロックを移動させればいいでしょう。HTMLは基本上から順に読み込んでいきますので。

html
1<!DOCTYPE HTML>
2
3<html>
4<head>
5    <title>メニューの練習</title>
6    <link rel="stylesheet" type="text/css" href="css/reset.css">
7    <link rel="stylesheet" type="text/css" href="css/style.css">
8</head>
9<body>
10
11<script type="text/javascript">
12（上記リンクのJavascript欄をコピペ）
13</script>
14</body>
15</html>