ボタンの親)にクラス名を付けたり消したりします。指定しておけばOK親要素にクラス名が無い時は、<nav>は非表示でボタンはハンバーガー状態。これだけでもイイのですが、transitionプロパティでなめらかに動くようにしても面白いですね。ページのドロワーメニューの作り方をメモっておきます。作っておくデモページでは、<header>を親要素にしています。CSSで三本線にします。display:noneで非表示にします(2行目)。上や右から少し離して配置しておきます。divに対して幅は100%(13行目)、位置は上から順に絶対位置指定で決めてやって(18〜20行目)等間隔に並べます。指定は(15〜17行目)、あとで×に動かす時に、なめらかなアニメーション風にするための設定です。存在するけど画面上は見えない状態になりました。<nav>のCSSです。display:table-cellにして横に並べています。text-align:rightを指定してメニューを右に寄せています。display:inline-blockで横並びにしています。クリックした時の動作の準備です。読み込んでおきます(1行目)。その後に「.toggleClass」も書いておきます(2〜8行目)。クラス名「.openNav」を付けたり消したりするように指定しています。ウィンドウ幅が狭くなった時の指定をするだけです。表示し、メニューは一旦非表示にします。切り替わる指定も加えます。/*nav要素は絶対位置指定にして、ビューの外側に置いて見えなくします。横並びを解除して縦組みにレイアウトし直します。よって親のクラス(.openNav)が削除されるので、最初のボタンの設定(#navToggle)に戻るというわけです。指定に切り替わります。<nav>のy方向の移動で(51〜54行目)351px移動させていますが、これは、<header>の高さが50px、<nav>のビュー外での位置は-300pxなので、合計350px動かせば良いのですが、1px分<header>と離してラインを入れたかったので351pxにしました。するCSSは、いろいろアレンジができそうですね。考えたソースを公開してくださってるサイトがありましたので、リンクを貼っておきます。参考にさせていただきたいと思います。株式会社LIGさんです。NxWorldさんです。ラインがサークルになるのが素敵です。NxWorldFacebookTwitterモーダルウィンドウ(ポップアップウィンドウ)をjQueryとCSSで簡単に作る手順モーダルウィンドウ(ポップアップウィンドウ)をjQueryとCSSで簡単に作る手順プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。「display:table」を使いました。PMご報告が遅れましたが、やっと出来ました。勉強不足ですが、少しづつでも頑張ってみます。助言していただき、有難うございました。コメントをキャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。内容をご確認の上、送信してください。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。jQuery、WordPressなど、Webデザイン関連をメモっていく覚え書きサイトです。Reserved.^。