mutilevel-dropdown-bootstrap
In this tutorial we will learn how to create multilevel drop down menu, normally bootstrap provided single level drop down menu list but 3.X bootstrap provided some classes to create well designed multilevel drop down menu.
Bootstrap is very popular open source CSS framework.You can create awesome ui using in-built bootstrap css class.This css tutorial help to create multilevel menu using bootstrap 3.0.
You can also check other tutorial of Bootstrap,
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<a class="brand" href="#">PHP Flow</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">JQuery</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web Technology<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Framework</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Zend</a></li>
<li class="dropdown-submenu">
<a href="#">CMS</a>
<ul class="dropdown-menu">
<li><a href="#">Wordpress</a></li>
<li><a href="#">joomla</a></li>
</ul>
</li>
<li><a href="#">Cake</a></li>
<li><a href="#">Symphony</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
in this Laravel tutorial, I will explore common practices for using the Laravel Blade template with examples. Blade is a… Read More
View Comments
Thank you very much!
Hi,
You need create your own custom css, for left arrow
.dropdown-submenu>a.left-arrow:after {
float: left;
border-left: none;
margin-left: -10px;
margin-right: 0;
border-right: 4px dashed;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
and
add 'left-arrow' on anchor tag where do u want show left arrow menu like below
Framework
how to make Bootstrap Dynamic Drop down Menu Using PHP and MySQL
i ll update soon