PHP Classes
elePHPant
Icontem

File: Guide/navbar.php

Recommend this page to a friend!
  Classes of Jorge Cobis  >  PHP Bootstrap Helpers  >  Guide/navbar.php  >  Download  
File: Guide/navbar.php
Role: Example script
Content type: text/plain
Description: Example script
Class: PHP Bootstrap Helpers
Generate HTML pages programatically with Bootstrap
Author: By
Last change: General namespace refactoring
Date: 4 years ago
Size: 19,249 bytes
 

 

Contents

Class file image Download
<?php

/*
 * BootHelp - PHP Helpers for Bootstrap
 *
 * (The MIT License)
 *
 * Copyright (c) 2015 Jorge Cobis <jcobis@gmail.com / http://twitter.com/cobisja>.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

use cobisja\BootHelp\BootHelp;
use cobisja\BootHelp\Guide\Sample;

$navbar = [
    'title'=>'Navbars',
    'samples'=>[
        [
            'name'=> 'Basic navbars',
            'description'=>'Use <code>navbar</code> without options to display a basic navbar.
Wrap the content that should always be visible (no matter the screen size) with the <code>vertical</code> helper.
Wrap the content that should be collapsed for small screen sizes with the <code>horizontal</code> helper. Try resizing your browser!!!',
            'php_code'=> "echo BootHelp::navbar(function(){
    return [
        BootHelp::vertical(function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(function(){
            return BootHelp::nav(['class'=>'navbar-right'], function(){
                return
                    BootHelp::link_to('Profile') .
                    BootHelp::link_to('Settings');
            });
        })
    ];
});",
            'result'=> BootHelp::navbar(function(){
    return [
        BootHelp::vertical(function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(function(){
            return BootHelp::nav(['class'=>'navbar-right'], function(){
                return
                    BootHelp::link_to('Profile') .
                    BootHelp::link_to('Settings');
            });
        })
    ];
}),
            'html_code'=>'<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-4880904" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
        <div id="navbar-collapse-4880904" class="collapse navbar-collapse">
            <ul class="navbar-right nav navbar-nav">
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Navbars with inverted colors',
            'description'=>'Use the <code>inverted</code> option to invert the palette of colors of the navbar.',
            'php_code'=> "echo BootHelp::navbar(['inverted'=>true], function(){
    return BootHelp::vertical(function(){
        return BootHelp::link_to('Home');
    });
});",
            'result'=> BootHelp::navbar(['inverted'=>true], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
            'html_code'=>'<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-8690626" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Navbars with a fluid container',
            'description'=>'Use the <code>fluid</code> option for a full width navbar, spanning the entire width of your viewport.',
            'php_code'=> "echo BootHelp::navbar(['fluid'=>true], function(){
    return BootHelp::vertical(function(){
        return BootHelp::link_to('Home');
    });
});",
            'result'=> BootHelp::navbar(['fluid'=>true], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
            'html_code'=>'<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-5202644" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Static navbars',
            'description'=>'Use the <code>["position"=> "static"]</code> option to have the navbar scroll away with the page.',
            'php_code'=> "echo BootHelp::navbar(['position'=>'static'], function(){
    return BootHelp::vertical(function(){
        return BootHelp::link_to('Home');
    });
});",
            'result'=> BootHelp::navbar(['position'=>'static'], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
            'html_code'=>'<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-4716800" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Navbar fixed to top',
            'additional_info'=> '<p>' . BootHelp::button('Show navbar', ['class'=>'navbar-top-toggle']) . '</p>',
            'description'=>'Use the <code>["position"=> "top"]</code> option to fix the navbar at the top of the page.
Set the <code>padding</code> option to specify the padding to leave between the top of the page and the body (defaults to 70px).',
            'php_code'=> "echo BootHelp::navbar(['position'=>'top'], function(){
    return BootHelp::vertical(function(){
        return BootHelp::link_to('Home');
    });
});",
            'result'=> BootHelp::navbar(['position'=>'top', 'data-navbar'=>'top'], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
            'html_code'=>'<style>body {padding-top: 70px}</style>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-6453944" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Navbar fixed to bottom',
            'additional_info' => '<p>' . BootHelp::button('Show navbar', ['class'=>'navbar-bottom-toggle']) . '</p>',
            'description'=>'Use the <code>["position"=> "bottom"]</code> option to fix the navbar at the top of the page.
Set the <code>padding</code> option to specify the padding to leave between the body and the bottom of the page (defaults to 70px).',
            'php_code'=> "echo BootHelp::navbar(['position'=>'bottom', 'padding'=>100], function(){
    return BootHelp::vertical(function(){
        return BootHelp::link_to('Home');
    });
});",
            'result'=> BootHelp::navbar(['position'=>'bottom', 'padding'=>100, 'data-navbar'=>'bottom'], function(){return BootHelp::vertical(function(){return BootHelp::link_to('Home');});}),
            'html_code'=>'<style>body {padding-bottom: 100px}</style>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-8602652" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Navbar with Dropdowns - Option 1',
            'description'=>'Dropdowns into Navbar has a different behaviour. Instead to build a Button to trigger the
    the dropdown menu, a Link (<code>"a" tag</code>) is generated. So, to get a Dropdown into a Navbar just define the dropdown
    as any other Navbar item.',
            'php_code'=> "echo BootHelp::navbar(function() {
    return [
        BootHelp::vertical(function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(function(){
            return [
                BootHelp::nav(function(){return BootHelp::link_to('TV series');}),
                Boothelp::dropdown('Menu', function(){
                    return [
                        BootHelp::link_to('The walking dead'),
                        BootHelp::link_to('Scorpion'),
                        BootHelp::divider(),
                        BootHelp::link_to('Old series')
                    ];
                }),
                BootHelp::nav(function(){return BootHelp::link_to('About us');}),
            ];
        })
    ];
});",
            'result'=> BootHelp::navbar(function() {
    return [
        BootHelp::vertical(function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(function(){
            return [
                BootHelp::nav(function(){return BootHelp::link_to('Users');}),
                Boothelp::dropdown('TV series', function(){
                    return [
                        BootHelp::link_to('The walking dead'),
                        BootHelp::link_to('Scorpion'),
                        BootHelp::divider(),
                        BootHelp::link_to('Old series')
                    ];
                }),
                BootHelp::nav(function(){return BootHelp::link_to('About us');})
            ];
        })
    ];
}),
            'html_code'=>'<nav role="navigation" class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-1039423" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
        <div id="navbar-collapse-1039423" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Users</a></li>
            </ul>
            <div class="dropdown">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"ç>
                            TV series
                            <span class="caret"></span>
                        </a>
                        <ul aria-labelledby="label-dropdown-2259769408" role="menu" class="dropdown-menu">
                            <li><a href="#" role="menuitem">The walking dead</a></li>
                            <li><a href="#" role="menuitem">Scorpio</a></li>
                            <li class="divider"></li><li><a href="#" role="menuitem">Old series</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">About us</a></li>
            </ul>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Navbar with Dropdowns - Option 2',
            'description'=>'Maybe you want to build the <code>Dropdown</code> outside the <code>Navbar</code> and then
    put it inside the Navbar definition, to get the Navbar code cleaner. In these cases, you have to use <code>["into_navbar"=>true]</code>
    to indicates that the Dropdown is embedded the Navbar.',
            'php_code'=> "\$sub_menu = Boothelp::dropdown('Social networks', ['into_navbar'=>true], function(){
    return [
        BootHelp::link_to('The walking dead'),
        BootHelp::link_to('Scorpion'),
        BootHelp::divider(),
        BootHelp::link_to('Old series')
    ];
});
echo BootHelp::navbar(function() use (\$sub_menu) {
    return [
        BootHelp::vertical(function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(function() use (\$sub_menu) {
            return [
                BootHelp::nav(function(){return BootHelp::link_to('Users');}),
                \$sub_menu,
                BootHelp::nav(function(){return BootHelp::link_to('About us');})
            ];
        })
    ];
});",
            'result'=> BootHelp::navbar(function() {
    return [
        BootHelp::vertical(function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(function(){
            return [
                BootHelp::nav(function(){return BootHelp::link_to('Users');}),
                Boothelp::dropdown('TV series', function(){
                    return [
                        BootHelp::link_to('The walking dead'),
                        BootHelp::link_to('Scorpion'),
                        BootHelp::divider(),
                        BootHelp::link_to('Old series')
                    ];
                }),
                BootHelp::nav(function(){return BootHelp::link_to('About us');})
            ];
        })
    ];
}),
            'html_code'=>'<nav role="navigation" class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button data-target="#navbar-collapse-1039423" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
        <div id="navbar-collapse-1039423" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Users</a></li>
            </ul>
            <div class="dropdown">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"ç>
                            TV series
                            <span class="caret"></span>
                        </a>
                        <ul aria-labelledby="label-dropdown-2259769408" role="menu" class="dropdown-menu">
                            <li><a href="#" role="menuitem">The walking dead</a></li>
                            <li><a href="#" role="menuitem">Scorpion</a></li>
                            <li class="divider"></li><li><a href="#" role="menuitem">Old series</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">About us</a></li>
            </ul>
        </div>
    </div>
</nav>'
        ],
        [
            'name'=> 'Complex nabvars',
            'description'=>'You can specify a custom <code>id</code> which will be used for the navbar’s collapsable <code>div</code>.
You can also specify custom options in the <code>vertical</code> and <code>horizontal</code> helpers which will be added to their <code>div</code> tags. ',
            'php_code'=> "echo BootHelp::navbar(['id'=>'navbar'], function(){
    return [
        BootHelp::vertical(['id'=>'vertical', 'class'=>'en', 'data-js'=>1], function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(['class'=>'en', 'data-js'=>2], function(){
            return BootHelp::nav(['class'=>'navbar-left'], function(){
                return
                    BootHelp::link_to('Profile') .
                    BootHelp::link_to('Settings');
            });
        })
    ];
});",
            'result'=> BootHelp::navbar(['id'=>'navbar'], function(){
    return [
        BootHelp::vertical(['id'=>'vertical', 'class'=>'en', 'data-js'=>1], function(){
            return BootHelp::link_to('Home');
        }),
        BootHelp::horizontal(['class'=>'en', 'data-js'=>2], function(){
            return BootHelp::nav(['class'=>'navbar-left'], function(){
                return
                    BootHelp::link_to('Profile') .
                    BootHelp::link_to('Settings');
            });
        })
    ];
}),
            'html_code'=>'<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div data-js="1" class="en navbar-header" id="vertical">
            <button data-target="#navbar" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Home</a>
        </div>
        <div id="navbar" data-js="2" class="en collapse navbar-collapse">
            <ul class="navbar-left nav navbar-nav">
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </div>
    </div>
</nav>'
        ]
    ]
];

/**
 * Navbar samples.
 */
echo new Sample($navbar);