How can I create a drop down menu using twitter bootstrap. my current navigation is
<ul class="nav nav-tabs " style="width: 860px;">
<li >
<a href="#" >Employees</a>
</li>
<li >
<a href="#" >Projects</a>
</li>
<li >
<a href="#" >Clients</a>
</li>
<li >
<a href="#" >Assign Projects</a>
</li>
<li >
<a href="#" > Reports</a>
</li>
<li><a href="logout.php" >Logout</a></li>
here I want a drop down menu for Reports link
See that example: http://jsfiddle.net/jrV6u/
And include to your page this scripts:
jQuery
Bootstrap Dropdown Plugin
Boostrap already have that http://twitter.github.com/bootstrap/components.html#dropdowns
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
Drop me!
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
Related
I made a menu with bootstrap and php. It works fine but when I use it with an include in another php file the dropdown items are not seen. I don't know if I'm missing a div or should I use something else?
this is my menu.php code:
<body>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark sticky-top">
<ul class="navbar-nav">
<!-- Brand/logo -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Administracion</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="ajuste.php">Ajuste Cota</a>
<a class="dropdown-item" href="estaciones.php">Estaciones</a>
<a class="dropdown-item" href="panel.php">Panel de Control</a>
<a class="dropdown-item" href="permisos.php">Permisos</a></div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Medicion</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="">Puesto 1</a>
<a class="dropdown-item" href="">Puesto 2</a>
<a class="dropdown-item" href="">Puesto 3</a>
</div>
</li>
</ul>
</nav>
</body>
and this is how I use this in another php file
<body>
<?php include("menu.php");?>
<br>
<div class="container">
.
.
.
</body>
I should see the menu as follows:
menu.php:
But when I use menu.php in other file (as include) the menu item does not diplay
menu.php used as include file:
Can someone guide me how to fix this?
Too many <body> tags...you should only have one set (<body>...</body>) in your whole page. You don't need them in the menu file if that's going to be included in another file.
I created navigation tabs that load content when you click the tab. But in the active tab, the content of all the tabs is loading. I have included a PHP file to load the content but when I remove the PHP file and put normal content it's working properly.
<div class="nav-tabs-horizontal" data-plugin="tabs">
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-toggle="tab" href="#settingsTab"
aria-controls="settings" role="tab">Settings</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#locationsTab"
aria-controls="locations" role="tab">Buisness </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#taxTab"
aria-controls="tax" role="tab">Tax</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#productsettingsTab"
aria-controls="product" role="tab">
Product </a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#invoiceTab"
aria-controls="invoiceTab" role="tab">Invoice Settings
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#emailTab"
aria-controls="emailTab" role="tab">Email Settings
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-toggle="tab" href="#audit"
aria-controls="audit" role="tab">Audit</a>
</li>
</ul>
<div class="tab-content ">
<div class="tab-pane active" id="settingsTab" >
<?php include 'settings.php'; ?>
</div>
<div class="tab-pane" id="locationsTab" >
<?php include 'locations.php'; ?>
</div>
<div class="tab-pane " id="taxTab" >
<?php include 'tax.php'; ?>
</div>
<div class="tab-pane " id="productsettingsTab" >
<?php include 'product.php'; ?>
</div>
<div class="tab-pane " id="invoiceTab" >
<?php include 'invoice.php'; ?>
</div>
<div class="tab-pane " id="emailTab" >
<?php include 'email.php'; ?>
</div>
<div class="tab-pane " id="audit" >
<?php include 'auditlogs.php'; ?>
</div>
</div>
</div>
As per the screen, it appears that few files (either bootstrap or jquery) are not loading. Please correct them.
hope you are all doing well, i have just face a problem. i make my website online. everything working well expect navbar toggler icon. it is not working on mobile device. it is working well on desktop
here is my code
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.php"><img src="./assests/images/logo.png" class="logo ml-5" alt="file not found" /> </a>
<button class="navbar-toggler " type="button" role="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item <?php if($page == 'home') echo 'active' ?>">
<a class="nav-link " href="index.php"><i class="mr-2 fas fa-home"> </i>Home </a>
</li>
<li class="nav-item <?php if($page == 'about') echo 'active' ?>">
<a class="nav-link" href="about.php"><i class="mr-2 fas fa-users"> </i> About Us</a>
</li>
<li class="nav-item dropdown <?php if($page == 'products') echo 'active' ?>" >
<a class="nav-link dropdown-toggle dropdown-toggle-split" href="products.php" data-toggle="dropdown" id="dropedownMenuButton"aria-expanded="false" aria-hospopup="true" >
<i class="mr-2 fas fa-wrench"> </i>Products
</a>
<ul class="dropdown-menu" aria-labelledby="dropedownMenuButton">
<li class="list-group-item">
<a class="dropdown-item" href="bolts-screws.php"> Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="nuts.php"> Nuts </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="washers.php"> Washers </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="screws.php"> Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="socket-bolt-screws.php"> Socket Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="anchor-fastener.php"> Anchor Fasteners </a>
</li>
</ul>
</li>
<li class="nav-item <?php if($page == 'connect') echo 'active' ?>">
<a class="nav-link" href="connect.php"><i class="mr-2 fas fa-user"> </i> Contact us </a>
</li>
</ul>
</div>
</div>
</nav>
you can check my website also
http://rudrafasteners.com/
It seems you don't add Javascript at your head. Add the followings lines to your HTML <head> tag (Jquery and Bootstrap JS):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I have the following html sidebar menu:
<li {{{ (Request::is('bookings/*') }}} data-toggle="collapse" data-target="#bookings">
<i class="fa fa-address-book" aria-hidden="true"></i> Bookings <i class="fa fa-chevron-down" aria-hidden="true"></i>
</li>
<ul class="sub-menu collapse" id="bookings">
<li class="collapsed">All Bookings</li>
<li class="collapsed" >Add New</li>
</ul>
<li {{{ (Request::is('bookings/*') || Request::is('bookings') ? 'class=active' : '') }}} data-toggle="collapse" data-target="#item2">
<i class="fa fa-address-book" aria-hidden="true"></i> Item 2 <i class="fa fa-chevron-down" aria-hidden="true"></i>
</li>
<ul class="sub-menu collapse" id="item2">
<li {{{ (Request::is('bookings') ? 'class=active' : 'collapsed') }}}>All Bookings</li>
<li {{{ (Request::is('bookings/create') ? 'class=active' : 'collapsed') }}} >Add New</li>
</ul>
This is a basic Bootstrap collapse menu that contains a sub menu which expands when the li element is clicked.
The problem I have is lets say I have 2 or 3 of these menu items that all have sub menus. There is a possibility that all of them could open at the same time, I don't like this because this forces a scroll overflow as the height increases which then shows a scrollbar for the side menu.
Is there a way I can prevent multiple elements from being expanded in Bootstrap?
I am using Laravel 5 if that helps.
I think this should help you, just play a little with it to adapt it to your needs:
<div class="row">
<div class="col">
<ul class="nav nav-stacked" id="accordion1">
<li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a>
<ul id="firstLink" class="collapse">
<li>SubTest1</li>
<li>SubTest1</li>
<li>SubTest1</li>
</ul>
</li>
<li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a>
<ul id="secondLink" class="collapse">
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
</ul>
</li>
</ul>
</div>
</div>
See it here
https://codepen.io/anon/pen/ZaMOxN
I use bootstrap theme bs-admin-bcore and I want to make menu in file "menu.php" to be more dynamic.
For example, I have this code :
<ul id="menu" class="collapse">
<li class="panel">
<a href="index.php" >
<i class="icon-table"></i> Dashboard
</a>
</li>
<li class="panel ">
<a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
<i class="icon-tasks"> </i> UI Elements<span class="pull-right"><i class="icon-angle-left"></i></span> <span class="label label-default">10</span>
</a>
<ul class="collapse" id="component-nav">
<li class=""><i class="icon-angle-right"></i> Buttons </li>
</ul>
</li>
</ul>
when I call index.php <li class="panel"> becomes <li class="panel active"> and when I call button.php EU Elements becomes active.
You have to add "active" class to the parent li of buttons as well n it will work.