Adding external (Menu) JavaScript, CSS and Images in a project using CodeIgniter
Filed Under ( CSS, Codeigniter, Javascript, PHP, Programming, Tutorial ) by admin on 29-07-2008
Tagged Under : Codeigniter, CSS, Javascript, PHP, Programming
Open config.php file (Under application/config folder) and change the following line
$config['base_url'] = “”;
to
$config['base_url'] = “http://localhost/cimenu”; //here cimenu is the folder where all the files of CodeIgniter is
Now open autoload.php file (Under application/config folder) and change the following line
$autoload['helper'] = array();
to
$autoload['helper'] = array(’url’, ‘form’);
Now create a folder named menu under cimenu(This is the project name) folder, that is, in your root folder. Now put all the files of the external menu to the menu folder under cimenu.
Lets create a php file and name it mymenu.php under application/controller folder and write the following code:
<?php
class Mymenu extends Controller
{
function Mymenu()
{
parent::Controller();
}
function index()
{
$this->load->view(’menuview’);
}
}
?>
In application/view folder create a php and name it as menuview.php and write the following code:
<html>
<head>
<title>My Menu</title>
</head>
<body>
<?php $this->load->view(’menu’); ?>
</body>
</html>
Now create another php file name it as menu.php in application/view folder. This is the file where all the code of your menu is. Here if you need to call any CSS, JavaScript or image you have to use <?=base_url();?> because it is your base url where all the external files is.
It this project there is one CSS and one JavaScript file in menu folder under cimenu. We can include it by the following line respectively.
<link rel=”stylesheet” type=”text/css” href=”<?=base_url();?>menu/sdmenu.css” />
<script type=”text/javascript” src=”<?= base_url();?>menu/sdmenu.js”></script>
The full menu.php code is as follows:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>My Menu</title>
<link rel=”stylesheet” type=”text/css” href=”<?=base_url();?>menu/sdmenu.css” mce_href=”<?=base_url();?>menu/sdmenu.css” />
<script type=”text/javascript” src=”<?= base_url();?>menu/sdmenu.js”></script>
</script>
<script type=”text/javascript”>
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>
<body>
<div style=”float: right” id=”my_menu” class=”sdmenu”>
<div>
<span>Admission</span>
<a href=”#” mce_href=”#”>Image Optimizer</a>
<a href=”#” mce_href=”#”>FavIcon Generator</a>
<a href=”#” mce_href=”#”>Email Riddler</a>
<a href=”#” mce_href=”#”>htaccess Password</a>
<a href=”#” mce_href=”#”>Gradient Image</a>
<a href=”#” mce_href=”#”>Button Maker</a>
</div>
<div>
<span>Exam</span>
<a href=”#” mce_href=”#”>Recommend Us</a>
<a href=”#” mce_href=”#”>Link to Us</a>
<a href=”#” mce_href=”#”>Web Resources</a>
</div>
<div class=”collapsed”>
<span>Courses</span>
<a href=”#” mce_href=”#”>JavaScript Kit</a>
<a href=”#” mce_href=”#”>CSS Drive</a>
<a href=”#” mce_href=”#”>CodingForums</a>
<a href=”#” mce_href=”#”>CSS Examples</a>
</div>
<div class=”collapsed”>
<span>Notice</span>
<a href=”#” mce_href=”#”>Current or not</a>
<a href=”#” mce_href=”#”>Current or not</a>
<a href=”#” mce_href=”#”>Current or not</a>
<a href=”#” mce_href=”#”>Current or not</a>
</div>
</div>
</body>
</html>
You can add image by adding the following code in the menu.php file, you must have a folder name images in the root directory, i.e. in the cimenu folder.
<img src=”<?=base_url();?>images/myimage.gif” />
Related posts:
