php后管理分类导航菜单，php分类导航菜单-php手册-php.cn

Table of Contents

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

Home

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 08:54 AM

Navigation menu

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<!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>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7338

Java Tutorial

1627

CakePHP Tutorial

1352

Laravel Tutorial

1265

PHP Tutorial

1210

Related knowledge

How to implement permission based navigation menu in Laravel Nov 02, 2023 pm 06:52 PM

As websites and applications become more functionally complex, permission management becomes critical. When a user logs in through authentication, we want them to be able to access pages and features to which they have permission, but not to pages and features to which they do not have permission. This article will explain how to implement a permission-based navigation menu in Laravel so that we can easily control what the user can see. Step 1: Install Laravel and configure the database If you are already familiar with Laravel, you can skip this step. Otherwise, please follow the

How to use JavaScript to achieve the highlight effect of scrolling the navigation menu to a specified position? Oct 19, 2023 am 09:46 AM

How to use JavaScript to achieve the highlight effect of scrolling the navigation menu to a specified position? The navigation menu is one of the common components in web design. In order to improve the user experience, we can use JavaScript to achieve the highlighting effect when the navigation menu scrolls to a specified position. In this way, as the user scrolls through the page, the navigation menu will update in real time to show the current location. The key to achieving this effect is to monitor the page scroll event and determine the relationship between the current scroll position and the specified position. Below, we will

How to use navigation menu in ThinkPHP6 Jun 21, 2023 am 08:03 AM

With the development of the Internet, websites are becoming more and more complex, their functions are becoming more and more abundant, and users' needs are becoming more and more diversified. In order to facilitate users to quickly locate the required functions, the navigation menu has become an indispensable element. How to use the navigation menu in ThinkPHP6? This article will introduce you step by step. 1. Create a navigation menu data table. In ThinkPHP6, we can use a database to store navigation menu information. First, we need to create a navigation menu data table. The specific table structure is as follows: CREAT

HTML, CSS and jQuery: Make a beautiful navigation menu Oct 24, 2023 am 08:23 AM

HTML, CSS and jQuery: Make a beautiful navigation menu Navigation menu plays a very important role in web design. It not only provides navigation functions for visitors, but also increases the user experience of the website. This article will introduce how to use HTML, CSS and jQuery to make a beautiful navigation menu, with specific code examples. 1. HTML structure First, we need to use HTML to create the structure of the navigation menu. Here is a simple HTML navigation menu template: <n

HTML, CSS and jQuery: Create a navigation menu drop-down animation effect Oct 27, 2023 pm 03:22 PM

HTML, CSS and jQuery: Create a navigation menu drop-down animation effect. In web development, an attractive page effect can increase users' favorability of the website and improve user experience. Among them, menu navigation is one of the common elements in websites. We can add animation effects to increase the interactive effect of menus and make the website more vivid. In this article, we will use HTML, CSS, and jQuery to create a navigation menu with drop-down animation effects. Through the following steps, you will learn how to use this

How to implement a smooth scrolling navigation menu on a web page through pure CSS Oct 20, 2023 pm 04:22 PM

How to implement a smooth scrolling navigation menu on a web page through pure CSS. Guiding users to navigate in a web page is an important design element, and a smooth scrolling navigation menu is a way to provide a user-friendly navigation experience. This article will introduce how to implement such a navigation menu through pure CSS and provide corresponding code examples. 1. HTML structure First, we need to create the basic structure of the navigation menu in HTML. Here's a simple example: <navclass="smooth-scr

Implementation steps for implementing responsive navigation menu using pure CSS Oct 21, 2023 am 08:30 AM

Pure CSS is a quick way to create responsive navigation menus without using JavaScript. In this article, we’ll provide you with detailed steps to implement a responsive navigation menu, with concrete code examples. Step 1: HTML Structure First, we need to set up the HTML structure of the navigation menu. Here's a simple example:<navclass="navbar"><ulclass="menu&q

HTML, CSS and jQuery: Make a first-level navigation menu with animation effects Oct 27, 2023 pm 12:31 PM

HTML, CSS and jQuery: Create a first-level navigation menu with animated effects In web design and development, the navigation menu is a very important component. A good navigation menu can provide a clear navigation structure and a good user experience. In this article, we will create an animated first-level navigation menu using HTML, CSS, and jQuery. 1. HTML structure First, we need to establish the HTML structure of the navigation menu. Here's a simple example: <na

See all articles