ナビゲーションラベルで出来ること

若干複雑になりがちな部分をなるべく簡単にして、メニューのデザインを変えてみよう、と思う。

PHPを触ったり、テーマデザインの根幹となるCSSを触ったり…は、それはそれで勿論面白い。
が、今回は【ナビゲーションラベル】と若干のCSSでイメージをどこまで変えられるのか、という感じで作業を進めてみる。
前回の記事の続き的な作業ね。

メニューの各【ナビゲーションラベル】には以下を入力。

<div class="menu-styling02">ホーム<div class="menu-styling01">HOME</div></div>
<div class="menu-styling02">会社案内<div class="menu-styling01">OUTLINE</div></div>
<div class="menu-styling02">施工実績<div class="menu-styling01">RESULT</div></div>
<div class="menu-styling02">リクルート<div class="menu-styling01">RECRUIT</div></div>
<div class="menu-styling03">お問い合わせ<div class="menu-styling01">CONTACT</div></div>

<div class="menu-styling02">会社案内<div class="menu-styling01">OUTLINE</div></div>

<div class="menu-styling02">施工実績<div class="menu-styling01">RESULT</div></div>

<div class="menu-styling02">リクルート<div class="menu-styling01">RECRUIT</div></div>

<div class="menu-styling03">お問い合わせ<div class="menu-styling01">CONTACT</div></div>

で、上記のクラスのCSSは以下。

.menu-styling01{
    margin-top:0px !important;
    padding-top:0px !important;
    position: relative;
    top: -60px;
    font-size:12px !important;
    text-align:center;
    letter-spacing: 1px;
    opacity:0.3 !important;
}


.menu-styling02{
    width: 110px;
    margin-bottom:0px !important;
    padding-bottom:0px !important;
    position: relative;
    top: 0px;
    text-align:center;
    background-image: url(URL);  
    background-repeat: no-repeat;  
    background-position: top left;
}

.menu-styling03{
    width: 115px;
    margin-bottom:0px !important;
    padding-bottom:0px !important;
    position: relative;
    top: 0px;
    text-align:center;
    background-image: url(URL);  
    background-repeat: no-repeat;  
    background-position: top left;
}

.menu-styling01{

margin-top:0px !important;

padding-top:0px !important;

position: relative;

top: -60px;

font-size:12px !important;

text-align:center;

letter-spacing: 1px;

opacity:0.3 !important;

}

.menu-styling02{

width: 110px;

margin-bottom:0px !important;

padding-bottom:0px !important;

position: relative;

top: 0px;

text-align:center;

background-image: url(URL);

background-repeat: no-repeat;

background-position: top left;

}

.menu-styling03{

width: 115px;

margin-bottom:0px !important;

padding-bottom:0px !important;

position: relative;

top: 0px;

text-align:center;

background-image: url(URL);

background-repeat: no-repeat;

background-position: top left;

}

background-imageには、各メニューの左側にくるラインを画像化して配置してみた。
もちろん、border-leftでも線は入れられるが、クラスの【.menu-styling02】と【.menu-styling03】のheightのHover時の挙動を制御できずに検証して修正するのが面倒なので画像で処理してみた。

結果、こんな感じ。下のサンプルではテーマはAvadaで製作してみたが、恐らくどのようなテーマでもこんな感じで出来る。

一番右にあるお問い合わせの「電話番号」はPHPを触っている。
Avadaの場合は、【templates】フォルダ内の【header-1.php】がメニューに関する記述のようなので、フロートで絶対に右端に表示されるように指示している。
PHPへの記述はこんな感じ。

<?php
/**
 * Header-1 template.
 *
 * @author     ThemeFusion
 * @copyright  (c) Copyright by ThemeFusion
 * @link       http://theme-fusion.com
 * @package    Avada
 * @subpackage Core
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
?>
<div class="fusion-header-sticky-height"></div>
<div class="fusion-header">
	<div class="fusion-row">
		<?php avada_logo(); ?><div id="phone"><span style="padding-right:3px;"><i class="fa fa-phone-square" aria-hidden="true"></i></span>0538-35-1200</div>
		<?php avada_main_menu(); ?>
	</div>
</div>

<?php

/**

* Header-1 template.

* @author ThemeFusion

* @copyright (c) Copyright by ThemeFusion

* @link http://theme-fusion.com

* @package Avada

* @subpackage Core

// Do not allow directly accessing this file.

if ( ! defined( 'ABSPATH' ) ) {

exit( 'Direct script access denied.' );

}

<?php avada_logo(); ?><div id="phone"><span style="padding-right:3px;"><i class="fa fa-phone-square" aria-hidden="true"></i></span>0538-35-1200</div>

<?php avada_main_menu(); ?>

</div>

上記のPHPで追加したのはこの部分。

<div id="phone"><span style="padding-right:3px;"><i class="fa fa-phone-square" aria-hidden="true"></i></span>0538-35-1200</div>

1	<div id="phone"><span style="padding-right:3px;"><i class="fa fa-phone-square" aria-hidden="true"></i></span>0538-35-1200</div>

でこのidのために追加したcssは…

#phone {
    float: right;
    color:#fff;
    padding-left:0px;
    margin: 15px 15px -40px 0;
    font-family: MuseoSlab500Regular, arial, helvetica, sans-serif;
    font-size: 26px;
    font-weight: bold;
}

#phone {

float: right;

color:#fff;

padding-left:0px;

margin: 15px 15px -40px 0;

font-family: MuseoSlab500Regular, arial, helvetica, sans-serif;

font-size: 26px;

font-weight: bold;

}

で一定幅からは表示させなくしている。

@media screen and (max-width: 1200px) {
/* 1080pxまでの幅の場合に適応される */
#phone {
    display: none;
}
}

@media screen and (max-width: 1200px) {

/* 1080pxまでの幅の場合に適応される */

#phone {

display: none;

}

PHPを触ってコンテンツを追加するならTEL番を直に追加せずに、ウィジェットエリアを追加してコンテンツはウィジェットで管理するのも手かもしれない。
と、今思っちゃった。