I need to modify the existing sidebar of this project. I want to hide the sub-menu that I didn't select. I can't figure out how to do this.
below is the HTML file for the side bar:
`
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="sidebar" class="sidebar">
<ul class="list-unstyled">
<li th:each="postDto,iterStat : ${categories}">
<a th:attr="aria-expanded=${#lists.contains(postDto.posturl, url)} ? 'true' : ''"
th:attrappend="href='#submenu'+${iterStat.index}"
data-toggle="collapse" th:text="${postDto.categoryName}">
</a>
<ul th:attr="id='submenu'+${iterStat.index}"
th:classappend="${#lists.contains(postDto.posturl, url)} ? 'show' : ''"
class="list-unstyled collapse" th:each="post : ${postDto.post}">
<li th:classappend="${#strings.contains(url, post.link)} ? 'active' : ''">
<a th:href="${post.link}" th:text="${post.title}"></a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
`
here is the output:
screen shot of the sidebar
I selected Uploading SSS Loan Repayments under the FILE UPLOADS menu. I want to only display the sub-menu under the FILE UPLOADS but the other sub-menu under UPLOAD AND TRANSACTION STATUS , eGOVERNMENT SERVICES is also on display.
Related
So I have a problem and as per usual given I am trying to learn frontend stuff i am out of my depth. I am currently writing a website that has a forum, live chat, profile, and a few other things. These I would call "Menu items" with sections of those i.e. unread messages being placed on a dropdown menu item for messages. As per blade fashion I am using a menu blade which is part of the layout blade and finally the page incorporates whichever layout it wants.
The last solution I tried after seeing a post was to add {{ Request::segment(1) === 'messages' ? 'active' : '' }} or {{ Request::segment(1) === 'messages' ? 'active' : 'null' }} into the class section of the corresponding li for the menu item, this successfully updated some of the menu items styles but also broke the dropdown functionality.
Below is my code which still has my last solution contained within it:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand {{ Request::segment(1) === '/' ? 'active' : '' }}" data-toggle="tab" href="/">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li role="presentation" class="dropdown {{ Request::segment(1) === 'forum' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="/forum" role="button" aria-haspopup="true" aria-expanded="false">Forum<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Newest Posts</li>
<li>Trending</li>
<li>Something</li>
<li role="separator" class="divider"></li>
<li>Create New Post <span class="glyphicon glyphicon-edit"></span></li>
<li>Your Posts</li>
</ul>
</li>
<li class="{{ Request::segment(1) === 'chat' ? 'active' : null }}">Chat</li>
<li role="presentation" class="dropdown {{ Request::segment(1) === 'messages' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="#" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Unread</li>
<li>Read</li>
<li>Sent</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default"></nav>
I appreciate I am new and that most solutions require something like js or jquery, if this is the case you will need to be explicit in how and where I put it as I have never even thought of using it yet!
Thanks!
I did have this problem recently, I found two useful packages in packagist.org
watson/active: This package is very simple and useful you can add active or any other classes to your menu base on their route, this could be route, action or url activation.
lavary/laravel-menu: I personally found this package most useful than the previous one, you can create hierarchical menus, activate a menu base on route, action or url, or even you can activate your menu base on any other url (this is useful for parent menus, e.g. when you are in a child link related to a parent link in your menu, both child link and parent link will be activated.). This package is most complicated than the other one, but I think the documentation written very clear and if you read it carefully you can do anything you want with your menus.
Here is my solution
<a class="#if(Request::is('home')) active #endif" href="{{ route('home') }}">Home</a>
I've been doing this many times and I've come up with 2 solutions depending on the type of navigations.
The easiest, works fine when you have simple entities (like Post, Category, Tag) and 1 menu entry for each.
Posts
This will match all classic endpoints such as /posts, /posts/new, /posts/{post}, ...
I've been using this for my latest projects because it's simple and allows much more customisation. It's pretty useful if you have something like nested navigation items.
Posts
All Posts
New Post
Posts Settings
Categories
All Categories
New Category
I'm just passing a variable to my layout like this.
// views/posts/index.blade.php
#extends('layouts.app', ['activeMenu' => 'posts.index'])
#section('content')
// Your content
#stop
// views/layouts/app.blade.php
<html>
//...
<li class="{{ $activeMenu == 'posts.index' ? 'active' : '' }}">All Posts</li>
<li class="{{ $activeMenu == 'posts.create' ? 'active' : '' }}">New Post</li>
// ...
You can also play with nested active states like this.
// views/posts/index.blade.php
#extends('layouts.app', ['activeMenu' => 'posts' 'activeSubMenu' => 'posts.index'])
#section('content')
// Your content
#stop
// views/layouts/app.blade.php
<html>
//...
<li class="dropdown {{ $activeMenu == 'posts' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab">Posts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="{{ $activeSubMenu == 'posts.index' ? 'active' : '' }}">All Posts</li>
<li class="{{ $activeSubMenu == 'posts.create' ? 'active' : '' }}">New Post</li>
</ul>
// ...
Otherwise I suggest you take a look at spatie/laravel-menu
I have been trying to work out how to produce a list, where if you click on one of the objects in the list, it becomes active. I have managed to get it working in the non-dynamic version of the code with ease. However, working on AngularJS dynamic version, I just can't seem to get it to work. The data is ok, so it can't be data related, it has to be my dynamic code that is not working.
This is a working piece of code (however not dynamic)
<ul class="nav nav-pills" ng-init="catVal = 1">
<li ng-class="{active: catVal===1}">
Category 1
</li>
<li ng-class="{active: catVal===2}">
Category 2
</li>
<li ng-class="{active: catVal===3}">
Category 3
</li>
</ul>
Now What I really want is an AngularJS dynamic version of this code. This is what I have tried and failed so far.
<ul class="nav nav-pills">
<li ng-repeat="category in model" ng-init="catVal = 1" ng-class="active: catVal === category.catID ">
{{category.catName}}
</li>
</ul>
The catID is associated with the category and should give the same results as the previous list. I get the names in the correct place, just the value is not working.
try this.
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.rowIndex = -1;
$scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"asd","score":10}];
$scope.selectRow = function(index){
if(index == $scope.rowIndex)
$scope.rowIndex = -1;
else
$scope.rowIndex = index;
}
});
.active{
background-color:#a11af0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
<ul class="nav nav-pills" ng-init="catVal = 1">
<li ng-repeat="item in items" ng-class="{'active':rowIndex == $index }" ng-click="selectRow($index)">
{{item.name}}
</li>
</ul>
</div>
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together
I use kendo view ,
my html code is :
<div id="permission" data-role="tabstrip" data-animation="false">
<ul class="bd-doc-navigation-tabstrip tabstip-header" data-freezable="false">
<li class="k-state-active">
<p>Rigs</p>
</li>
<li>
<p>Actors</p>
</li>
</ul>
<div id="permission-tabstrip-1"></div>
</div>
but after rendering page instead of "permission-tabstrip-1" I see "permission-1".
I dont know whats going happen . I havent used "permission-tabstrip-1" anywhere else .
I changed :
<div id="permission" data-role="tabstrip" data-animation="false">
to :
<div id="permission-tabstrip" data-role="tabstrip" data-animation="false">
I'm using bootstrap 2.2.1 and for whatever reason the data-parent attribute is not doing what is intended. It does not close a previous opened target when i click another target. Here's a fiddle with the code below, any ideas on how to fix this ?
<div id="accordion">
<ul>
<li>
<a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
<ul id="document" class="collapse">
<li> suboption 1</li>
<li> suboption 1</li>
<li> suboption 1</li>
</ul>
</li>
<li>
option 2
</li>
<li>
option 3
</li>
<li>
<a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
<ul id="document2" class="collapse">
<li> suboption 1</li>
<li> suboption 1</li>
<li> suboption 1</li>
</ul>
</li>
</ul>
</div>
It says in the Bootstrap Documents:
If a selector is provided, then all collapsible elements under the
specified parent will be closed when this collapsible item is shown.
(similar to traditional accordion behavior - this is dependent on the
panel class)
so it has to be used with panel-groups, but you can override the javascript anyway.
http://getbootstrap.com/javascript/#collapse-options
I couldn't get this to work either - this may be something in the Bootstrap JS related to the fact that you are using lists rather than divs?
So to get it to work, I had to override the click event. Based on this question here: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap
I added an accordion-toggle class to each option link, and then added the following JavaScript to get it to work:
$(document).on('click', '.accordion-toggle', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = parent && $(parent).find('.collapse.in');
// From bootstrap itself
if (actives && actives.length) {
hasData = actives.data('collapse');
//if (hasData && hasData.transitioning) return;
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
This fiddle shows it in action.
've been struggling with bootstrap collapse as well. I was trying to something do something slightly different. I wanted inline toggle behavior. See my JS fiddle below. What I found is that bootstrap seems to require the existence of the "accordion-group" div in addition to the data-parent attribute covered in their docs. So either there is a bug in the JS or their docs do not include it. I also had to zero out the styles on the accordion-group div...
http://jsfiddle.net/cssguru/SRFFJ/
<div id="accordion2">
<div class="accordion-group" style="border:0;padding:0;margin:0">
<div id="collapseOne" class="collapse in">
Foo Bar...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Show Herp Derp
</a>
</div>
<div id="collapseTwo" class="collapse">
Herp Derp...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Show Foo Bar
</a>
</div>
</div>
</div>
You have to use accordion-group class in your items, see issue https://github.com/twitter/bootstrap/issues/4988