見出し画像

tocbotライブラリを使ってブログコンテンツライクな目次UIを作ってみよう

nap5

こんにちわ。nap5です。


tocbotライブラリを使ってブログコンテンツライクな目次UIを作ってみたので、紹介したいと思います。


tocbotライブラリはこちらになります。


npmで配布されているものに加え、CDNから提供されているものもインクルードしておかないとviteでのSPA構成では動かすことができなかったので、注意が必要かもしれないです。


以下のようにしておきます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.css"
    />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>


また、レスポンシブ対応の際にTOCの現在アクティブになっているメニューのシンクロにzustandライブラリを使っています。

https://github.com/pmndrs/zustand


デモコードです。


デモサイトです。


最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。


また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/


また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか？