Severity: Notice
Message: Only variable references should be returned by reference
Filename: core/Common.php
Line Number: 257
Severity: Warning
Message: Cannot modify header information - headers already sent by (output started at /home1/murguz/public_html/system/core/Exceptions.php:185)
Filename: libraries/Session.php
Line Number: 688
Here is my next tutorial about Bootstrap. This one will be quite short. I will explain how to dynamically add active class to navigation menu items in Bootstrap using popular server side language PHP. It will be quite simple code so it can be ported to other languages easily. To complete this tutorial you will need PHP installed server. Also before you begin you might check my other tutorial about tutorial about how to get started with bootstrap and grid system.
First we will add minimal code to enable bootstrap styles and theme:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
It should be pretty familiar to you if you have used Bootstrap previously, otherwise please check previous tutorial. Next we will add navigation menu:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#home"><span class="glyphicon glyphicon-home"></span> Home</a><div></div></li>
<li><a href="#artworks"><span class="glyphicon glyphicon-picture"></span> Artworks</a><div></div></li>
<li><a href="#games"><span class="glyphicon glyphicon-tower"></span> Games</a><div></div></li>
<li><a href="#blog"><span class="glyphicon glyphicon-pencil"></span> Blog</a><div></div></li>
<li><a href="#contact"><span class="glyphicon glyphicon-envelope"></span> Contact</a><div></div></li>
</ul>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Click here to see menu in action. It is default code for navigation menu. It consists of 2 parts: button with class navbar-toggle and div with class navbar-collapse. Button is displayed in small screens where navigation menu doesn’t fit horizontally. Also take an attention to first li element which has active class. Active class highlights current menu. Lastly let's add this li elements and active class dynamically:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<?php
$active_page = 2;
$pages = array();
$pages[0] = '<a href="#home"><span class="glyphicon glyphicon-home"></span> Home</a><div></div>';
$pages[1] = '<a href="#artworks"><span class="glyphicon glyphicon-picture"></span> Artworks</a><div></div>';
$pages[2] = '<a href="#games"><span class="glyphicon glyphicon-tower"></span> Games</a><div></div>';
$pages[3] = '<a href="#blog"><span class="glyphicon glyphicon-pencil"></span> Blog</a><div></div>';
$pages[4] = '<a href="#contact"><span class="glyphicon glyphicon-envelope"></span> Contact</a><div></div>';
foreach($pages as $page=>$content){
$li_str = '<li>';
if($page == $active_page){
$li_str = '<li class="active">';
}
$li_str .= $content.'</li>';
echo $li_str;
}
?>
</ul>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Here you can see final result. So first we make variable to hold current page number. As php starts counting from zero, 2 will be third element which is “Games” page. Then we make an array named pages to store all links. Finally we go through all menu items and nest them inside li tags, while making sure we add active class to current page as well.
That’s all for now, please let us know what you think. More stuff coming soon.
August 02,2014
Admin
Category: Web Design
Rate: