[ 解決済 ] 透過のグローバルメニューのメニューをマウスホバー時テキストが入れ替わる変更したい

[林 有一]

■ WordPress のバージョン
6.6.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.26.2

■ Pro Unit のバージョン
0.26.8

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.5

■ 期待する動作
透過のグローバルメニューのメニューをマウスホバー時テキストが入れ替わる変更したい

↓こんな事をしたいのですが
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/5-3-9/5-3-9.html
　・HTMLでメニューを作成
　・独自CSSで作成されたデモページ

■ 自分で試した事
お世話になります。
初めて質問させていただきます。
Lightning使用初心者ですが、ご教授よろしくお願いいたします。
そもそも出来るのか判断できませんでした。
フォーラム等を検索しましたが見つける事ができませんでした。

■ 症状が発生するブラウザ
chrome

■ 実際の症状
不明

[対馬 俊彦]

興味があったので、CSS でカスタマイズしてみました。

以下の CSS を追加すれば、マウスホバーで文字が英語から日本語に切り替わります。
タブレットなどのモバイル端末はカスタマイズが適用されず、日英併記のままです。

Evergreen サイトだとこのままでいけると思います。

Evergreen 以外でも使えるようにしたつもりですが、確認が十分じゃないかもしれません。
ここ、こうするといいよ…ってご意見があればお願いします。

@media (min-width: 992px) {

  :root {
    --ujs_menu_height: 62px; /* 実際のグローバルナビの高さをここに入れてください */
    --ujs_text_height: 20px;
  }

  .device-pc .global-nav-list>li>a {
    position: relative;
    overflow: hidden;
    padding-top: calc( var(--ujs_menu_height)  / 2 );
    padding-bottom: calc( var(--ujs_menu_height)  / 2 );
    min-width: 100px; /* 必要に応じて書き換えてください（メニューの文字数が多い場合） */
  }
  .device-pc .global-nav-list>li .global-nav-name {
    height: var(--ujs_text_height);
    position: absolute;
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2  + var(--ujs_text_height));
    opacity: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s;
  }
  .device-pc .global-nav-list>li .global-nav-description {
    font-size: 14px;
    height: var(--ujs_text_height);
    padding: 0;
    opacity: 1;
    position: absolute;
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2 );
    opacity: 1;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: all .5s;
  }
  .device-pc .global-nav-list>li>a:hover .global-nav-name {
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2 );
    opacity: 1;
  }
  .device-pc .global-nav-list>li>a:hover .global-nav-description {
    top: calc( ( var(--ujs_menu_height) - var(--ujs_text_height) )  / 2  - var(--ujs_text_height));
    opacity: 0;
  }

}

CSS の追加方法がわからない場合は以下のページが参考になります。

できる！CSSカスタマイズ

[林 有一]

対馬俊彦様

教えていただきありがとうございます。
なんせ超初心者ですので、極力カスタマイズ無しで Lightning を利用しています。
あらかじめ定義してあるvar()関数のvar(–ujs_menu_height)などが何処に定義してあるのかも判らない状態ですが、試行錯誤しながらでもチャレンジしてみたいと思っています。
また作業した内容などご報告させていただきます。
よろしくお願いいたします。

[対馬 俊彦]

> var(–ujs_menu_height)などが何処に定義してあるのかも判らない状態ですが

先頭の :root { } のところで定義してあります。

var(–ujs_menu_height) → 62px
var(–ujs_text_height) → 20px
に置き換わって計算(calc)されます。

グローバルナビの高さやフォントサイズなどをカスタマイズしてある場合に対応しやすいようにこういうやり方をしていますが、特にいじっていなければ 62px / 20px のままの設定でいけると思います。

[林 有一]

対馬俊彦様

教えていただきありがとうございます。
試行錯誤致しましたが、何とか出来ました。

まだ学習途中ですが、今後も色々とチャレンジしてみたいと思います。
今後もよろしくお願いします。

本当にありがとうございました。

[林 有一]

対馬俊彦様

前回は本当にありがとうございました。

追加の質問で申し訳ございません。
マウスホバー時の文字の色を替える事はCSSを追記してなんとか出来たのですが
メニューの下線も消したいのですが、上記CSSの何処にどの様な記述をすれば良いのかわかりません。
よろしければ教えていただけますでしょうか。

よろしくお願いいたします。

[対馬 俊彦]

林 有一 様、

このフォーラムは「一つの投稿内に複数の質問をしない」というルールになっています。
質問が複数あると、どこまで解決済みかわからなくなったり、他の人が検索するときに探しにくい、
という理由によるものです。

ということで、
「グローバルメニューのメニューの下線を消したい」という質問を新たに投稿していただくのがよいです。

【以下、追記です】

新たに投稿していただくのがよい、と書きましたが、
以下のトピックに答えがありますので、質問は不要です。

Lightning G3 でヘッダーナビの下線を消したい

[林 有一]

対馬俊彦様

教えていただきありがとうございます。

投稿するのも初めてでしたので、ルールを理解していなくて大変申し訳ございません。
教えていただいた「Lightning G3 でヘッダーナビの下線を消したい」のトピックスを参考に、無事に下線を消す事が出来ました。
本当にありがとうございました。

まだまだ暑い日が続きますが、お体ご自愛下さい。

[対馬 俊彦]

うまくいったようで、よかったです。

最初の質問に関してですが…
Evergreen のようなヘッダー透過のデザインだと、
マウスホバーでテキストが入れ替わる動きがいいカンジになりますね。
私のデモサイトでも使ってみました🥰

[林 有一]

対馬俊彦様

おはようございます。

CSSでこんな事も出来るんだぁと…改めて感激感謝しております。
本当にありがとうございました。

デモサイト閲覧してみたいです。URL教えてください。m(__)m

[対馬 俊彦]

一応営業用のデモサイトなので、ここに載せてよいのかどうか判断できませんので、
私のプロフィールに書いておきました。

[投稿者]

投稿