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.
Related
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.
I am created a navigation bar with bootstrap. I want to get the navigation menu item name with PHP code. I was trying to do that with 'GET' method but I cannot do that without changing the page. Here I attached the nav-bar code.
<body>
<!-- ======================== Navigation Bar ============================== -->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light static-top">
<div class="container-fluid p-0" id="navbarSupportedContent">
<a class="navbar-brand" href="#"><img src="../images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" 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">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<?php
echo "Selected Item"; // display selected navigation item here.
?>
</body>
</html>
This is my index.php page body. I want to get the selected item name on the same index.php page. Please can anyone help me?
I used JavaScript and Ajax to solve this
I am building a WordPress theme with two pages (home & contact) but when I click on the contact, it doesn't show me the page... Maybe there is a problem in my path defining how can I give it a right path
<li>
CONTACT
</li>
<nav class="topnavbar navbar-default topnav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed toggle-costume" data-toggle="collapse" data-target="#upmenu" aria-expanded="false">
<span class="sr-only"> Toggle navigaion</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="#"><img src="<?php bloginfo('template_directory');?>/image/logo1.png" alt="logo"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="upmenu">
<ul class="nav navbar-nav" id="navbarontop">
<li class="active">HOME </li>
<li class="dropdown">
CATEGORIES <span class="caret"></span>
<ul class="dropdown-menu dropdowncostume">
<li>Sport</li>
<li>Old</li>
<li>New</li>
</ul>
</li>
<li class="dropdown">
DEALERS <span class="caret"></span>
<ul class="dropdown-menu dropdowncostume">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
CONTACT
</li>
<button><span class="postnewcar">POST NEW CAR</span></button>
</ul>
</div>
</nav>
</div>
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 created a dropdown menu and I want to display certain contents within a php file. Unfortunately When I clicking on the sub item the all elements displaying although I just want to show one element (in my case on div with id). I would appreciate I somebody tell me how can i achieve that only the selected id appear.
My dropdown menu:
<li class="parent ">
<a href="#">
<span data-toggle="collapse" href="#sub-item-1"><svg class="glyph stroked chevron-down"><use xlink:href="#stroked-chevron-down"></use></svg></span> Dropdown
</a>
<ul class="children collapse" id="sub-item-1">
<li>
<a class="" href="foo.php" data-toggle="collapse" data-target="dropdown_show1" >
<svg class="glyph stroked chevron-right"><use xlink:href="#stroked-chevron-right"></use></svg> Sub Item 1
</a>
</li>
<li>
<a class="" href="foo.php" data-toggle="collapse" data-target="dropdown_show2">
<svg class="glyph stroked chevron-right"><use xlink:href="#stroked-chevron-right"></use></svg> Sub Item 2
</a>
</li>
<li>
<a class="" href="#">
<svg class="glyph stroked chevron-right"><use xlink:href="#stroked-chevron-right"></use></svg> Sub Item 3
</a>
</li>
</ul>
</li>
My foo.php
<div class="collapse" id="dropdown_show1">
<p> test1</p>
</div>
<div class="collapse" id="dropdown_show2>
<p> test1</p>
</div>