スライドドアを実装するための CSS サンプルコード

スライドドアを実装するための CSS サンプルコード

いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的に伸縮できることを意味します。つまり、テキストが増えると背景も長く表示されます。

それらのほとんどは、WeChat ナビゲーション バーなどのナビゲーション バーで使用されます。

具体的な実施方法は以下の通りです。

1. まず、テキストコンテンツはタグとスパンタグで構成されています

<a href="#">
        <span></span>
    </a>

2. a タグは高さのみを指定し、幅は指定しません。

3. a タグで背景画像を設定した後、左の半円と同じサイズの padding-left 値を指定します (これにより、左の背景は変更されず、中央の背景を引き伸ばすことができます)。

4. spanタグは、幅を指定せずに背景画像も指定し、画像の右半分を表示するためにpadding-right値を指定します(画像の位置が右に設定されている場合)。

具体的なコードは次のとおりです。

{
            色: 白;
            行の高さ: 33px;
            マージン: 100px;
            表示: インラインブロック;
            テキスト装飾: なし;
            /* a は幅を指定できません*/
            /* */
            高さ: 33px;
            背景: url(Images/vx.png) 繰り返しなし;
            左パディング: 15px;
        }
        
        スパンの
            表示: インラインブロック;
            高さ: 33px;
            背景: url(Images/vx.png) 繰り返しなし 右;
            右パディング: 15px;
        }

spanの背景は右に指定する必要があります

 <a href="#">
        <span>一</span>
    </a>
    <a href="#">
        <span>一文</span>
    </a>
    <a href="#">
        <span>一文</span>
    </a>
    <a href="#">
        <span>長い文章</span>
    </a>
    <a href="#">
        <span>超超超超超長い文章</span>
    </a>

結果は次のように表示されます

span タグ内のテキストの長さが変わると、背景画像が伸びることがわかります。

要約する

上記は、私が紹介した CSS でスライドドアを実装する方法のサンプルコードです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  HTML チュートリアル: よく使われる HTML タグのコレクション (6)

>>:  Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します

推薦する

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例

MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例最近のプロ...

Linux システムで grub.cfg ファイルの破損を修復する手順

目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...

HTML タグのカスタム属性に関する質問

以前の開発では、クラス、名前などの HTML のデフォルト属性を使用していました。 Huawei社の...

Vue のレスポンシブ原則と双方向データの詳細な分析

応答性を実現するための object.defineProperty の理解observe/watch...

dockerを使用してdubboプロジェクトをデプロイする方法

1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...

nginx を使用したプロキシ サーバーの設定

Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...

JavaScript での正規表現の使用について詳しく学ぶ

目次1. 正規表現とは何か1. 正規表現の特徴2. 正規表現の使用2. 正規表現における特殊文字1....

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

MySQL準備原理の詳細な説明

準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...

MySqlのインストールとログインの詳細な説明

LinuxにMySQLがすでにインストールされているかどうかを確認する sudo service m...

Linux での i3 ウィンドウ マネージャーの設定と使用に関するチュートリアル

この記事では、Fedora 28 に i3 をインストールして簡単に設定する方法を説明します。 1....

CentOS 8 に MariaDB をインストールするための詳細なチュートリアル

MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...

React Native が「NSArray<id<RCTBridgeModule>>型のパラメータを初期化できません」というエラーを報告する (解決方法)

最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...

PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します

xhtml+css のウェブサイト再構築、ウェブ標準などについては、記事が多すぎるので繰り返しません...

portainer を使用してリモート docker に接続するチュートリアル

Portainer は、Docker ホストと Docker Swarm クラスターの管理に使用でき...