[ 解決済 ] menuと表示する方法

このトピックには6件の返信、2人の参加者があり、最後にmomoにより3年、 6ヶ月前に更新されました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)

投稿者

投稿
2021年5月4日 12:07 PM #51378

momo
閲覧者

ベクトルさんのサイトはハンバーガーメニューにmenuと表示されますが、真似してみる場合は、どうすると良いでしょうか？

ベクトルさんのメニューのイメージを添付写真にします。

Attachments:
You must be logged in to view attached files.

該当URL : https://*********
※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

2021年5月4日 2:00 PM #51380
対馬俊彦
参加者
制作実績
ベクトルさんのサイトのテーマは Lightning ではなく、Katawara です。

Katawara はなにもしなくても MENU の文字が表示されます。

> 真似してみる場合は、どうすると良いでしょうか？

テーマを変更しましょう… だとご期待の回答にはならないと思いますので、
Lightning で MENU の文字を表示する CSS を考えてみました。

これでいけると思います。
```
.vk-mobile-nav-menu-btn {
  text-indent: 2px;
  font-size: 10px;
  padding-top: 28px;
  overflow: visible;
  border: none;
}
.vk-mobile-nav-menu-btn.menu-open {
  border: none;
}
```
2021年5月4日 3:03 PM #51381

momo
閲覧者

対馬様

お陰様で大成功です。期待通りになりました。
現在G3β利用中にて子テーマは使ってないので、追加CSSに入れて見ました。

そして私が見たのはkatawaraだったのですね。
この時、スマホで見ていたので気が付きませんでした。

お察しいただいた上でのご回答ありがとうございました。

2021年5月4日 3:47 PM #51382

対馬俊彦
参加者
制作実績

念のため、補足です。

MENU ボタンを上部に表示する場合はこれで OK ですが、
設定を変えて下部に表示するとおかしな位置になってしまいます。

そこまで考慮した CSS にはなっていませんので、
このトピックを見てやってみる方はご注意ください。

2021年5月11日 4:19 PM #51710

momo
閲覧者

対馬様、追記もありがとうございました。
私の場合は、今回の形で満足しておりますので、これ以上のカスタマイズは致しません。

現在G3用の子テーマが無いので、追加CSSでこの形のmenuを取っておりますが、将来G3子テーマがダウンロード可能になったら子テーマに入れて半永久的に使わせていただきます。

子テーマは使わないで、すっぴんのLightningでと時々思うのですが、やっぱり子テーマが私のレベルですらも必要ですね。

2021年5月23日 11:56 AM #52164
対馬俊彦
参加者
制作実績
先日、Lightning で Katawara のように MENU を表示する CSS を提示しましたが、
自分でも G3 で制作中のサイトでこのやり方を採用して、以下のことに気がつきました。
- 背景が濃色だと見た目が残念
- 開いたモバイルナビがボタンに近すぎる
上記の点を調整した CSS がこちらです。
```
.vk-mobile-nav-menu-btn {
  text-indent: 2px;
  font-size: 10px;
  padding-top: 26px;
  overflow: visible;
  border: none;
  background-position: top;
  height: 40px;
}
.vk-mobile-nav-menu-btn.menu-open {
  border: none;
}
.vk-mobile-nav {
  padding-top: 50px;
}
```
2021年5月23日 5:12 PM #52167

momo
閲覧者

対馬様
私は問題を感じずに愛用させて頂いてましたが、早速、新バージョンに差し替えさせて頂きました。
ありがとうございます。
投稿者

投稿