目次
php后管理分类导航菜单,php分类导航菜单
ホームページ php教程 php手册 php后管理分类导航菜单,php分类导航菜单

php后管理分类导航菜单,php分类导航菜单

Jun 13, 2016 am 08:54 AM
ナビゲーションメニュー

php后管理分类导航菜单,php分类导航菜单

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html" charset="utf-8">
    <title>后台管理折叠导航菜单</title>
    <style><span>
        body{
            margin</span>:0<span>;
            padding</span>:0<span>;
            text</span>-align:<span>center;
            font</span>:normal 12px Arial,Verdana,<span>Tahoma;
            line</span>-height:150%<span>;
        }
        a</span>:link, a:<span>visited{
            color</span>:<span>#</span><span>385065;</span>
            text-decoration:<span>none;
        }
        a</span>:<span>hover{
            text</span>-decoration:<span>underline;
        }
        </span><span>#</span><span>menu{</span>
            width:<span>150px;
            margin</span>:0<span> 15px;
            padding</span>:0<span>;
            text</span>-align:<span>left;
            </span><span>list</span>-style:<span>none;
        }
        </span><span>#</span><span>menu .item{</span>
            background:<span>#</span><span>ccaaee;</span>
            padding:<span>0px;
            </span><span>list</span>-style:<span>none;
            border</span>:1px solid <span>#</span><span>eee;</span>
<span>        }
        a</span>.title:link, a.title:visited, a.title:<span>hover{
            display</span>:<span>block;
            color</span>:<span>#</span><span>385065;</span>
            font-weight:<span>bold;
            padding</span>:2px 0 0<span> 22px;
            width</span>:<span>128px;
            line</span>-height:<span>23px;
            cursor</span>:<span>pointer;
            text</span>-decoration:<span>none;
        }
        </span><span>#</span><span>menu .item ul{</span>
            border:1px solid <span>#</span><span>9facb7;</span>
            margin:0<span>;
            width</span>:<span>116px;
            padding</span>:<span>3px 0px 3px 30px;
            bakground</span>:<span>#</span><span>fff;</span>
            <span>list</span>-style:<span>none;
            display</span>:<span>none;
        }
        </span><span>#</span><span>menu .item ul li{</span>
            display:<span>block;
        }
    </span></style>
    <script type="text/javascript">
        <span>function</span><span> hideAllObj(){
            </span><span>var</span> items = document.getElementsByClassName("option"<span>);
            </span><span>for</span>(<span>var</span> j=0; j<items.length; j++<span>){
                items[j]</span>.style.display = "none"<span>;
            }
        }

        </span><span>function</span><span> check(){
            document</span>.getElementById("opt_1").style.display = "block"<span>;
            </span><span>var</span> items = document.getElementsByClassName("title"<span>);
            </span><span>for</span>(<span>var</span> j=0; j<items.length; j++<span>){
                items[j]</span>.onclick = <span>function</span><span>(){
                    </span><span>var</span> obj = document.getElementById("opt_" + this.<span>name);
                    </span><span>if</span>(obj.style.display != "block"<span>){
                        hideAllObj();
                        obj</span>.style.display = "block"<span>;
                    }</span><span>else</span><span>{
                        obj</span>.style.display = "none"<span>;
                    }
                }
            }
        }

        document</span>.getElementsByClassName=<span>function</span><span>(classname){
            </span><span>var</span> retnode =<span> [];
            </span><span>var</span> myclass = <span>new</span> RegExp('\\b'+classname+'\\b'<span>);
            </span><span>var</span> elem = this.getElementsByTagName('*'<span>);
            </span><span>for</span>(<span>var</span> j=0; j<elem.length; j++<span>){
                </span><span>var</span> classes = elem[j].<span>className;
                </span><span>if</span>(myclass.<span>test(classes)){
                    retnode</span>.<span>push(elem[j]);
                }
            }
            </span><span>return</span><span> retnode;
        }
    </span></script>
</head>
<body onload="check()">
<ul id="menu">
    <li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="1">用户管理</a>
    <ul id="opt_1" <span>class</span>="option">
        <li><a href="#">添加用户</a></li>
        <li><a href="#">管理用户</a></li>
    </ul>
    </li>
   <li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="2">用户管理</a>
    <ul id="opt_2" <span>class</span>="option">
        <li><a href="#">添加用户</a></li>
        <li><a href="#">管理用户</a></li>
    </ul>
    </li>
   <li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="3">用户管理</a>
    <ul id="opt_3" <span>class</span>="option">
        <li><a href="#">添加用户</a></li>
        <li><a href="#">管理用户</a></li>
    </ul>
    </li>
   <li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="4">用户管理</a>
    <ul id="opt_4" <span>class</span>="option">
        <li><a href="#">添加用户</a></li>
        <li><a href="#">管理用户</a></li>
    </ul>
    </li>


</ul>

</body>
</html>
ログイン後にコピー

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Laravelで権限ベースのナビゲーションメニューを実装する方法 Laravelで権限ベースのナビゲーションメニューを実装する方法 Nov 02, 2023 pm 06:52 PM

Web サイトやアプリケーションの機能が複雑になるにつれて、権限管理が重要になります。ユーザーが認証を通じてログインするとき、権限を持っているページや機能にはアクセスできるようにしたいが、権限を持っていないページや機能にはアクセスできないようにしたいと考えています。この記事では、ユーザーに表示される内容を簡単に制御できるように、Laravel で権限ベースのナビゲーション メニューを実装する方法を説明します。ステップ 1: Laravel をインストールし、データベースを構成する Laravel にすでに慣れている場合は、このステップをスキップできます。それ以外の場合は、次に従ってください。

JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか? JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか? Oct 19, 2023 am 09:46 AM

JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか?ナビゲーション メニューは Web デザインの一般的なコンポーネントの 1 つであり、ユーザー エクスペリエンスを向上させるために、JavaScript を使用して、ナビゲーション メニューが指定された位置にスクロールするときに強調表示効果を実現できます。このようにして、ユーザーがページをスクロールすると、ナビゲーション メニューがリアルタイムで更新され、現在の場所が表示されます。この効果を実現する鍵は、ページ スクロール イベントを監視し、現在のスクロール位置と指定された位置の関係を判断することです。以下、

ThinkPHP6 でナビゲーション メニューを使用する方法 ThinkPHP6 でナビゲーション メニューを使用する方法 Jun 21, 2023 am 08:03 AM

インターネットの発展に伴い、Webサイトの複雑化、機能の豊富化、ユーザーニーズの多様化が進んでいますが、ユーザーが必要な機能に素早くたどり着くために、ナビゲーションメニューが設けられています。欠かせない要素となっています。 ThinkPHP6 でナビゲーション メニューを使用するにはどうすればよいですか?この記事では、ステップごとに紹介します。 1. ナビゲーション メニュー データ テーブルを作成します。ThinkPHP6 では、データベースを使用してナビゲーション メニュー情報を保存できます。まず、ナビゲーション メニュー データ テーブルを作成する必要があります。具体的なテーブル構造は次のとおりです。 CREAT

HTML、CSS、jQuery: 美しいナビゲーション メニューを作成する HTML、CSS、jQuery: 美しいナビゲーション メニューを作成する Oct 24, 2023 am 08:23 AM

HTML、CSS、jQuery: 美しいナビゲーション メニューを作成する ナビゲーション メニューは、Web デザインにおいて非常に重要な役割を果たしており、訪問者にナビゲーション機能を提供するだけでなく、Web サイトのユーザー エクスペリエンスも向上させます。この記事では、HTML、CSS、jQueryを使って美しいナビゲーションメニューを作る方法を、具体的なコード例とともに紹介します。 1. HTML 構造 まず、HTML を使用してナビゲーション メニューの構造を作成する必要があります。これは単純な HTML ナビゲーション メニュー テンプレートです: &lt;n

HTML、CSS、および jQuery: ナビゲーション メニューのドロップダウン アニメーション効果を作成する HTML、CSS、および jQuery: ナビゲーション メニューのドロップダウン アニメーション効果を作成する Oct 27, 2023 pm 03:22 PM

HTML、CSS、および jQuery: ナビゲーション メニューのドロップダウン アニメーション効果を作成する Web 開発では、魅力的なページ効果により、Web サイトに対するユーザーの好感度が高まり、ユーザー エクスペリエンスが向上します。その中でも、メニュー ナビゲーションは Web サイトの一般的な要素の 1 つであり、アニメーション効果を追加して、メニューのインタラクティブな効果を高め、Web サイトをより鮮やかにすることができます。この記事では、HTML、CSS、jQuery を使用して、ドロップダウン アニメーション効果のあるナビゲーション メニューを作成します。次の手順に従って、この使用方法を学習します。

純粋な CSS を使用して Web ページにスムーズにスクロールするナビゲーション メニューを実装する方法 純粋な CSS を使用して Web ページにスムーズにスクロールするナビゲーション メニューを実装する方法 Oct 20, 2023 pm 04:22 PM

純粋な CSS を使用して Web ページにスムーズ スクロール ナビゲーション メニューを実装する方法。ユーザーが Web ページ内を移動できるようにガイドすることは重要なデザイン要素であり、スムーズ スクロール ナビゲーション メニューはユーザー フレンドリーなナビゲーション エクスペリエンスを提供する方法です。この記事では、純粋な CSS を使用してこのようなナビゲーション メニューを実装する方法を紹介し、対応するコード例を示します。 1. HTML 構造 まず、HTML でナビゲーション メニューの基本構造を作成する必要があります。簡単な例を次に示します: &lt;navclass="smooth-scr

純粋な CSS を使用してレスポンシブ ナビゲーション メニューを実装するための実装手順 純粋な CSS を使用してレスポンシブ ナビゲーション メニューを実装するための実装手順 Oct 21, 2023 am 08:30 AM

Pure CSS は、JavaScript を使用せずに応答性の高いナビゲーション メニューを簡単に作成する方法です。この記事では、応答性の高いナビゲーション メニューを実装するための詳細な手順を、具体的なコード例とともに説明します。ステップ 1: HTML 構造 まず、ナビゲーション メニューの HTML 構造を設定する必要があります。簡単な例を次に示します:&lt;navclass="navbar"&gt;&lt;ulclass="menu&q

HTML、CSS、jQuery: アニメーション効果を備えた第 1 レベルのナビゲーション メニューを作成する HTML、CSS、jQuery: アニメーション効果を備えた第 1 レベルのナビゲーション メニューを作成する Oct 27, 2023 pm 12:31 PM

HTML、CSS、および jQuery: アニメーション効果を備えた第 1 レベルのナビゲーション メニューを作成する Web デザインおよび開発において、ナビゲーション メニューは非常に重要なコンポーネントです。優れたナビゲーション メニューは、明確なナビゲーション構造と優れたユーザー エクスペリエンスを提供します。この記事では、HTML、CSS、および jQuery を使用して、アニメーション化された第 1 レベルのナビゲーション メニューを作成します。 1. HTML 構造 まず、ナビゲーション メニューの HTML 構造を確立する必要があります。簡単な例を次に示します: &lt;na

See all articles