adamb/navigation

从多维数组创建导航菜单

1.3.6 2020-10-08 15:59 UTC

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> &gt; <a href="/sample" title="Sample Submenu">Sample Submenu</a> &gt; <a href="/sub-pages/has-sub-pages" title="Has another level">Has another level</a> &gt; 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>