How to create multi level menu using Yii - php

How do I do a query to the case of multi-level menus in yii?
For example I have a table like this :
menu_name will follow parrent_id it has, so it will form a hierarchical menu
How do I use Yii DAO on my layout so that the output as html above
My Code :
<?php
Yii::import('zii.widgets.CMenu', true);
class ActiveMenu extends CMenu
{
public function init(){
$criteria = new CDbCriteria;
$criteria->condition='published=:idpub AND menu_controller=:menu';
$criteria->params=array(':idpub'=>1, ':menu'=>'#');
$items = Menu::model()->findAll($criteria);
echo "<ul id='yw1' class='nav'>";
foreach ($items as $item)
{
echo "<li class='dropdown'>
<a href=".$item->menu_controller." data-toggle='dropdown' class='dropdown-toggle'>
<i class='icon-white icon-list'></i>".$item->menu_name."<b class='caret'></b></a>
</li>";
}
echo "</ul>";
parent::init();
}
}
But in the above code I only get parents data. How do I want to loop to get the childs data include in every parents menu like this html code :
<ul id="yw1" class="nav">
<li><span class="icon-white icon-tasks"></span> Home</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<i class="icon-white icon-list"></i>Master<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Expedition</li>
</ul>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Partner</li>
</ul>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> User</li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<i class="icon-white icon-list"></i>Transaction<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Process In</li>
</ul>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Process Out</li>
</ul>
etc ....
etc ....
etc ....
</li>
</ul>

You should first have the relations set up properly in your Menu model (Menu.php).
public function relations()
{
return array(
'parent' => array(self::BELONGS_TO, 'Menu', 'parent_id'),
'children' => array(self::HAS_MANY, 'Menu', 'parent_id'),
);
}
And then modify the codes:
//other codes
foreach ($items as $item)
{
echo "<li class='dropdown'>
<a href=".$item->menu_controller." data-toggle='dropdown' class='dropdown-toggle'>
<i class='icon-white icon-list'></i>".$item->menu_name."<b class='caret'></b></a>
</li>";
foreach ($item->children as $child) {
echo "<ul class='dropdown-menu'>
<li><a href='".$child->menu_controller."'><span class='icon-bar icon-list'></span> ".$child->menu_name."</a></li></u>";
}
}
//other codes

Related

bootstrap multilevel dropdown in navbar has unwanted empty space

