Team Lead
Sales Associate
Business System Analyst
<?php require_once '../lib/Kendo/Autoload.php'; $panelbar = new \Kendo\UI\PanelBar('panelbar'); $panelbar->expandMode('single'); $teamMates = new \Kendo\UI\PanelBarItem(); $teamMates->text('My Teammates') ->expanded(true) ->startContent(); ?> <div style="padding: 10px;"> <div class="teamMate"> <img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller"> <h2>Andrew Fuller</h2> <p>Team Lead</p> </div> <div class="teamMate"> <img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling"> <h2>Nancy Leverling</h2> <p>Sales Associate</p> </div> <div class="teamMate"> <img src="../content/web/panelbar/robert.jpg" alt="Robert King"> <h2>Robert King</h2> <p>Business System Analyst</p> </div> </div> <?php $teamMates->endContent(); $panelbar->addItem($teamMates); $projects = new \Kendo\UI\PanelBarItem(); $projects->text('Projects') ->addItem(new \Kendo\UI\PanelBarItem('New Business Plan')); $panelbar->addItem($projects); $forecasts = new \Kendo\UI\PanelBarItem(); $forecasts->text('Sales Forecasts') ->addItem(new \Kendo\UI\PanelBarItem('Q1 Forecast')) ->addItem(new \Kendo\UI\PanelBarItem('Q2 Forecast')) ->addItem(new \Kendo\UI\PanelBarItem('Q3 Forecast')) ->addItem(new \Kendo\UI\PanelBarItem('Q4 Forecast')); $projects->addItem($forecasts) ->addItem(new \Kendo\UI\PanelBarItem('Sales Reports')); $programs = new \Kendo\UI\PanelBarItem('Programs'); $programs->addItem(new \Kendo\UI\PanelBarItem('Monday')) ->addItem(new \Kendo\UI\PanelBarItem('Tuesday')) ->addItem(new \Kendo\UI\PanelBarItem('Wednesday')) ->addItem(new \Kendo\UI\PanelBarItem('Thursday')) ->addItem(new \Kendo\UI\PanelBarItem('Friday')); $panelbar->addItem($programs); $communication = new \Kendo\UI\PanelBarItem(); $communication->text('Communication') ->enabled(false); $panelbar->addItem($communication); echo $panelbar->render(); ?> <style> #panelbar { max-width: 400px; margin: 0 auto; } .teamMate:after { content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden; } .teamMate h2 { font-size: 1.4em; font-weight: normal; padding-top: 20px; } .teamMate p { margin: 0; } .teamMate img { float: left; margin: 5px 15px 5px 5px; border: 1px solid #ccc; border-radius: 50%; } </style>