I am trying to pass to bootstrap navbar an array in jade.
I already did this achievement:
block linkSelected
-var selected = 'index';
-var menu = { 'Sobre': '/sobre', 'blog': '/blog', 'Contato': '/contato' };
and in header:
#navbarCollapse.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right
each val, key in menu
if selected === key
li.nav-item.active
a.nav-link(href=val, title=key)= key
else
li.nav-item
a.nav-link(href=val+'.html', title=key)= key
So i ended up to this in menu:
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">Sobre</li>
<li class="nav-item">blog</li>
<li class="nav-item">Contato</li>
</ul>
Does anyone know in pug/jade how to achieve the dropdown menu? I only achieved the first level menu... :/
Thank you so much and Happy New Year!
Related
I hope this is a good question and I am not just missing something total simple. I am very new to Angular 2 and I am always into saving code lines and time :)
I want to change the active css class of my tabs (I dont want to use router!) and I ended up with something like this:
activeTab: string;
switchActiveTab(newTab: string) {
this.activeTab = newTab;
}
<div class="buttonLine">
<ul class="nav nav-pills">
<li role="presentation" [ngClass]="{'active': activeTab === 'Example Tab 1'}" (click)="switchActiveTab('Example Tab 1');">
<a>Example Tab 1</a>
</li>
<li role="presentation" [ngClass]="{'active': activeTab === 'Example Tab 2'}" (click)="switchActiveTab('Example Tab 2');">
<a>Example Tab 2</a>
</li>
</ul>
</div>
So I had to declare the string value "Example Tab 1" three times in my HTML. This is pretty annoying, especially when I would have 5 or more tabs here.
Is it possible to avoid reapeating the expression "Example Tab 1" three times in my HTML? Or is it possible to do this kind of stuff in a more elegant way?
Method 1
To simplify the template code, you can declare the list of tabs in the component class:
public tabList: Array<string> = ["Example Tab 1", "Example Tab 2"];
and generate the li elements with the *ngFor directive:
<li *ngFor="let tab of tabList" [ngClass]="{'active': activeTab === tab}" (click)="switchActiveTab(tab);" role="presentation">
<a>{{tab}}</a>
</li>
Method 2
To keep the code more declarative, each item could refer to itself with a template reference variable instead of using the tab caption (as illustrated in this plunker):
<div class="buttonLine">
<ul class="nav nav-pills">
<li #tab1 [ngClass]="{'active': activeTab === tab1}" (click)="switchActiveTab(tab1);" role="presentation">
<a>Example Tab 1</a>
</li>
<li #tab2 [ngClass]="{'active': activeTab === tab2}" (click)="switchActiveTab(tab2);" role="presentation">
<a>Example Tab 2</a>
</li>
</ul>
</div>
The code would be modified accordingly:
activeTab: HTMLElement;
switchActiveTab(newTab: HTMLElement) {
this.activeTab = newTab;
}
HTML :
<li class="active"><span class="glyphicon glyphicon-dashboard"></span>Dashboard </li>
<li><a ng-click="viewAccount()"><span class ="glyphicon glyphicon-user"></span>Account</a></li>
I need to make Account menu as Active when function viewAccount() is called these functions are handled in same page. may be for Dashboard I can call a function dashboard() but how to make the menu active.
You can use ng-class:
<li ng-class="{'active': menu == 'dashboard'}">
and in hte viewAccount() just set the menu variable.
I am using bootstrap nav bar with codeigniter as backend.
Now In my application i want to change the < li> class to active dynamically for each page.
So i can known i am on which page currently.
Below is my code:
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Company</li>
<li>Users Management</li>
<li>Key Management</li>
<li>Activated Devices</li>
</ul>
<ul class="nav navbar-nav navbar-right">
You can use this javascript to add active class based on current url please try it
<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
});
</script>
Can't you just use this replacing your <a> tags. This will match the current uri string, with the links href attribute. If it matches, it add's an active class to the link. You can style the .active using you
Company
So the entire code will be.
<ul class="nav navbar-nav">
<li>Dashboard</li>
<li>Company</li>
<li>Users Management</li>
<li>Key Management</li>
<li>Activated Devices</li>
</ul>
<ul class="nav navbar-nav navbar-right">
Your pages should know which menu should be set as active.
Try adding an id to your <li> and add a javascript code to your pages to set the active menu based on the ID.
Example:
<ul class="nav navbar-nav">
<li id="menu-dashboard" class="active">Dashboard</li>
<li id="menu-company">Company</li>
<li id="menu-user">Users Management</li>
<li id="menu-key-management">Key Management</li>
<li id="menu-activation">Activated Devices</li>
</ul>
<script>
var menuid = "menu-dashboard";
$(function() {
$('.nav li').removeClass('active');
$(menuid).addClass("active");
});
</script>
Pages:
Add the following javascript lines to your pages
Company page
menuid = "#menu-company";
User page
menuid = "#menu-user";
You can achieve it by using jQuery or JavaScript.
jQuery example:
$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
The jQuery in the accepted answer do not know the difference if the visitor is coming from http://example.com or http://example.com/index.php and would not activate the "home" menu-item. This is my fix for that.
HTML This is a snippet from my menu:
<div class='navbar'>
<a href='index.php'><div class='nav-icon icon-home'></div>Hem</a>
<a href='calender.php'><div class='nav-icon icon-calender'></div>Kalender</a>
<a href='exchange.php#utbyte'><div class='nav-icon icon-byte'></div>Byten</a>
</div>
This is a function I've added to my database controller class to find out what protocol the visitor use:
public static function adr_protocol()
{
$str = 'http://';
if(isset($_SERVER['HTTPS']) && 'on' === $_SERVER['HTTPS']) $str = 'https://';
return $str;
}
jQuery:
;var ix = '<?php echo DBController::adr_protocol()."{$_SERVER['HTTP_HOST']}/"; ?>';
var url = (window.location==ix)?window.location+'index.php':window.location;
$('div.navbar a[href="'+ url +'"]').parent().addClass('active');
$('div.navbar a').filter(function() {
return this.href == url;
}).addClass('active');
The bootstrap navigation bar below is malfunctioning. The 'home', 'message', and 'public1' tabs change to the desired deep blue background when clicked.
Specifically, the public2, public3, public4, and register tabs only give a shadow background when clicked. The problem with public2, public3, andpublic4is that clicking on them causespublic1to turn deep blue, while the selected tab gets a shadow background. Similarly, whenregisteris clicked, theregister` button is shadowed, but everything else has a white background.
The desired effect is for the chosen/active tab to be deep blue. What specific changes need to be made to the code below to get any selected tab to be deep blue?
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}">home</li>
<li ng-class="{active:tab('message')}">message</li>
<li ng-class="{active:tab('public1')}">public1</li>
<li ng-class="{active:tab('public2')}">public2</li>
<li ng-class="{active:tab('public3')}">public3</li>
<li ng-class="{active:tab('public4')}">public4</li>
<li ng-class="{active:tab('register')}">register</li>
<li ng-show="authenticated2()">logout</li>
</ul>
The tab() method in the navigation.js controller is:
$scope.tab = function(route) {
return $route.current && route === $route.current.controller;
};
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