I have bootstrap multilevel drop down navbar. when I click on the button I want the sub menu to drop right side of the list but it is overlapping last option. can anyone suggest me how to do it?
<ul class="nav navbar-nav col-lg-4">
<li class="active dropdown yamm-fw">
Home
</li>
<li class="dropdown"><a class="dropdown-toggle" data-hover="dropdown"
href="#"> category <span class="caret"></span> </a>
<ul class="dropdown-menu dropright">
<?php $sql=mysqli_query($con,"select id,categoryName from category
limit 10");
while($row=mysqli_fetch_array($sql))
{
$category_name=$row['categoryName'];
if ( $category_name == "Clothing")
{ ?>
<li class="dropdown yamm btn-group">
<a class="dropdown-toggle " data-toggle="dropdown" href="#"> <?php echo
$category_name; ?><span class="caret"></span></a>
<ul class="dropdown-menu dropright">
<?php $sql1=mysqli_query($con,"select id,subcategory from subcategory1
where categoryid=" .$row['id']);
while($row1=mysqli_fetch_array($sql1))
{ ?>
<li class="dropdown yamm">
<a href="category.php?cid=<?php echo $row1['id'];?>"> <?php echo
$row1['subcategory'];?></a>
</li>
<?php } ?>
</ul>
</li>
<?php }
else
{ ?>
<li class="dropdown yamm">
<a href="category.php?cid=<?php echo $row['id'];?>"> <?php echo
$row['categoryName'];?></a>
</li>
<?php
}
} ?>
</ul>
You may overcome this problem by writing the CSS the value of paddings.
.nav li {padding-top: 5px; padding-bottom: 5px;}
Also, have look at line-height property it might be create some problem. on some cases.

Dropdown href="" redirects to index page instead of showing dropdown list

Hi I am trying to get a dropdown list to appear when you click a button, problem is that whenever I click the button it goes to the index page instead of showing the list.
However, the button works only on one specific page which is almost identical to the others.
Here is the code:
<li class="dropdown">
<a id="dLabel" data-target="#" href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?Php echo $_SESSION['email']; ?><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>User Details</li>
<!-- <li>Another action</li>
<li>Something else here</li> -->
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
Please use javascript:void(0) instead of blank.
<li class="dropdown">
<a id="dLabel" data-target="#" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?Php echo $_SESSION['email']; ?><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>User Details</li>
<!-- <li>Another action</li>
<li>Something else here</li> -->
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>

how to view submenu on click using php,html

I'm trying to view submenu after click on parent.
Classes->Primary School->(Grade1,Grade2,Grade3,Grade4,Grade5,Grade6)
Classes->Middle School->(Grade7,Grade8,Grade9)
Classes->Secondary School->(Grade10,Grade11,Grade12)
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="nav navbar-nav navbar-right">
<?php foreach ($data as $menu) { ?>
<?php if(!$menu->children) { ?>
<li><?php echo $menu->name; ?></li>
<?php }
else {
?>
<li class="dropdown open">
<a href="#" class="dropdown-toggle " data-toggle="dropdown">
<?php echo $menu->name; ?>
<span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu open" role="menu">
<?php
foreach ($menu->children as $child) {
?>
<li><?php echo $child->name; ?></li>
<?php
foreach ($child->children as $sub_child) {
?>
<li class="dropdown-submenu">
<?php echo $sub_child->name; ?><span class="fa fa-angle-down"></span>
<ul class="dropdown-submenu" role="menu">
<?php } ?>
<?php } ?>
</ul>
</li>
<?php } ?>
<?php } ?>
</ul>
</li>
</ul>
</div>
The result:
Problem with result
I want to view Grade 1 to Grade 6 after click on Primary school and from Grade 7 to Grade 9 after click on Middle school ...
Please help!
You have an open <ul class="dropdown-submenu" role="menu"> tag without any <li> or <a>'s being generated inside of it. Then you close two each statements before closing the <ul> tag.
<?php foreach ($child->children as $sub_child) { ?>
<li class="dropdown-submenu">
<a href="#" style="color:black;" class="dropdown-toggle " data-toggle="dropdown">
<?php echo $sub_child->name; ?><span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-submenu" role="menu">
<?php } ?>
<?php } ?>
</ul>
</li>
This will be causing all sorts of unintended markup output. Fix that and it should fix your problem. If not, you'll atleast be a lot closer.

PHP with or logical and adding a class to the li global navigation

I'm in the process on covering the navigation bar on all the pages to a global navigation with the PHP. I'm using PHP also to add a class and show the current page.
The challenge that I'm facing is the parent navigation selection. It's underlined when it's on the child page and the sub-nav is also selected. Such as I'm on the "History" page, child page to the "About Us" page. Both are underlined.
The challenge that I'm facing is when I move over to the next page, "Service Areas" or any of it's children, the "About Us" nav selection is still underline. I'm trying to use the || logic to prevent that from happening.
Below is the following code:
<li class="dropdown <?php if ($thisPage=='About Us'||'History'||'Mission Values'||'Process'||'Our People'||'Testimonials'||'Capstone Cares') echo 'active'; ?>">
Is there a way that I can deselect the parent nav when I'm under a different nav section?
Website is http://capstone.dgpehrson.com
Here is the rest of the code...
On individual pages I'm adding:
<?php $thisPage="About Us"; ?>
I'm changing the name according to the page.
Here is the Navigation code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown <?php if ($thisPage=='About Us' || 'History' || 'Mission Values' || 'Process' || 'Our People' || 'Testimonials' || 'Capstone Cares') echo 'active'; ?>">
About Us<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li <?php if ($thisPage=="History") echo "class=\"active\""; ?>>History</li>
<li <?php if ($thisPage=="Mission Values") echo "class=\"active\""; ?>>Mission & Values</li>
<li <?php if ($thisPage=="Process") echo "class=\"active\""; ?>>Process</li>
<li <?php if ($thisPage=="Our People") echo "class=\"active\""; ?>>Our People</li>
<li <?php if ($thisPage=="Testimonials") echo "class=\"active\""; ?>>Testimonials</li>
<li <?php if ($thisPage=="Capstone Cares") echo "class=\"active\""; ?>>Capstone Cares</li>
</ul>
</li>
<li class="dropdown <?php if ($thisPage=='Service Areas'||'Apartments'||'Capital'||'Development Services'||'Manufactured Housing'||'Complimentary') echo 'active'; ?>">
Service Areas<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li <?php if ($thisPage=="Apartments") echo "class=\"active\""; ?>>Apartments</li>
<li <?php if ($thisPage=="Capital") echo "class=\"active\""; ?>>Capital</li>
<li <?php if ($thisPage=="Development Services") echo "class=\"active\""; ?>>Developement Services</li>
<li <?php if ($thisPage=="Manufactured Housing") echo "class=\"active\""; ?>>Manufactured Housing</li>
<li <?php if ($thisPage=="Complimentary") echo "class=\"active\""; ?>>Complimentary Value Analysis</li>
</ul>
</li>
<li class="dropdown">
Offerings<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li>Apartment</li>
<li>Manufactured Housing</li>
<li>Multi-family Land</li>
</ul>
</li>
<li class="dropdown">
Market Reports<span class="caret"></span> <!-- Alink extentions that's been removed: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" -->
<ul class="dropdown-menu">
<li>Florida</li>
<li>Kentucky</li>
<li>North Carolina</li>
<li>South Carolina</li>
<li>Tennessee</li>
<li>Virginia</li>
</ul>
</li>
<li>News</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
You have to have the compare between each 'or'. The string is just evaluating to a true.
if ($thisPage=='About Us'||$thisPage=='History'||$thisPage=='Mission Values'||$thisPage=='Process'||$thisPage=='Our People'||$thisPage=='Testimonials'||$thisPage=='Capstone Cares') echo 'active';

Create multi level menu using Yii

How do I do a query to the case of multi-level menus in yii?
For example I have a table like this :
menu_name will follow parrent_id it has, so it will form a hierarchical menu
How do I use Yii on my layout so that the output as html above
My code :
<?php
Yii::import('zii.widgets.CMenu', true);
class ActiveMenu extends CMenu
{
public function init(){
$criteria = new CDbCriteria;
$criteria->condition='published=:idpub AND menu_controller=:menu';
$criteria->params=array(':idpub'=>1, ':menu'=>'#');
$items = Menu::model()->findAll($criteria);
echo "<ul id='yw1' class='nav'>";
foreach ($items as $item)
{
echo "<li class='dropdown'>
<a href=".$item->menu_controller." data-toggle='dropdown' class='dropdown-toggle'>
<i class='icon-white icon-list'></i>".$item->menu_name."<b class='caret'></b></a>
</li>";
}
echo "</ul>";
parent::init();
}
}
But in the above code I only get parents data. How do I want to loop to get the childs data include in every parents menu like this html code :
<ul id="yw1" class="nav">
<li><span class="icon-white icon-tasks"></span> Home</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<i class="icon-white icon-list"></i>Master<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Expedition</li>
</ul>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Partner</li>
</ul>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> User</li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<i class="icon-white icon-list"></i>Transaction<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Process In</li>
</ul>
<ul class="dropdown-menu">
<li><span class="icon-bar icon-list"></span> Process Out</li>
</ul>
etc ....
etc ....
etc ....
</li>
</ul>
Thanks
You can create a recursive function for loop your childs like this
<?php
class ActiveMenu extends CMenu
{
public function init(){
$this->renderChilds();
}
protected function getChilds($parent_id)
{
$criteria = new CDbCriteria;
$criteria->condition='published=:idpub AND menu_controller=:menu AND parent_id = :parent';
$criteria->params=array(':idpub'=>1, ':menu'=>'#', ':parent'=>$parent_id);
$items = Menu::model()->findAll($criteria);
return $items;
}
public function renderChilds($parent_id=0, $class='nav')
{
$items = $this->getChilds($parent_id);
if (!empty($items))
{
echo "<ul class='$class'>";
foreach ($items as $item)
{
echo "<li class='dropdown'>
<a href=".$item->menu_controller." data-toggle='dropdown' class='dropdown-toggle'>
<i class='icon-white icon-list'></i>".$item->menu_name."<b class='caret'></b></a>";
$this->renderChilds($item->id, 'dropdown-menu');
echo "</li>";
}
echo "</ul>";
}
}
...
}

Categories