[eluser]liri[/eluser]
Hey guys,
While I tried asking this before in another thread though that didn't yield out any results, I will try again with a more simple question -
How do you implement a 2 levels navigation menu?
[eluser]überfuzz[/eluser]
Your simple question has no simple answer...
Would you mind being a tiny bit more specific..?
[eluser]liri[/eluser]
Please see my thread here: http://ellislab.com/forums/viewthread/153121/
With alot more information on the background of this problem.
Probably the last post by me there with the screenshots would hopefully make it more clear.
[eluser]InsiteFX[/eluser]
I am designing one right now that uses the database.
It will be using this javascript menu system that will
fall back to a css menu if javascript is now installed.
dropdown menus
I do have it working but adding other things to it.
InsiteFX
[eluser]liri[/eluser]
Ahh, good to know 
Could you share with us the database design?
Are you implementing logic in setting an entry in the menu to be active? While it's now visually
that important with such drop-down menus, I'm sure you'll need it for breadcrumbs and such.
I'd be interested to know how you're integrating it with your controllers and all.
Regards,
Liran.
[eluser]InsiteFX[/eluser]
Database tables
Code: --
-- Database name: `dyn_menus`
--
-- Parts of this source code is from PyroCMS
-- Because I am modifing it to use this new menu
-- This will also work stand alone with the code below
-- Like I said this is not finished yet!
--
-- you may use it under the GPL v3 Licence.
-- --------------------------------------------------------
--
-- Table structure for table `dyn_menu`
--
DROP TABLE IF EXISTS `dyn_menu`;
CREATE TABLE IF NOT EXISTS `dyn_menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL DEFAULT '',
`link_type` varchar(20) NOT NULL DEFAULT 'uri',
`page_id` int(11) NOT NULL DEFAULT '0',
`module_name` varchar(50) NOT NULL DEFAULT '',
`url` varchar(255) NOT NULL DEFAULT '',
`uri` varchar(255) NOT NULL DEFAULT '',
`dyn_group_id` int(11) NOT NULL DEFAULT '0',
`position` int(5) NOT NULL DEFAULT '0',
`target` varchar(10) DEFAULT NULL,
`parent_id` int(11) NOT NULL DEFAULT '0',
`is_parent` tinyint(1) NOT NULL DEFAULT '0',
`show_menu` enum('0','1') NOT NULL DEFAULT '1',
PRIMARY KEY (`id`),
KEY `dyn_group_id - normal` (`dyn_group_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
--
-- Dumping data for table `dyn_menu`
--
INSERT INTO `dyn_menu` (`id`, `title`, `link_type`, `page_id`, `module_name`, `url`, `uri`, `dyn_group_id`, `position`, `target`, `parent_id`, `is_parent`, `show_menu`) VALUES
(1, 'Category 1', 'page', 1, '', 'http://www.category1.com', '', 1, 0, '', 0, 1, '1'),
(2, 'Category 2', 'page', 2, '', 'http://www.category2.com', '', 1, 0, '', 0, 0, '1'),
(3, 'Category 3', 'page', 3, '', 'http://www.category3.com', '', 1, 0, '', 0, 0, '1'),
(4, 'Category 4', 'page', 4, '', 'http://www.category4.com', '', 1, 0, '', 0, 0, '1'),
(5, 'Category 1 - 1', 'page', 5, '', 'http://www.category11.com', '', 1, 0, '', 1, 0, '1'),
(6, 'Category 1 - 2', 'page', 6, '', 'http://www.category12.com', '', 1, 0, '', 1, 1, '1'),
(7, 'Category 1 - 2 - 1', 'page', 7, '', 'http://www.category121.com', '', 1, 0, '', 6, 0, '1'),
(8, 'Category 1 - 2 - 2', 'page', 8, '', 'http://www.category122.com', '', 1, 0, '', 6, 1, '1'),
(9, 'Category 1 - 2 - 2 - 1', 'page', 9, '', 'http://www.category1221.com', '', 1, 0, '', 8, 0, '1'),
(10, 'Category 1 - 2 - 2 - 2', 'page', 10, '', 'http://www.category1222.com', '', 1, 0, '', 8, 0, '1'),
(11, 'Category 3 - 1', 'page', 11, '', 'http://www.category31.com', '', 1, 0, '', 3, 1, '1'),
(12, 'Category 3 - 2', 'page', 12, '', 'http://www.category32.com', '', 1, 0, '', 3, 0, '1'),
(13, 'Category 3 - 3', 'page', 13, '', 'http://www.category33.com', '', 1, 0, '', 3, 0, '1'),
(14, 'Category 3 - 4', 'page', 14, '', 'http://www.category34.com', '', 1, 0, '', 3, 0, '1'),
(15, 'Category 3 - 5', 'page', 15, '', 'http://www.category35.com', '', 1, 0, '', 3, 0, '1'),
(16, 'Category 3 - 6', 'page', 16, '', 'http://www.category36.com', '', 1, 0, '', 3, 0, '1');
-- --------------------------------------------------------
--
-- Table structure for table `dyn_groups`
--
CREATE TABLE IF NOT EXISTS `dyn_groups` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(50) NOT NULL,
`abbrev` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT='Navigation groupings. Eg, header, sidebar, footer, etc' ;
--
-- Dumping data for table `dyn_groups`
--
INSERT INTO `dyn_groups` (`id`, `title`, `abbrev`) VALUES
(1, 'Header', 'header'),
(2, 'Sidebar', 'sidebar'),
(3, 'Footer', 'footer'),
(4, 'Topbar', 'topbar'),
(5, 'Sidebar1', 'sidebar1'),
(6, 'Sidebar2', 'sidebar2');
InsiteFX
[eluser]InsiteFX[/eluser]
Library
Name: ./application/libraries/Dynmic_menu.php
Code: <?php
/**
*
* Dynmic_menu.php
*
*/
class Dynamic_menu {
private $ci; // for CodeIgniter Super Global Reference.
private $id_menu = 'id="menu"';
private $class_menu = 'class="menu"';
private $class_parent = 'class="parent"';
private $class_last = 'class="last"';
// --------------------------------------------------------------------
/**
* PHP5 Constructor
*
*/
function __construct()
{
$this->ci =& get_instance(); // get a reference to CodeIgniter.
}
// --------------------------------------------------------------------
/**
* build_menu($table, $type)
*
* Description:
*
* builds the Dynaminc dropdown menu
* $table allows for passing in a MySQL table name for different menu tables.
* $type is for the type of menu to display ie; topmenu, mainmenu, sidebar menu
* or a footer menu.
*
* @param string the MySQL database table name.
* @param string the type of menu to display.
* @return string $html_out using CodeIgniter achor tags.
*/
function build_menu($table = '', $type = '0')
{
$menu = array();
// use active record database to get the menu.
$query = $this->ci->db->get($table);
if ($query->num_rows() > 0)
{
// `id`, `title`, `link_type`, `page_id`, `module_name`, `url`, `uri`, `dyn_group_id`, `position`, `target`, `parent_id`, `show_menu`
foreach ($query->result() as $row)
{
$menu[$row->id]['id'] = $row->id;
$menu[$row->id]['title'] = $row->title;
$menu[$row->id]['link'] = $row->link_type;
$menu[$row->id]['page'] = $row->page_id;
$menu[$row->id]['module'] = $row->module_name;
$menu[$row->id]['url'] = $row->url;
$menu[$row->id]['uri'] = $row->uri;
$menu[$row->id]['dyn_group'] = $row->dyn_group_id;
$menu[$row->id]['position'] = $row->position;
$menu[$row->id]['target'] = $row->target;
$menu[$row->id]['parent'] = $row->parent_id;
$menu[$row->id]['is_parent'] = $row->is_parent;
$menu[$row->id]['show'] = $row->show_menu;
}
}
$query->free_result(); // The $query result object will no longer be available
// ----------------------------------------------------------------------
// now we will build the dynamic menus.
$html_out = "\t".'<div '.$this->id_menu.'>'."\n";
/**
* check $type for the type of menu to display.
*
* ( 0 = top menu ) ( 1 = horizontal ) ( 2 = vertical ) ( 3 = footer menu ).
*/
switch ($type)
{
case 0: // 0 = top menu
break;
case 1: // 1 = horizontal menu
$html_out .= "\t\t".'<ul '.$this->class_menu.'>'."\n";
break;
case 2: // 2 = sidebar menu
break;
case 3: // 3 = footer menu
break;
default: // default = horizontal menu
$html_out .= "\t\t".'<ul '.$this->class_menu.'>'."\n";
break;
}
// loop through the $menu array() and build the parent menus.
for ($i = 1; $i <= count($menu); $i++)
{
if (is_array($menu[$i])) // must be by construction but let's keep the errors home
{
if ($menu[$i]['show'] && $menu[$i]['parent'] == 0) // are we allowed to see this menu?
{
if ($menu[$i]['is_parent'] == TRUE)
{
// CodeIgniter's anchor(uri segments, text, attributes) tag.
$html_out .= "\t\t\t".'<li>'.anchor($menu[$i]['url'].' '.$this->class_parent, '<span>'.$menu[$i]['title'].'</span>');
}
else
{
$html_out .= "\t\t\t\t".'<li>'.anchor($menu[$i]['url'], '<span>'.$menu[$i]['title'].'</span>');
}
// loop through and build all the child submenus.
$html_out .= $this->get_childs($menu, $i);
$html_out .= '</li>'."\n";
}
}
else
{
exit (sprintf('menu nr %s must be an array', $i));
}
}
$html_out .= "\t\t".'</ul>' . "\n";
$html_out .= "\t".'</div>' . "\n";
return $html_out;
}
InsiteFX
[eluser]InsiteFX[/eluser]
Continued from above library
Code: // --------------------------------------------------------------------
/**
* get_childs($menu, $parent_id) - SEE Above Method.
*
* Description:
*
* Builds all child submenus using a recurse method call.
*
* @param mixed $menu array()
* @param string $parent_id id of parent calling this method.
* @return mixed $html_out if has subcats else FALSE
*/
function get_childs($menu, $parent_id)
{
$has_subcats = FALSE;
$html_out = '';
$html_out .= "\n\t\t\t\t".'<div>'."\n";
$html_out .= "\t\t\t\t\t".'<ul>'."\n";
for ($i = 1; $i <= count($menu); $i++)
{
if ($menu[$i]['show'] && $menu[$i]['parent'] == $parent_id) // are we allowed to see this menu?
{
$has_subcats = TRUE;
if ($menu[$i]['is_parent'] == TRUE)
{
$html_out .= "\t\t\t\t\t\t".'<li>'.anchor($menu[$i]['url'].' '.$this->class_parent, '<span>'.$menu[$i]['title'].'</span>');
}
else
{
$html_out .= "\t\t\t\t\t\t".'<li>'.anchor($menu[$i]['url'], '<span>'.$menu[$i]['title'].'</span>');
}
// Recurse call to get more child submenus.
$html_out .= $this->get_childs($menu, $i);
$html_out .= '</li>' . "\n";
}
}
$html_out .= "\t\t\t\t\t".'</ul>' . "\n";
$html_out .= "\t\t\t\t".'</div>' . "\n";
return ($has_subcats) ? $html_out : FALSE;
}
}
// ------------------------------------------------------------------------
// End of Dynamic_menu Library Class.
// ------------------------------------------------------------------------
/* End of file Dynamic_menu.php */
/* Location: ../application/libraries/Dynamic_menu.php */
InsiteFX
[eluser]InsiteFX[/eluser]
Controller: Welcome
Code: <?php
class Welcome extends CI_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
$this->load->view('welcome_message');
}
}
/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */
UPDATE: 05-10-2012
Added the PHP 5 Constructor and CI_Controller
InsiteFX
[eluser]InsiteFX[/eluser]
Update 03-21-2011 - Updated script tags replace all $ to s in script tags.
Fixed the 2 missing [REMOVED] menu script lines replace $ in script with s.
View: Welcome_message
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Welcome to CodeIgniter</title>
<base href="<?php echo base_url();?>" />
<link type="text/css" href="<?php echo base_url();?>assets/menu8/orange/menu.css" rel="stylesheet" />
<!-- set javascript base_url -->
<$cript type="text/javascript">
<![CDATA[
var base_url = '<?php echo base_url();?>';
]]>
</$cript>
<$cript type="text/javascript" src="<?php echo base_url();?>assets/menu10/jquery.js"></$cript>
<$cript type="text/javascript" src="<?php echo base_url();?>assets/menu10/menu.js"></$cript>
<style type="text/css">
body {
/*background-color: #fff;*/
margin: 40px;
font-family: Lucida Grande, Verdana, Sans-serif;
font-size: 14px;
color: #4F5155;
}
div#menu { margin:20px auto; }
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px 0;
padding: 5px 0 6px 0;
}
code {
font-family: Monaco, Verdana, Sans-serif;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
</style>
</head>
<body>
<h1>Welcome to CodeIgniter!</h1>
<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>
<p>If you would like to edit this page you will find it located at:</p>
<code>system/application/views/welcome_message.php</code>
<p>The corresponding controller for this page is found at:</p>
<code>system/application/controllers/welcome.php</code>
<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
<?php
//echo base_url();
echo $this->dynamic_menu->build_menu('dyn_menu', '1');
?>
<br />
<p><br />Page rendered in {elapsed_time} seconds</p>
<p><br /><a href="http://apycom.com/">jQuery Menus by Apycom</a></p>
</body>
</html>
UPDATED: 05-10-2012
The assets directory should be in the root! Changed the html paths...
InsiteFX
|
