php - CodeIgniterユーザーガイドのようなポップアップ目次をどのように作成しますか？

Question

https://www.codeigniter.com/user_guide/tutorial/index.html

そのリンクにアクセスして、ページの右上にある目次ボタンを探してください。私が作っているウェブページにそれを適用したいと思います。

そのデザインテクニックを何と呼びますか？それを行う方法に関するチュートリアルへのリンクはありますか？どうもありがとうございます。

Answer 1

そのメニューを作成するには、cssとjqueryを使用できます。でdivを作成する

position:absolute;top:-400px;width:auto;height:430px;

そして、jqueryでアニメーション化します。クリック時に、top：0pxを設定します。jquery関数をアニメートすることもできます。LE：

$(document).ready(function(){ $('div a').click(function(){ $(this).parent().css('top','0px'); $(this).addClass('opened');
$(this).click(function() { if($(this).hasClass('opened')){ $(this).parent().css('top','-280px'); } }) }); });

<div style="width:100%;background-color:red;position:absolute;height:300px;top:-280px;"><a href="javascript:void(0)" style="width:80px;height:20px;background-color:black;bottom:0;position:absolute;"></a></div>

これはサンプルコードです。ここから編集したり、アニメーション化したりできます。幸運を！