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>
Related
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 have this code.When I clicka link in sidebar, it goes to the concerned link and the menu is closed. I want to be opened the link as well as the menu which i have clicked.
I'm designing a 70+ page site that uses a combination of multi-tiered sidebar menus and image maps for navigation, plus breadcrumbs in the navbar to keep track of where you're at.
I want to be able to:
1. open the submenu panels and display the list of menu options available;
2. highlight the menu tree option for the current page; and
3. add the appropriate link for the current page to the breadcrumb pat.
However, when I make a change to the sidebar (e.g., add or delete a menu option, change the grouping or order of the submenu items, etc.), I have to make the exact same change times 70! After 1 or 2 of these revisions, I'd rather not make any more changes!
<div id="sidebar" class="navbar-collapse collapse">
<!-- BEGIN Navlist -->
<ul class="nav nav-list">
<li>
<div class="admin_logo">
<img src="img/logo.png" alt="Inksand Logo">
</div>
</li>
<li>
<a href="index.php">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="fa fa-file-text"></i>
<span>Catalog</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>
<a href="#" class="dropdown-toggle">
<span>Categories</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add Categories</li>
<li>Manage Categories</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>Vendors</span>
<b class="arrow fa fa-angle-right "></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add Vendors</li>
<li>Manage Vendors</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>Products</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add Products</li>
<li>Manage Products</li>
</ul>
</li>
</ul>
<!-- END Submenu -->
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="fa fa-map-marker"></i>
<span>Localization</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>
<a href="#" class="dropdown-toggle">
<span>Countries</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add Countries</li>
<li>Manage Countries</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>States</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add States</li>
<li>Manage States</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>Cities</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add Cities</li>
<li>Manage Cities</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>Areas</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add Areas</li>
<li>Manage Areas</li>
</ul>
</li>
<!--
<li>
<a href="#" class="dropdown-toggle">
<span>Misc</span>
<b class="arrow fa fa-angle-right"></b>
</a>
BEGIN Submenu
<ul class="submenu">
<li>Order Status</li>
<li>Payment
</ul>
</li>
-->
</ul>
<!-- END Submenu -->
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="fa fa-bar-chart-o"></i>
<span>Sales</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Order</li>
<li>Shipment</li>
<li>Return</li>
<li>Payment</li>
</ul>
<!-- END Submenu -->
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="glyphicon glyphicon-list"></i>
<span>Stock</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Add Stock</li>
<li>Manage Stock</li>
<li>Manage Garbage</li>
</ul>
<!-- END Submenu -->
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="fa fa-money"></i>
<span>Tax</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li><a href=add-tax-master.php>Add Tax</a></li>
<li><a href=tax-master.php>Manage Tax</a></li>
</ul>
<!-- END Submenu -->
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="fa fa-user"></i>
<span>Customers</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Manage Customers</li>
</ul>
<!-- END Submenu -->
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="fa fa-cog"></i>
<span>Tools</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Banner</li>
<li>Backup</li>
<li>Setting</li>
</ul>
<!-- END Submenu -->
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="fa fa-file-text-o"></i>
<span>Report</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>
<a href="#" class="dropdown-toggle">
<span>Sales</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Order</li>
<li>Tax</li>
<li>Shipping</li>
<li>Return</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>Products</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Viewed</li>
<li>Purchased</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>Vendors</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Vendor</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span>Customers</span>
<b class="arrow fa fa-angle-right"></b>
</a>
<!-- BEGIN Submenu -->
<ul class="submenu">
<li>Order</li>
<li>Cart</li>
<li>Wishlist</li>
</ul>
</li>
</ul>
<!-- END Submenu -->
</li>
</ul>
<!-- END Navlist -->
<!-- BEGIN Sidebar Collapse Button -->
<div id="sidebar-collapse" class="visible-lg">
<i class="fa fa-angle-double-left"></i>
</div>
<!-- END Sidebar Collapse Button -->
You need to add active class to item you want to be opened.
For example:
<ul class="submenu">
<li class="active">Add Categories</li>
<li>Manage Categories</li>
</ul>
top open Category menu and highlight "Add Categories" item.
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.