メニューの内容を変更 - Museのチュートリアル

このレッスンでは メニューの ステートの設定について解説します では １回「ホーム」の画面を見て プレビューしてみましょう すると こんな感じで メニューが動作しています ただ これは今 色が合ってないですし ちょっと違和感があるので 色を他の部分のデザインと 合わせようと思います では 「プラン」に戻って 「マスター」ページに行きます ここにメニューの元があります メニューの色などを合わせる時には 「ステート」というパネルを使います パネルの方から「ステート」を クリックしても良いですし 「ウィンドウ」のメニューから 出しても一緒です 見やすいように切り離して こちらに持ってきます この状態では ステートはまだ空っぽですけど まず １回メニューをクリックします これではまだ出てこなくて もう１回クリックして １個選ばれると 内容が出てきます すると「通常」「ロールオーバー」 「マウスダウン」「アクティブ」 「通常」は何もしていない時 「ロールオーバー」はマウスを重ねた時 「マウスダウン」はクリックした時 「アクティブ」はその場所にいる時 それぞれの状態を ここの「塗り」で作ることができます では まず 「通常」で塗りの部分を 他の部分と一緒にしてみましょう すると いっぺんに変わったのが 分かると思うのですが 選んでいるボタンは１個だけですけど メニュー内をまとめて動作します 次は「ロールオーバー」です マウスを重ねた時は ちょっとだけ明るくしましょう そして「マウスダウン」です クリックした時も同じで良いです 見ると分かるのですが この時には「通常」以外の場合には 選んでいるボタンの色が変わります 「アクティブ」です そこにいる時もこの色にしましょう 「通常」時以外は全部 ちょっと薄い色 この様な設定になりました この状態です では「ホーム」のほうに移動してきました これがどんな風に動いているか 今度はブラウザで見てみましょう 「ブラウザでページをプレビュー」をすると この様に合わせると色が変わります 例えば「 SERVICES 」に移動の時は クリックすると ちゃんとアクティブになります 「 CONTACT 」 「 TEAM 」 「 WORK 」 「 SERVICE 」 「 HOME 」 この様に連動しています そして 見ていただきたいのは…