サイタWeb・デザインスクールホームページ作成講座 東京 ヤマノウェブデザイン講座 レッスンノート スマホ用メニューの完成

スマホ用メニューの完成

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

レッスンお疲れ様でした。

前回はウィンド幅767pxでスマホ用のボタンを表示する所まででしたので、今回はそのボタンをクリックしてスマホ用メニューを表示する処理です。

1.まずpc用のメニューを非表示にしますが、メニューの表示形式を変えますので、その処理後にdisplay:none;で非表示にします。

2.ポジションでスマホ用ボタンの真下に位置し、横幅100%でウィンドウ幅一杯に広げ、非表示にします。

次にJ-queryでボタンの処理です。

3.J-queryはJavascriptのライブラリーの一つで、まずJ-queryのバージョンを選び、読み込みます。

4.その後、実際の処理を記述します。

$(function(){  
//htmlが読み込まれたら次の処理を行う

$('.btn').on('click touchstart',function(){ 
 //.btnをクリックかタッチしたら次の処理を行う

$('#nav:not(:animated)').slideToggle('fast');
  //#navがアニメーションしていない時に表示/非表示をする
});
});

以上
このレッスンノートを書いたコーチ

職業訓練講座の主任講師を担当。HP公開までの、トータルな知識が学べます

目的・種類別にホームページ作成・作り方講座を探す

新着レッスンノート

レッスンお疲れ様でした。 本日はワードプレスのデータのバックアップを行いました。 All-in-One WP Migrationと言うプラグインを使います。 ツールからエクスポートでファイルを選択し、ダウンロードしたファイルがバックアップファイルとなります。 そのファイルを...

レッスンお疲れ様でした。 私の方でカスタマイズしたテーマに沿って頁を制作しました。 固定頁は公開をして、メニューに追加してください。また、固定頁はテキストで制作した方がSEO上有利とされています。 投稿頁の物件情報とカスタム投稿のお得意様はフォーマットが決まりましたら、制作を...

レッスンお疲れ様でした。 マークアップ済みのhtmlファイルにcssを設定し、見た目のデザインを施しました。 ・cssの基本はリセットから記述します。ブラウザ間、バージョン間の初期値を極力無くす為に記述します。 ・navigationのボタンを横に並べるFlox Boxレイア...

レッスンお疲れ様でした。 本日のレッスン項目 ・最初に表示するページを制作、設定する。設定/表示設定でフロントページを固定ページから制作したTopページを選択します。 ・固定ページ/Top頁の編集画面で表示項目を制作します。 ・右サイドバー編集。外観/ウィジェットからサ...

レッスンお疲れ様でした。 本日は初回でしたので、ワードプレスと必要なツールをインストールしました。この作業は初回のみ必要で、次回からはサイト制作に集中できます。 ワードプレス起動/終了手順 1. xampp起動(apache/mySQLをstart) 2.ブラウザでURLを...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta