Create horizontal menu with dropdown navigation sub menus using Bootstrap CSS classes in HTML,PHP

How to design simple horizontal style menu button group with drop down menus.

Horizontal nesting buttons with drop down menus button are most commonly used navigation menus for every website who have primary menu just after header part and between header and page body section. Sub menus are used to show sub category of the primary menu button. For example if you have created website for programming tutorials and you one primary menu button name is Android tutorials then inside that primary menu button category there are multiple secondary menus will be available as drop down sub menus which are actually sub category of this primary category. So here is the complete step by step tutorial for Create horizontal menu with dropdown navigation sub menus using Bootstrap CSS classes in HTML,PHP.

How to Create horizontal menu with dropdown navigation sub menus using Bootstrap CSS classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for sub-menu-button.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dropdown Menus</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

 <h2>Dropdown Menus</h2>
 
 <div class="btn-group">
 
 <button type="button" class="btn btn-info">PHP</button>
 
 <button type="button" class="btn btn-info">Blogger</button>
 
 <div class="btn-group">
 
 <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
 
 Android <span class="caret"></span></button>
 
 <ul class="dropdown-menu" role="menu">
 
 <li><a href="#">Android Studio</a></li>
 
 <li><a href="#">Eclipse</a></li>
 
 <li><a href="#">Basics</a></li>
 
 </ul>
 </div>
 
 <div class="btn-group">
 
 <button type="button" class="btn btn-info">WordPress</button>
 
 <button type="button" class="btn btn-info">Bootstrap</button>
 
 </div>
 
 </div>
 
 </div>
 
</div>
 
</body>

</html>

Screenshot:

Create horizontal menu with dropdown navigation sub menus using Bootstrap CSS classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *