Welcome Guest, Not a member yet? Register   Sign In
Multilevel Menu
#1

[eluser]T I[/eluser]
Hi

I need a multilevel (horizontal/vertical)menu for codeigniter. Can anybody please help how to implement it or any source code to modify or reuse?

regards

Tuku
#2

[eluser]Yorick Peterse[/eluser]
You wouldn't need CodeIgniter for this, this can be achieved using normal PHP. Below is a snippet of a multi level dropdown menu that I made once for a CMS.

Code:
<?php
class Navigation_Class {
    //Display the navigation menu
    function Show() {
        $Main_Nav_Query = mysql_query("SELECT * FROM navigation WHERE parent_id = 0;");    //Query for the main items
        
        echo "<ul id=\"navigation-list\">\n";
        //Main items
        while($Main_Nav_Query_Results = mysql_fetch_array($Main_Nav_Query)) {
            //Set main data
            $Main_Nav_ID         = $Main_Nav_Query_Results['id'];
            $Main_Nav_Name         = $Main_Nav_Query_Results['name'];
            $Main_Nav_html_ID    = $Main_Nav_Query_Results['html_id'];
            $Main_Nav_Link        = $Main_Nav_Query_Results['link'];
            $Main_Nav_Parent    = $Main_Nav_Query_Results['parent_id'];
            
            //Create the list items for each main level
            echo "\t\t\t\t<li class=\"mainlevel\" id=\"$Main_Nav_html_ID\"><a >$Main_Nav_Name</a>";
            
                //Sub items
                $Sub_Nav_Query     = mysql_query("SELECT * FROM navigation WHERE parent_id = '$Main_Nav_ID';");    //Query for the sub items
                while($Sub_Nav_Query_Results = mysql_fetch_array($Sub_Nav_Query)) {
                    //Set Sub data
                    $Sub_Nav_ID         = $Sub_Nav_Query_Results['id'];
                    $Sub_Nav_Name         = $Sub_Nav_Query_Results['name'];
                    $Sub_Nav_Link        = $Sub_Nav_Query_Results['link'];
                    $Sub_Nav_Parent        = $Sub_Nav_Query_Results['parent_id'];
                    
                    //Create the markup for the sub items (list items)
                    $Sub_List = "<li class=\"sub-item\"><a >$Sub_Nav_Name</a></li>";    
                    
                    //Check if the current item has any sub items
                    if($Sub_Nav_Parent == $Main_Nav_ID) {
                            echo "<ul class=\"sub-list\">";
                            echo "$Sub_List";
                            echo "</ul>";                    
                    }                            
                }        
            echo "</li>\n";    //Close the sub items
        }
        echo "\t\t\t</ul>\n";        //Close the unordered list for the main items
    }    
}
?&gt;
#3

[eluser]T I[/eluser]
Thanks a lot.

Can you please attach the css file and what to do to implement the menu with full functionality?
#4

[eluser]Yorick Peterse[/eluser]
[quote author="Tuku" date="1246499596"]Thanks a lot.

Can you please attach the css file and what to do to implement the menu with full functionality?[/quote]

The menu is actually part of a bigger system which isn't available for download. The CSS file looks as following, do note I haven't styled the dropdown elements as I didn't need to use them for the site (the PHP code does support dropdowns):

Code:
#navigation-menu #navigation-list li a {
    color:#000;
    font-size:16px;
    font-weight:bold;
    margin-right:15px;
    text-decoration:none;
}
#navigation-menu #navigation-list li a:hover {
    text-decoration:underline;
}
#5

[eluser]T I[/eluser]
Thanks a lot
#6

[eluser]Flak[/eluser]
@Yorick Peterse does this work as helper? Please can you make an example of usage, it will be helpful for other users too.

thanks

Edit: OK that was easy.


menu_helper.php

Code:
function Show() {
    
    $Main_Nav_Query = mysql_query("SELECT * FROM navigation WHERE parent_id = 0;");    //Query for the main items
    
    $menu = "<ul id=\"navigation-list\">\n";
    //Main items
    while($Main_Nav_Query_Results = mysql_fetch_array($Main_Nav_Query)) {
        //Set main data
        $Main_Nav_ID         = $Main_Nav_Query_Results['id'];
        $Main_Nav_Name         = $Main_Nav_Query_Results['title'];
        $Main_Nav_html_ID    = $Main_Nav_Query_Results['pages_id'];
        $Main_Nav_Link        = $Main_Nav_Query_Results['path'];
        $Main_Nav_Parent    = $Main_Nav_Query_Results['parent_id'];
        
        //Create the list items for each main level
        $menu .= "\t\t\t\t<li class=\"mainlevel\" id=\"$Main_Nav_html_ID\"><a >$Main_Nav_Name</a>";
        
            //Sub items
            $Sub_Nav_Query     = mysql_query("SELECT * FROM navigation WHERE parent_id = '$Main_Nav_ID';");    //Query for the sub items
            while($Sub_Nav_Query_Results = mysql_fetch_array($Sub_Nav_Query)) {
                //Set Sub data
                $Sub_Nav_ID         = $Sub_Nav_Query_Results['id'];
                $Sub_Nav_Name         = $Sub_Nav_Query_Results['title'];
                $Sub_Nav_Link        = $Sub_Nav_Query_Results['path'];
                $Sub_Nav_Parent        = $Sub_Nav_Query_Results['parent_id'];
                
                //Create the markup for the sub items (list items)
                $Sub_List = "<li class=\"sub-item\"><a >$Sub_Nav_Name</a></li>";    
                
                //Check if the current item has any sub items
                if($Sub_Nav_Parent == $Main_Nav_ID) {
                        $menu .= "<ul class=\"sub-list\">";
                        $menu .= "$Sub_List";
                        $menu .= "</ul>";                    
                }                            
            }        
        $menu .= "</li>\n";    //Close the sub items
    }
    $menu .= "\t\t\t</ul>\n";        //Close the unordered list for the main items
    return $menu;
}


Controller

Code:
class Page extends Controller {

    function Page()
    {
        parent::Controller();    
        $this->load->helper('menu');
    }
    function index()
    {
        $head['menu'] = show();
        $this->load->view("elements/header", $head);
         }
}


and in elements/header.php

<div id="promobox">&lt;?=$menu?&gt;</div>
#7

[eluser]MEM[/eluser]
Where will the path come from?
From the database?

On the admin side of things, should the user enter some sort of path?


Regards,
Márcio




Theme © iAndrew 2016 - Forum software by © MyBB