Diviのフルスクリーンメニューのスタイリング

公開: 2017-09-05

ディビのフルスクリーンメニューは、カスタムデザインの絶好の機会を提供します。 Diviのテーマカスタマイザーで使用できる他の4つのヘッダースタイルとは異なり、フルスクリーンメニューはアクティブなときに画面全体に表示されます。これにより、Diviのメニューとヘッダー要素のクリエイティブなレイアウトの余地が生まれます。

今日の投稿では、フルスクリーンメニューのスタイルを設定して、訪問者によりカスタムな雰囲気を与える方法を紹介します。これを実現するために、テーマカスタマイザーのいくつかのオプションを変更し、カスタムCSSを追加します。

始めましょう。

前後

これは、デフォルトで全幅メニューがどのように表示されるかです。

フルスクリーンメニュー

新しいデザインの概要は次のとおりです。

フルスクリーンメニュー

Diviのフルスクリーンメニューのスタイリング

私たちのYoutubeチャンネルを購読する

入門

設計を開始する前に、メニュー項目がすでに追加されているアクティブなプライマリメニューがあることを確認してください。

テーマカスタマイザの設定を更新します

WordPressダッシュボードから、[Divi]> [テーマカスタマイザー]> [ヘッダーとナビゲーション]> [ヘッダー形式]に移動します。次に、ヘッダースタイルとして[フルスクリーン]を選択します。

フルスクリーンメニュー

フルスクリーンヘッダースタイルを設定したら、ヘッダーとナビゲーションに戻ります。これで、「スライドインとフルスクリーンヘッダー設定」と呼ばれる新しいオプションのセットが表示されます。

スライドインとフルスクリーンヘッダーの設定を次のように更新します。

[トップバーを表示]オプションを確認します
メニューテキストサイズ：46px
トップバーのテキストサイズ：24px
フォント：Playfair Display
フォントスタイル：太字（B）
メニューリンクの色：#ffffff
アクティブリンクの色：＃edef86
トップバーのテキストの色：#ffffff

フルスクリーンメニュー

次に、ヘッダーとナビゲーションの設定に戻り、[ヘッダー要素]をクリックします。 [ヘッダー要素]で、以下を更新します。

[ソーシャルアイコンを表示]を選択します
[検索アイコンを表示]を選択します
電話番号：[番号を入力]
メール：[メールを入力]

フルスクリーンメニュー

すべてがセットアップされると、デフォルトのレイアウトは次のようになります。

フルスクリーンメニュー

次に、カスタムCSSをいくつか追加しましょう。

カスタムCSSの追加

DiviにカスタムCSSを追加するには、いくつかの場所で行うことができます。すでにテーマカスタマイザーを使用しているので、追加のCSSに移動します。ここにCSSを追加します。もちろん、子テーマの外部のstyle.cssファイルに追加する場合は、それを選択してください。

時間に追われている方は、CSSコードの完成版にスキップして、コピーして追加のCSSセクションに貼り付けることができます。戻って、背景画像などのいくつかの要素をコードに追加する必要があることを知っておいてください。

ここで、CSSの追加に戻ります。

ほとんどのカスタムCSSは、デスクトップバージョンのフルスクリーンヘッダーにのみ適用されるため、最小幅980pxの画面サイズを対象とするメディアクエリを追加することから始めます。 [追加のCSS]セクションに以下を追加します。

@media all and (min-width: 980px){

}

次に、ナビゲーションメニューとトップバー要素の位置を調整して、フルスクリーンヘッダーのレイアウトを少し変更し、ナビゲーションが画面の左側に表示され、トップバー要素が画面の右側に垂直にスタックされるようにします。画面。この変更を行うには、メディアクエリブラケット内に次のcssを追加します。

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

フルスクリーンメニュー

次に、次のCSSを使用して検索バーのサイズを大きくしてみましょう。

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

そして、次のCSSを追加して、メニューを右揃えにします。

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

次に、右上隅の閉じるメニューアイコンを大きくして、クリックしやすくしましょう。

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

また、トップメニュー要素の背後にある背景オーバーレイを取り出して、背景の不透明度を取り出しましょう。

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

サブメニュー項目がある場合、このCSSにより、メニュー項目の右側にあるドロップダウン矢印が大きくなります。

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

これまでに持っているものをチェックしてみましょう：

フルスクリーンメニュー

これで、背景画像を追加する準備が整いました。背景画像をすべてのデバイスに表示したいので、このCSSをメディアクエリブラケットの外側に追加して、幅が980px未満の画面サイズで背景が非表示にならないようにします。

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

背景画像のURLをまだお持ちでない場合は、背景画像（1920×1080）をWordPressメディアギャラリーにアップロードして、URLをコピーしてください。

フルスクリーンメニュー

次に、「画像のURLを挿入」というテキストを、画像のURLをコードに貼り付けて置き換えます。

これで完了です。

追加のCSSに追加する必要のあるCSSコードの完成版を次に示します（指定する必要のある画像のURLを除く）。

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

[保存して公開]をクリックします

それでは、チェックしてみましょう。

フルスクリーンメニュー

代替グリッドメニューレイアウト

メニューのグリッドレイアウトを追加するには、現在のコードの下とメディアクエリブラケット内に次のCSSを追加します。

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

フルスクリーンメニュー

重要な注意：メニュー項目が小さい画面サイズで重ならないようにするために、メニューのフォントサイズを30px（またはそれに近い）に変更する必要がある場合があります。また、メニューにサブメニュー項目がある場合、このレイアウトは機能しません。

フルスクリーンヘッダーのサブメニュー項目

サブメニュー項目がある場合、親メニュー項目は、サブメニュー項目を表示および非表示にするためのトグルリンクとしてのみ機能することに注意してください。メニューリンク自体としては機能しません。

レスポンシブ？

このcutomizationは応答性が高く、すべての画面サイズでうまく機能します。

フルスクリーンヘッダーは、垂直方向に配置された2つの隣接するテーブルセルで構築されます。左側のテーブルセルにはメニューが含まれ、右側のセルには他のヘッダー要素が含まれます。コンテンツは垂直方向に配置され、テーブルセルは常に画面サイズの50％（半分）を占めるため、コンテンツは常にどの画面サイズにも適切に調整されます。

画面サイズが980px（タブレットと電話）未満の場合、デフォルトのDiviレイアウトが起動し、モバイルでメニューが適切に表示されます。

最終的な考え

サイトにフルスクリーンヘッダーを追加することを検討している場合は、このデザインが役立つインスピレーションになることを願っています。ヘッダー要素とメニュー項目の対称性は、物事のバランスを取り、多くのクライアントにとって重要な連絡先情報により多くの注意を向けさせます。

このメニューは全画面表示であるため、背景画像が重要になることに注意してください。メニューの重要なコンテンツの邪魔になったり、溺れたりするような画像は必要ありません。必要な個性をもたらす完璧な画像が見つからない場合は、背景として見栄えがよく、デザインと一致する画像を選択してください。または、デフォルトの背景色オプションを使用することもできます。

まあ、それは私が持っているすべてです。

コメントであなたからの連絡を楽しみにしています。