Foundation navigation components

This namespace contains object oriented PHP implementations of Foundation navigation components.

Menus implementing Menu interface

Foundation based menus are flexible, all-purpose components for responsive navigation. All implementations of a Menu interface are comprised of <ul> HTML tags filled with <li> tags containing links and test. By default, Menus are horizontally oriented.

The FlexibleMenu class

FlexibleMenu implements three Foundation navigation menu patterns. These menu patterns are created by using following static methods

The FlexibleMenu component

The FlexibleMenu component provides navigation for the entire site, or for sections of an individual page.

Accessibility: Using the Tab button, a user can navigate until they've reached the link below. (Shift+Tab to navigate back one step.)

Foundation bars: simple wrappers around flexible menu components

This namespace contains classes and interfaces for Foundation navigation bars. Navigation bars can be used with menus implemented in Sphp\Html\Foundation\Sites\Navigation namespace components.

A bar component has a left-hand section AbstractBar::left() and a right-hand section AbstractBar::right(). On small screens, these sections stack on top of each other.

  • PHP code
    1. <?php
    2.  
    3.  
    4. namespace Sphp\Html\Foundation\Sites\Navigation;
    5.  
    6. use Sphp\Html\Foundation\Sites\Navigation\MenuBuilder;
    7. use Sphp\Html\Apps\Forms\SiteSearch360FormBuilder;
    8. use Sphp\Html\Adapters\QtipAdapter;
    9. use Sphp\Html\Foundation\Sites\Core\ThrowableCalloutBuilder;
    10.  
    11. try {
    12.  
    13.   $navi = new Bars\ResponsiveBar();
    14.   $redirect = filter_input(INPUT_SERVER, 'REDIRECT_URL', FILTER_SANITIZE_URL);
    15.   $leftDrop = new FlexibleMenu();
    16.   $leftDrop->attributes();
    17.   $leftDrop->addCssClass('vertical medium-horizontal menu');
    18.   $leftDrop->setAttribute('data-responsive-menu','drilldown medium-dropdown');
    19.   $leftDrop->appendSubMenu()->setVertical(true)->setRoot('Foo')->appendLink('#foobar','FooBar');
    20.   $leftDrop->appendSubMenu()->setVertical(true)->setRoot('Bar')->appendLink('#foobar','FooBar');
    21.   $leftDrop->appendSubMenu()->setVertical(true)->setRoot('Baz')->appendLink('#foobar','FooBar');
    22.   $navi->topbar()->left()->append($leftDrop);
    23.  
    24.   $form = new SiteSearch360FormBuilder('playground.samiholck.com');
    25.   $form->getSearchField()->setPlaceholder('Search Manual');
    26.  
    27.   //(new QtipAdapter($form->getSubmitButton()))->setQtipPosition('bottom right', 'top center')->setViewport($navi->topbar()->right());
    28.   $navi->topbar()->right()->append($form->buildMenuForm());
    29.  
    30.   $navi->printHtml();
    31. } catch (\Exception $e) {
    32.   echo ThrowableCalloutBuilder::build($e, true, true);
    33. }
    34.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

The BreadCrumbs container for BreadCrumb components

In general the graphical control element Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents from Wikipedia.

The graphical control element {@link self} is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents.

This component shows a navigation trail for users clicking through a site or app. They'll fill out 100% of the width of their parent container.

The BreadCrumbs component is a container for individual BreadCrumb components whereas A BreadCrumb is basically just an implementation of Hyperlink.

A BreadCrumbs instance shows a horizontal navigation trail of individual BreadCrumb components. Thi component will fill out 100% of the width of its parent container.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Navigation\Breadcrumbs;
    4.  
    5. $root = "http://playground.samiholck.com";
    6. $bc = new BreadCrumbs();
    7.         $bc->appendLink('/Sphp.Html.Foundation.Sites.Navigation', 'F6 navigation');
    8.         $bc->append('test')->setDisabled();
    9.         $bc->append(new BreadCrumb("$root/namespace-Sphp.Html.Foundation.html", "Foundation", "test"));
    10. $bc->append( BreadCrumb::link("/namespace-Sphp.Html.Foundation.Navigation.html", "Navigation", "test"));
    11. $bc->prepend( BreadCrumb::link('/', "ApiGen", "test"));
    12. $bc->appendLink("/class-Sphp.Html.Foundation.Navigation.BreadCrumbs.html", "BreadCrumbs", "test");
    13. $bc->printHtml();
    14.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow

The Pagination component

Pagination is a type of navigation component that lets users tap through a series of related pages. Moving between pages has become less common with the advent of longer pages and AJAX loading.

  • PHP code
    1. <?php
    2.  
    3. namespace Sphp\Html\Foundation\Sites\Navigation\Pagination;
    4.  
    5. use Sphp\Stdlib\Strings;
    6.  
    7. $pages = array_fill(1, 99, 'javascript:void();');
    8.  
    9.  
    10. $slice = array_slice($pages, 5, 10, true);
    11. $pagination = new Pagination();
    12. foreach ($slice as $index => $url) {
    13.   $pagination->setPage($index, $url);
    14. }
    15. $pagination->setPage(45, $url);
    16. $pagination->getPage(7)->setCurrent(true);
    17. $pagination->getPage(8)->disable(true);
    18. $pagination->setPrevious("javascript:alert('previous');", 'Previous');
    19. $pagination->setNext("javascript:alert('next');", 'Next');
    20. $pagination->printHtml();
    21.  
    22. $pagination1 = new Pagination();
    23. $letters = Strings::toArray('foobar');
    24.  
    25. foreach ($letters as $index => $letter) {
    26.   $pagination1->setPage($index + 6, "javascript:alert('" . $letter . "');", $letter);
    27. }
    28. $pagination1->getPage(9)->setCurrent();
    29.  
    30. $pagination1->getPage(7)->disable();
    31. $pagination1->insertPage(new Page("javascript:alert('is');", 'is'));
    32.  
    33. $pagination1->printHtml();
    34.  
    Highlighted with GeSHi 1.0.9.1
  • Execution result as HTML5 flow