i want to know how to add class active in codeigniter when we separate the view into 3 file. such as :
header.php
page1.php ... page10.php
footer.php
from this thread, there's no way how to do it when separated the view.
this my header look like:
<body class="skin-red">
<div class="wrapper">
<header class="main-header">
</header>
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="<?php echo base_url();?>assets/dist/img/admin.png" class="img-circle" alt="User Image" />
</div>
<div class="pull-left info">
<p>Username</p>
<small>Privilage</small>
</div>
</div>
<!-- search form -->
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" id="sidebar">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-users"></i> <span>Users</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-chevron-right"></i>User List</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-hospital-o"></i> <span>Provider</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-chevron-right"></i>Provider List</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-book"></i> <span>Product Info</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-chevron-right"></i>List Product Info</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-book"></i> <span>Procedure</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-headphones"></i>Procedure List</li>
<!-- <li><i class="fa fa-user"></i>Link Customer Portal</li> -->
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-film"></i> <span>Video Upload</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-chevron-right"></i>Video Data</li>
<!-- <li><i class="fa fa-chevron-right"></i>Prosedur</li> -->
<!-- <li><i class="fa fa-chevron-right"></i>Informasi NAB</li> -->
<!-- <li><i class="fa fa-chevron-right"></i>Demo(Video)</li> -->
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-camera-retro"></i> <span>Slide Show Wallpaper</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-chevron-right"></i>Slide Show Data</li>
<!-- <li><i class="fa fa-chevron-right"></i>Prosedur</li> -->
<!-- <li><i class="fa fa-chevron-right"></i>Informasi NAB</li> -->
<!-- <li><i class="fa fa-chevron-right"></i>Demo(Video)</li> -->
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-camera-retro"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-chevron-right"></i>Login</li>
</ul>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
</div>
</body>
to access the content, this is the how i do:
<section class="content">
.....
</section>
and this my footer view:
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.0
</div>
<strong>Copyright © 2014-2015</strong> All rights reserved.
</footer>
</div><!-- ./wrapper -->
<script></script>
<script></script>
</body>
</html>
i want to made,when user click the treeview submenu it will become active,
right know when i click the treeview submenu. it will reload not become active.
in sample i downloaded AdminLTE active class define in each submenu page, such as menu - <li class="active">submenu</li>
regards,
bobby
cmiiw
================================================
i found the js code, it is in. app.js.
$.AdminLTE.tree = function (menu) {
var _this = this;
$("li a", $(menu)).click(function (e) {
//Get the clicked link and the next element
var $this = $(this);
var checkElement = $this.next();
//Check if the next element is a menu and is visible
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
//Close the menu
checkElement.slideUp('normal', function () {
checkElement.removeClass('menu-open');
//Fix the layout in case the sidebar stretches over the height of the window
//_this.layout.fix();
});
checkElement.parent("li").removeClass("active");
}
//If the menu is not visible
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
//Get the parent menu
var parent = $this.parents('ul').first();
//Close all open menus within the parent
var ul = parent.find('ul:visible').slideUp('normal');
//Remove the menu-open class from the parent
ul.removeClass('menu-open');
//Get the parent li
var parent_li = $this.parent("li");
//Open the target menu and add the menu-open class
checkElement.slideDown('normal', function () {
//Add the class active to the parent li
checkElement.addClass('menu-open');
parent.find('li.act').addClass('active');
// parent_li.addClass('active');
//Fix the layout in case the sidebar stretches over the height of the window
_this.layout.fix();
});
}
//if this isn't a link, prevent the page from being redirected
if (checkElement.is('.treeview-menu')) {
e.preventDefault();
}
});
};
here's the first schema of the layout.
in page.A <li> was active so page.B, when i click one of the it become active.
after slicing the page into codeigniter way, i separate into 3: header,content(body),and footer.
i remove all the class in tag <li>..
i try to modify like thie below:
checkElement.addClass('menu-open');
parent.find('li').on('click', function(){
$(this).addClass('active');
});
it wont work,
wonder if u guys had a ways.
sorry for my bad english :-D
It is easy and work properly
$(document).ready(function(e){
var url=window.location
$('.treeview-menu a').each(function(e){
var link = $(this).attr('href');
if(link==url){
$(this).parent('li').addClass('active');
$(this).closest('.treeview').addClass('active');
}
});
});
Try preventDefault()
$('.treeview').on('click', function(e) {
e.preventDefault();
});
try this code
Put below code before body tag ends
$(document).ready(function(e){
$('.treeview a').each(function(e){
var pathname = window.location.pathname.split("/");
var url= pathname[pathname.length-1];
var link = $(this).attr('href');
if(link==url){$(this).parent('li').addClass('active');}
});
});
and where it is written " $("li a", $(menu)).click(function (e) {"
put below line after it
$('.treeview .active').removeClass('active');
e.preventDefault();
$(this).addClass('active');
Related
I'm trying to 'include' a php file in a html template when a nav-item is selectd. The code below make active the item on click it. What I want to do is, at the same time it becomes active,load the php file with de same name than '$this' value is. I mean:
on click in tab 'two' ($this value), load in div '#contFl' the php file named 'two.php' at time its become 'active'; load 'one.php' on click in 'one' item;...
Tried a few ways of text estructure in 'load(...)' -last one on last code line- with no results. Pleasefull to have some help.
<script type="text/javascript">
$(document).ready(function(){
$("ul.navbar-nav > li").click(function(e){
$("ul.navbar-nav > li").removeClass("active");
$(this).addClass("active");
$("#contFl").load('"'+$(this).val()+'.php');
});
})
HTML code of navbar
<div id="collapsibleNavbar" class="collapse navbar-collapse justify-content-around">
<ul id="collUl" class="navbar-nav col-12 col-lg-auto me-lg-auto mb-1 mb-md-0">
<li class="nav-item nav-link active" id="uno" role="button"><i class="fa fa-home" aria-hidden="true"></i> Inicio</li>
<li class="nav-item nav-link" id="dos" role="button"><i class="fa fa-envelope" aria-hidden="true"></i> Dos</li>
<li class="nav-item dropdown" id="tres"><a class="nav-link dropdown-toggle px-2" href="#" role="button" data-bs-toggle="dropdown"><i class="fa fa-list" aria-hidden="true"></i> Tres</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="index.php"><i class="fa fa-home" aria-hidden="true"></i> Inicio</a>
<a class="dropdown-item" href="tres.php"><i class="fa fa-list" aria-hidden="true"></i> Tres</a>
<a class="dropdown-item" href="dos.php"><i class="fa fa-envelope" aria-hidden="true"></i> Dos</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="cuatro.php"><i class="fa fa-user" aria-hidden="true"></i> Cuatro</a>
</ul>
</li>
<li class="nav-item nav-link" id="cuatro" role="button"><i class="fa fa-user" aria-hidden="true"></i> Cuatro</li>
</ul>
Code in template where include new php file.
<?php
include(ASSETS."/navbar.php");
include(ASSETS."/banner.php")?>
<div id="contFl" class="container-fluid">
<!-- HERE THE NEW 'INCLUDE' -->
</div>
I will need some help with the menu showing on mobile. When the STORE menu is clicked on mobile version it does not expand and instead closes the general menu. Here is the link of the web page. Any help will be appreciated.
<body> looks like
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar">
Menu HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse header-transparent">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="page-scroll nav-link" href="#page-top">HOME </a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#frames"></a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="ppgtrikes.php"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORE
</a>
<div class="dropdown-menu">
<a class="page-scroll nav-link" href="#engines">
<font color="#000000"></font>
</a>
<a class="page-scroll nav-link" href="#harnesses">
<font color="#000000"></font>
</a>
</div>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#contact"></a>
</li>
</ul>
</div>
</div>
<!-- End of Container -->
</nav>
You have 2 Bootstrap navs, one inside the other.
UPDATED
In this file http://www.evoaviation.co.uk/js/custom.js you have part of code at the beginning
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
$('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
Replace it with following
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
// checking if there is no 'data-toggle' in <a>
$('.navbar-collapse a:not([data-toggle])').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
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.