im trying to add "not" conditional to routerlink using Angular 2. My use case is that i want the pages to have a default class everytime im not in the home page, and i dont want to add the class for every page. It is for showging a sidebar, that only is hidden on home page. So:
[routerLink]="/home" routerLinkActive="fit sidebar"
That is what i would like to negate. Like this:
[routerLink]!="/home" routerLinkActive="fit sidebar"
Thanks!
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;
}
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.
I've got the following site map defined in Boot.scala:
SiteMap(
Menu(S ? "Home") / "index",
Menu(S ? "About") / "about",
Menu(S ? "Work") / "work",
Menu(S ? "Contact") / "contact"
)
With the following markup:
<lift:Menu.builder />
What I'm trying to do is in someway identify the menu items to style each seperatly.
Is there a way to define a unique class for each sitemap entry or perhaps add the name of the menu item to the title attribute which I could also use to style them?
So the markup is rendered like this:
About
Or
About
Thanks in advance, any help much appreciated :)
UPDATE
Until a more robust way of doing this is found, I've opted to style each link in the menu via simple attribute reference, e.g:
a[href="/about"] { color:#000; }
I would take a look at the Menu.item section here: http://exploring.liftweb.net/master/index-7.html#toc-Subsection-7.2.3
That should allow you to add specific classes to particular items of the SiteMap, which sounds like exactly what you want to do.
If your site menu is not really simple, you can consider to hard-code your menu inside the HTML code. Obviously, Lift's simple menu can't handle everything.
You can also create menu groups and render these groups separately.
Drupal 6.28:
I'm re-theming a particular section of a site and the new design called for five pages to be displayed as five tabs on one page with the appropriate one shown when either clicking on the tab itself or in an expanded menu to the left.
I created all that in html and jquery so that I could deep-link the tabs, ie... someone can click on any menu link and hit the page with the appropriate tab open instead of having to go to the master page and then click the appropriate tab. (using location.hash)
This is all working fine, but the last tab is to house content that currently is a view set as a block.
What is the best way to pull that view/block into the html div I have set aside for that specific content?
I have used this great snippet before:
<?php
$block = module_invoke('block', 'block', 'view', '15');
print $block['content'];
?>
which allows one to place any block anywhere, but with a view with a display set as a block, I'm not having any luck invoking that view. Also, I'd had to have to use "php" instead of 'full html' on the node since it's just a snippet but as it's not currently working, it probably doesn't matter.
so, I'm trying to figure out how to have something like this:
<!-- all the other tabs content-->
<div id="fifthTab">
all the content from the view which is set to 'display like a block'
</div>
I'm fairly new to Drupal and not even sure if I create a page display how I would call that data anyway.
So my html structure is:
MAIN PAGE LINK
-sub link/tab 1/default
-sub link/tab 2
-sub link/tab3
-sub link/tab4
-sub link/tab5
So if someone either clicks on on the sub link/tab 5 in the left nav or clicks on the actual tab 5 or enters the url xxx/#tab5, the appropriate tab is show, the rest hidden. That's all working great, I just cant get the view content to show in that tab5.
so a page template based on the url is the easiest. The variable $content is just placed in the last tab and all other html content for that specific page is just put in the template.
At least this way, as docs are added, it's still dynamic and the static info is easy to edit if needed.
Just in case something similar comes up for someone else.
On the "services" and "company" pages I have a right sidebar list. This is being included with PHP. So far I have a CSS class for normal and a CSS class for when you hover each item in the list. I want to have a new class for when each list item is selected. So for example in services, the user clicks on "family planning" and when they get to the family planning page....the family planning list item has a grey background. Is this possible?
http://beulahprint.ie/index.php
Cheers,
Colm
Nothing in CSS will let you match an element based on it's href attribute resolving to the current URL.
Add a class to the menu item (or the body element) server side based on the page, then use a write a selector to match that.
There are a few ways to accomplish this but you'll need a little bit of code. It works like follows:
On your page you should somehow declare which page it is (by using a querystring or session)
Then you should parse this value and write out the class name of the menu dynamiclly.
Yes it is possible, when rendering the sidebar/menu, check if they are in a specific page/namespace and add a class to it which has grey background.
The general design people use for such scenarios is to place all items related to one menu item in one namespace.
like all admin items will be under */admin/*, so that when rendering the menu, they will check the url and add the class to it.