adamb / navigation
从多维数组创建导航菜单
1.3.6
2020-10-08 15:59 UTC
Requires (Dev)
This package is auto-updated.
Last update: 2024-09-21 23:19:49 UTC
README
从PHP数组创建HTML导航菜单和面包屑菜单
安装
安装可以通过Composer/Packagist进行,您可以将以下行添加到您的composer.json
文件中
"adamb/navigation": "^1.0"
或
composer require adamb/navigation
特性
- 从PHP数组构建HTML导航
- 可以从多维数组构建多维菜单
- 创建面包屑菜单
- 可自定义HTML类
- 更改当前选中项(如果不是当前页面)
许可证
本软件在MIT许可证下分发。请阅读LICENSE以了解软件可用性和分发信息。
使用方法
菜单和面包屑可以从简单的数组或多维数组创建
基本导航菜单
PHP代码
require 'src/navigation.php'; use Nav\Navigation; $menu = array( 'Home' => '/', 'Link Text' => '/link-2', 'Sample' => '/sample', 'Another Page' => '/yet-another-link', 'Google' => 'https://www.google.co.uk', 'Final Link' => '/final-page', ); // For this example we are saying we are on the home page of the website // You should use something like $_SERVER['REQUEST_URI'] or filter_input(INPUT_SERVER, 'REQUEST_URI', FILTER_SANITIZE_URL) $currentURI = '/'; $navigation = new Navigation($menu, $currentURI); echo($navigation->createNavigation());
输出
<ul class="nav navbar-nav"> <li class="active"><a title="Home" class="active">Home</a></li> <li><a href="/link-2" title="Link Text">Link Text</a></li> <li><a href="/sample" title="Sample">Sample</a></li> <li><a href="/yet-another-link" title="Another Page">Another Page</a></li> <li><a href="https://www.google.co.uk" title="Google">Google</a></li> <li><a href="/final-page" title="Final Link">Final Link</a></li> </ul>
多级导航菜单
PHP代码
require 'src/navigation.php'; use Nav\Navigation; $menu = array( 'Home' => '/', 'Link Text' => '/link-2', 'Sample Submenu' => '/sample', array( 'Sub item 1' => '/sub-pages/subpage1', 'Sub item 2' => '/sub-pages/subpage2', 'Has another level' => '/sub-pages/has-sub-pages', array( 'Final Level' => '/sub-sub-pages/final-sub-level', 'Hello World' => '/sub-sub-pages/hello-world', ), ), 'Another Page' => '/yet-another-link', 'Google' => 'https://www.google.co.uk', 'Final Link' => '/final-page', ); $currentURI = '/sub-sub-pages/hello-world'; // $_SERVER['REQUEST_URI'] $navigation = new Navigation($menu, $currentURI); echo($navigation->createNavigation());
输出
<ul class="nav navbar-nav"> <li><a href="/" title="Home">Home</a></li> <li><a href="/link-2" title="Link Text">Link Text</a></li> <li class="active"><a href="/sample" title="Sample Submenu" class="active">Sample Submenu</a> <ul> <li><a href="/sub-pages/subpage1" title="Sub item 1">Sub item 1</a></li> <li><a href="/sub-pages/subpage2" title="Sub item 2">Sub item 2</a></li> <li class="active"><a href="/sub-pages/has-sub-pages" title="Has another level" class="active">Has another level</a> <ul> <li><a href="/sub-sub-pages/final-sub-level" title="Final Level">Final Level</a></li> <li class="active"><a href="/sub-sub-pages/hello-world" title="Hello World" class="active">Hello World</a></li> </ul> </li> </ul> </li> <li><a href="/yet-another-link" title="Another Page">Another Page</a></li> <li><a href="https://www.google.co.uk" title="Google">Google</a></li> <li><a href="/final-page" title="Final Link">Final Link</a></li> </ul>
面包屑菜单
PHP代码
require 'src/navigation.php'; use Nav\Navigation; $menu = array( 'Home' => '/', 'Link Text' => '/link-2', 'Sample Submenu' => '/sample', array( 'Sub item 1' => '/sub-pages/subpage1', 'Sub item 2' => '/sub-pages/subpage2', 'Has another level' => '/sub-pages/has-sub-pages', array( 'Final Level' => '/sub-sub-pages/final-sub-level', 'Hello World' => '/sub-sub-pages/hello-world', ), ), 'Another Page' => '/yet-another-link', 'Google' => 'https://www.google.co.uk', 'Final Link' => '/final-page', ); $currentURI = '/sub-sub-pages/hello-world'; // $_SERVER['REQUEST_URI'] $navigation = new Navigation($menu, $currentURI); // Example 1 echo($navigation->createBreadcrumb()); // Example 2 echo($navigation->setBreadcrumbElement('ol')->createBreadcrumb(true, 'my-bc-class', 'bc-item')); // Example 3 echo($navigation->setBreadcrumbElement('nav')->createBreadcrumb()); // Example 4 echo($navigation->createBreadcrumb(false));
输出
// Example 1 <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li> <li class="breadcrumb-item"><a href="/sample" title="Sample Submenu">Sample Submenu</a></li> <li class="breadcrumb-item"><a href="/sub-pages/has-sub-pages" title="Has another level">Has another level</a></li> <li class="breadcrumb-item active">Hello World</li> </ul> // Exmaple 2 <ol class="my-bc-class"> <li class="bc-item"><a href="/" title="Home">Home</a></li> <li class="bc-item"><a href="/sample" title="Sample Submenu">Sample Submenu</a></li> <li class="bc-item"><a href="/sub-pages/has-sub-pages" title="Has another level">Has another level</a></li> <li class="bc-item active">Hello World</li> </ol> // Example 3 <nav class="breadcrumb"> <a href="/" title="Home" class="breadcrumb-item">Home</a> <a href="/sample" title="Sample Submenu" class="breadcrumb-item">Sample Submenu</a> <a href="/sub-pages/has-sub-pages" title="Has another level" class="breadcrumb-item">Has another level</a> <span class="breadcrumb-item active">Hello World</span> </nav> // Example 4 <a href="/" title="Home">Home</a> > <a href="/sample" title="Sample Submenu">Sample Submenu</a> > <a href="/sub-pages/has-sub-pages" title="Has another level">Has another level</a> > Hello World
更改HTML类/导航ID
您可以通过以下命令更改导航和面包屑项的默认类元素
PHP代码
require 'src/navigation.php'; use Nav\Navigation; $menu = array( 'Home' => '/', 'Link Text' => '/link-2', 'Sample Submenu' => '/sample', array( 'Sub item 1' => '/sub-pages/subpage1', 'Sub item 2' => '/sub-pages/subpage2', 'Has another level' => '/sub-pages/has-sub-pages', array( 'Final Level' => '/sub-sub-pages/final-sub-level', 'Hello World' => '/sub-sub-pages/hello-world', ), ), 'Another Page' => '/yet-another-link', ); $navigation = new Navigation($menu, '/sub-sub-pages/hello-world'); $navigation->setActiveClass('current-item c-item') ->setNavigationClass('my-nav-class') ->setNavigationID('my-unique-navigation-id') ->setDropDownClass('my-drop-down-class drop-down'); echo($navigation->createNavigation());
输出
<ul id="my-unique-navigation-id" class="my-nav-class"> <li><a href="/" title="Home">Home</a></li> <li><a href="/link-2" title="Link Text">Link Text</a></li> <li class="current-item c-item"><a href="/sample" title="Sample Submenu" class="current-item c-item">Sample Submenu</a> <ul class="my-drop-down-class drop-down"> <li><a href="/sub-pages/subpage1" title="Sub item 1">Sub item 1</a></li> <li><a href="/sub-pages/subpage2" title="Sub item 2">Sub item 2</a></li> <li class="current-item c-item"><a href="/sub-pages/has-sub-pages" title="Has another level" class="current-item c-item">Has another level</a> <ul class="my-drop-down-class drop-down"> <li><a href="/sub-sub-pages/final-sub-level" title="Final Level">Final Level</a></li> <li class="current-item c-item"><a href="/sub-sub-pages/hello-world" title="Hello World" class="current-item c-item">Hello World</a></li> </ul> </li> </ul> </li> <li><a href="/yet-another-link" title="Another Page">Another Page</a></li> </ul>
附加功能
您还可以选择从任何级别开始显示给定数量的导航级别
PHP代码
require 'src/navigation.php'; use Nav\Navigation; $menu = array( 'Home' => '/', 'Link Text' => '/link-2', 'Sample Submenu' => '/sample', array( 'Sub item 1' => '/sub-pages/subpage1', 'Sub item 2' => '/sub-pages/subpage2', 'Has another level' => '/sub-pages/has-sub-pages', array( 'Final Level' => '/sub-sub-pages/final-sub-level', 'Hello World' => '/sub-sub-pages/hello-world', ), ), 'Another Page' => '/yet-another-link', 'Google' => 'https://www.google.co.uk', 'Final Link' => '/final-page', ); $navigation = new Navigation($menu, '/sub-sub-pages/hello-world'); // Example 1 $levels = 1; echo($navigation->createNavigation($levels)); // Example 2 $levels = 2; $start_level = 1; echo($navigation->createNavigation($levels, $start_level));
输出
// Example 1 // Only displays the top menu level <ul class="nav navbar-nav"> <li><a href="/" title="Home">Home</a></li> <li><a href="/link-2" title="Link Text">Link Text</a></li> <li class="active"><a href="/sample" title="Sample Submenu" class="active">Sample Submenu</a></li> <li><a href="/yet-another-link" title="Another Page">Another Page</a></li> <li><a href="https://www.google.co.uk" title="Google">Google</a></li> <li><a href="/final-page" title="Final Link">Final Link</a></li> </ul> // Example 2 // Display 2 levels of the navigation starting at level 1 (the first sub level of the current item) <ul class="nav navbar-nav"> <li><a href="/sub-pages/subpage1" title="Sub item 1">Sub item 1</a></li> <li><a href="/sub-pages/subpage2" title="Sub item 2">Sub item 2</a></li> <li class="active"><a href="/sub-pages/has-sub-pages" title="Has another level" class="active">Has another level</a> <ul> <li><a href="/sub-sub-pages/final-sub-level" title="Final Level">Final Level</a></li> <li class="active"><a href="/sub-sub-pages/hello-world" title="Hello World" class="active">Hello World</a></li> </ul> </li> </ul>