I have a toolbar with 3 menu items and I want to achieve that if I click on one of them the text would change it's color. The closest I get to achieve this is I used focus in css but it's not the best because if I click somewhere else it's gone. Is there any possible way to achieve this?
The admin should be in green color as well till I click on another menu item e.g. time management.
If you follow a pattern for url then it's possible
For Example
Admin has link /admin
Users has link /admin/users
Logs has link /admin/logs
Then in your navbar use ng-class="getClass('/admin')". Then you can use function something like below
$scope.getClass = function (path) {
return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}
Refernce: SO:how-to-highlight-a-current-menu-item
Related
I have a 'Meet Our Team' section on my home page and I want to be able to click a menu button 'Meet Our Team' and be directed there, even if I click it from another page.
My problem is that if I use #meet_our_team as the URL, the link doesn't work from another page. However, if I use a relative or absolute path plus '#meet_our_team' (e.g. home/#meet_our_team), the functionality works but it becomes styled like the 'Home' button when on the home page (i.e. the button looks pressed).
This is because the CSS class 'current-menu-item' is applied to the list element.
Is there a way I can have a working button that also styles correctly? I assume if I can suppress aria-current, it would work but I don't know if that is possible.
It was a simple enough fix. Simply add the below to Additional CSS. On my first attempt, I didn't specify 'a' and so it didn't work
#menu-item-1745 a {
color: #5a5a5a;
}
I have a problem styling the KENDO UI dialog:
I have a component, lets call it WatComponent. Inside it,
If the user clicks the "Forbidden" button, I want a warning styled dialog to pop-up, with yellow/orange colored titlebar,
If the user clicks the "DANGER" button, I want an error styled dialog to pop-up, with red titlebar.
If I open the dialog via the DialogService:
const dialogRef = this.dialogService.open({
title: this.danger ? 'DANGER!' : 'Warning!',
content: WatDialogComponent
});
const userInfo = dialogRef.content.instance;
userInfo.danger = this.danger;
How can I apply two different CSS styles (in any way) to make the titlebar appear in different colors when opened from the same component?
I have tried
adding a class to the <div kendoDialogContainer class="myTitlebarClass"></div> but of course, I didnt expect it to work (it didnt).
giving the property danger some functionality to pass it to the titlebar, but unfortunately, it affects only titlebars inside WatDialogComponent, and I want to access the titlebar that is one step outside.
looking for a property in the DialogRef that would let me do that.
Is there a straightaway solution to this that I'm missing? If not, is there a workaround?
Looking at the DialogRef API
https://www.telerik.com/kendo-angular-ui/components/dialogs/api/DialogRef/
it includes the ComponentRef which can be used to get the host element and add a class:
this.dialog = this.dialogService.open({
title: 'Warning',
content: 'Warning'
});
this.dialog.dialog.location.nativeElement.classList.add('warning');
https://plnkr.co/edit/RkW3zHFbmMuQqk4UDYNY?p=preview
Connected to this question: https://wordpress.stackexchange.com/questions/300387/default-menu-items-for-custom-theme-but-easily-delete-able-customize-able-by-u
So, using this bootstrap template as an example again: https://blackrockdigital.github.io/startbootstrap-creative/
the menu items would be connected to the sections so when clicked on they are scrolled to. However, how would I dynamically link in a ux/ui friendly way the menu items to each respective section so that when user goes to change an item or menu they would link back to that section?
In other words, I would have a default easily change-able menu and menu items come with the theme. However, how would I go about making it easy for the user to connect a different menu item to the same section? And how would I dynamically connect a menu item to said section?
Assuming your theme uses the native WordPress menu page for building custom menus for your respective website, this is relatively easy. In order for this to work properly, there will need to be some custom JS added to your page to handle scrolling down to a given section.
Sections themselves will need to also have a unique identifier, so the JS provided can actually scroll to the given section. Here is an example on how to accomplish this:
We will start by creating and editing a WordPress menu. Be sure to set up the links from the menu items so they will work with the upcoming anchor scroll-ability. These url's MUST match the ID of the section on the front-end you are wishing to scroll to.
We now can utilize jQuery to trigger a click function, which will scroll the user down to the respective section on the page. Here's an example of a function you can use. Remember, some formatting of the function will be required as you need to make sure the parent wrapper of your menu has the ID which the function is looking for. Here's the function:
$('#navigation a').on('click', function (e) {
//Stop page from doing default stuff
e.preventDefault();
//Get content panel ID from clicked element
var contentPanelId = $(this).attr("href");
//Animate to clicked element
$('html, body').stop().animate({
scrollTop: $(contentPanelId).offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
Now, to output the menu inside a template, we will go ahead and use the wp_nav_menu() function: https://developer.wordpress.org/reference/functions/wp_nav_menu/ . Be sure to wrap the use of this function around the a parent DIV with an ID matching what's being called inside your JS function (in this example, the ID is "navigation"). Here's an example of the expected markup (remember, I've named my menu menu-test in the back-end):
<header id="navigation" class="site-header" role="banner">
<?php wp_nav_menu( array('menu' => 'menu-test' ) ); ?>
</header><!-- #masthead -->
That should be it! Obviously additional styles are going to be required to lay out the menu however you'd like it to appear on your page. The most important to remember for this concept is that the markup elements' ID's MUST match the hash'ed out URL of the menu item. If there's no div on page with respective ID, the JavaScript will have no way of knowing what element to scroll to.
Here is a live example of the menu functioning the way you want it to on my personal portfolio.
Making UI of my app using code only.
Can't find how customize couple elements:
1. Button 'Back' now it looks like:
and it should looks like:
So, how I can get rid of 'Back' text from button title, keeping '<' system icon there? And how I can change colors of back button and title of navigation bar?
try
self.navigationController?.navigationBar.tintColor = UIColor.white
Try:
override func viewDidLoad(){
//any other initial stuffs
//for the bar
navigationController?.navigationBar.tintColor = UIColor.black
//for the button
navigationController?.navigationBar.backItem?.titleView?.tintColor = UIColor.white
}
Follow the instruction from your xcode. You can do this easily. I also marked on the image . Select 1. Select the Standard Editor, 2. Show the File inspector 3 Set global Ting
With XCode 12.3 can change the Title Color and Back Button using the following.
website I am talking about: http://www.formunddrang.de
When a menu item is active I am using the tag li.selected_page to set the color of the menu item to blue.
In order to link to a category instead of a wp-page I am using the plugin "Page Links To" which allows me add a link instead of a page to the menu. This menu item does not have the li.selected_page tag - it does not seem to know at all when it has been selected.
Does anyone see a way to access the status of the "Einblicke" menu item so i can make it blue when it is active?
Thanks a lot!
You might do it via jquery:
var url = window.location;
// Will only work if string in href matches with location
$('#cms-nav-top-menu a[href="'+ url +'"]').addClass('active');
// Will also work for relative and absolute hrefs
$('#cms-nav-top-menu a').filter(function() {
return this.href == url;
}).addClass('active');
Give it a try and tell me if it's working.