Reader Level:
ARTICLE

Creating Drop Down Menus in PHP

Posted by Vinod Kumar Articles | PHP March 26, 2013
I will explain Creating drop down menus with the help of twitter bootstrap file.
  • 0
  • 0
  • 6667

Introduction

Here I will explain creation of dropdown menus using a Twitter bootstrap file. The Twitter bootstrap file is fully supported for creating dropdown menus, pills and tabs. A Twitter bootstrap file already includes many js and css files. You need the jquery.js and bootstrap_drodown.js files. You can download this from the link http://twitter.github.com/. Using this article you can simply create dropdown menus, pills and tabs buttons in your website.

Example

<html> 

<head> 

    <meta charset="utf-8" /> 

    <title>Twitter Bootstrap dropdown</title> 

    <link href="twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

    <div class="navbar"> 

        <div class="navbar-inner"> 

            <div class="container"> 

                <ul class="nav"> 

                    <a class="brand" href="#">c-sharp</a> 

                    <li class="active"><a href="#">Home</a></li> 

                    <li><a href="#">About</a></li> 

                    <li><a href="http://www.c-sharpcorner.com">Article</a></li> 

                    <li><a href="#">Contact</a></li> 

                    <li class="dropdown" id="accountmenu"> 

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Learn<b class="caret"></b></a> 

                        <ul class="dropdown-menu"> 

                            <li><a href="http://www.c-sharpcorner.com/1/279/php.aspx">PHP</a></li> 

                            <li><a href="http://www.c-sharpcorner.com/1/279/php.aspx">MySQL</a></li> 

                            <li class="divider"></li> 

                            <li><a href="http://www.c-sharpcorner.com/1/233/javascript-css.aspx">JavaScript</a></li> 

                            <li><a href="http://www.c-sharpcorner.com/1/244/html-5.aspx">HTML5</a></li> 

                        </ul> 

                    </li> 

                </ul> 

            </div> 

        </div> 

    </div> 

    <div class="container-fluid"> 

     <h1>Dropdown Example</h1> 

    </div> 

    <script type="text/javascript" src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> 

    <script type="text/javascript" src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script> 

    <script type="text/javascript"> 

        $(document).ready(function () { 

            $('.dropdown-toggle').dropdown(); 

        }); 

   </script> 

</body> 

</html> 

Output

twitter bootstrap3.jpg

twitter bootstrap4.jpg

You can apply a dropdown JavaScript plug-in also for creating pills and tabs, as in the following:

Example

<html> 

<head> 

    <meta charset="utf-8" /> 

    <title>dropdown with tabs and pills</title> 

    <link href="twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

    <ul class="nav nav-pills"> 

    <li class="dropdown all-camera-dropdown"> 

           <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 

            Articles

               <b class="caret"></b> 

           </a> 

    <ul class="dropdown-menu"> 

            <li data-filter-camera-type="all"><a data-toggle="tab" href="http://www.c-sharpcorner.com/1/244/html-5.aspx">HTML5</a></li> 

            <li data-filter-camera-type="Alpha"><a data-toggle="tab" href="http://www.c-sharpcorner.com/1/279/php.aspx">PHP</a></li> 

            <li data-filter-camera-type="Zed"><a data-toggle="tab" href="http://www.c-sharpcorner.com/1/279/php.aspx">MySQL</a></li> 

            <li data-filter-camera-type="Bravo"><a data-toggle="tab" href="http://www.c-sharpcorner.com/1/233/javascript-css.aspx">JavaScript</a></li> 

     </ul> 

</li></ul> 

    <script type="text/javascript" src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> 

    <script type="text/javascript" src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script> 

   </body> 

</html> 

Output

twitter bootstrap5.jpg

twitter bootstrap6.jpg

COMMENT USING

Trending up