Creating menus in Laravel

Menus are a common facet of most websites. In this recipe, we’ll create menus using
Laravel’s nested views and change the default “state” of the menu item, depending on
which page we’re on.

Getting ready

For this menu, we need a standard installation of Laravel.

How to do it…

We need to follow these steps to complete the recipe:
1. In the routes.php file, create three routes as follows:
Route::get(‘menu-one’, function()
{
return View::make(‘menu-layout’)
->nest(‘menu’, ‘menu-menu’)
->nest(‘content’, ‘menu-one’);
});
Route::get(‘menu-two’, function()
{
return View::make(‘menu-layout’)
->nest(‘menu’, ‘menu-menu’)
->nest(‘content’, ‘menu-two’);
});
Route::get(‘menu-three’, function()
{
return View::make(‘menu-layout’)
->nest(‘menu’, ‘menu-menu’)
->nest(‘content’, ‘menu-three’);
});

2. In the views directory, create a file named menu-layout.php and add the following
code to it:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Menu Example</title>
<style>
#container {
width: 1024px;
margin: 0 auto;
border-left: 2px solid #ddd;
border-right: 2px solid #ddd;
padding: 20px;
}
#menu { padding: 0 }
#menu li {
display: inline-block;
border: 1px solid #ddf;
border-radius: 6px;
margin-right: 12px;
padding: 4px 12px;
}
#menu li a {
text-decoration: none;
color: #069;
}
#menu li a:hover { text-decoration: underline
}
#menu li.active { background: #069 }
#menu li.active a { color: #fff }
</style>
</head>

<body>
<div id=”container”>
<?= $menu ?>
<?= $content ?>
</div>
</body>
</html>
3. In the views directory, create a file named menu-menu.php and add the following
code to it:
<ul id=”menu”>
<li class=”<?= Request::segment(1) == ‘menu-one’ ?
‘active’ : ” ?>”>

<?= HTML::link(‘menu-one’, ‘Page One’) ?>
</li>
<li class=”<?= Request::segment(1) == ‘menu-two’ ?
‘active’ : ” ?>”>
<?= HTML::link(‘menu-two’, ‘Page Two’) ?>
</li>
<li class=”<?= Request::segment(1) == ‘menu-three’ ?
‘active’ : ” ?>”>
<?= HTML::link(‘menu-three’, ‘Page Three’) ?>
</li>
</ul>
4. In the views directory, create three view files with the names menu-one.php,
menu-two.php, and menu-three.php.
5. For menu-one.php, use the following code:
<h2>Page One</h2>
<p>
Lorem ipsum dolor sit amet.
</p>
6. For menu-two.php, use the following code:
<h2>Page Two</h2>
<p>
Suspendisse eu porta turpis
</p>
7. For menu-three.php, use the following code:
<h2>Page Three</h2>
<p>
Nullam varius ultrices varius.
</p>

8. In the browser, go to http://{your-server}/menu-one (where your-server is
our URL) and click through the menu links.

How it works…

We begin by making three routes to hold our three pages. Each route will use a single layout
view, and nest in a menu view and a content view that are specific to the route.
Our layout view is a basic HTML skeleton with some on-page CSS. Since we want to highlight
the menu item of the current page, one of the class selectors is named active and will be
added to our menu list item.

Next, we create our menu view. We’re using an unordered list, with links to each page. To add
in the active class to our current page item, we use Request::segment(1) of Laravel to
get the route we’re on. If it’s the same as the list item, we add the active class and otherwise
leave it blank. Then we use the HTML::link() of Laravel to add in the links to our pages.
The other three views are just very simple content, with a header and a few words. Now, when
we go to the page in our browser, we’ll see the menu item of the page we’re on is highlighted,
while the others are not. If we click on a link, that item will then be highlighted and the others
will not.

Leave a Reply

Your email address will not be published. Required fields are marked *