I'm new to Liferay 6.1. I am in need of a navigation portlet that can display child and grandchild links using the hover or onmouseover methods. I'm using the default navigation portlet in 6.1 but am unable to figure out how to configure it to also display grahdchild links when hovered over.
Would a task such as this require a custom navigation portlet? Or is the default portlet provided configurable?
Say I have a site structure much like below:
Home
Living Room
Couch
TV
Kitchen
The navigation portlet title would be Home with Living Room and Kitchen being the child displayed. While hovering over Living Room with Couch and TV will appear.
I've tried creating a hook much like the one seen here though to no avail.
Somehting similar to the methods uses for 3 Javascript > 3.1 jQuery as seen here
Update
I placed a ticket with Liferay regarding this issue I am having. Due to the pages not presenting the nested (level-2) navigation until the parent page/tab has been selected giving it the 'open selected' selector. If this level-2 navigation was generated in the HTML the hover css selector would be easily configurable through "Advanced Styling". Will update with resolution. See example below:
See below for visual representation:
NOTE: In this case there are two FIRST_LEVEL_OBJECT and one SECOND_LEVEL_OBJECT.
Instance where second FIRST_LEVEL_OBJECT is selected
<li class="">
<a class="" href="/group/ssc/ssc-hr-contact-list">FIRST_LEVEL_OBJECT</a>
</li>
<li id="aui_3_4_0_1_2072" class="selected ">
<a id="aui_3_4_0_1_2071" class="selected " href="/group/ssc/something-referral-program">FIRST_LEVEL_OBJECT</a>
</li>
Instance where first FIRST_LEVEL_OBJECT is selected and child SECOND_LEVEL_OBJECT is displayed
<li id="aui_3_4_0_1_2166" class="open selected ">
<a id="aui_3_4_0_1_2165" class="open selected " href="/group/ssc/ssc-hr-contact-list"> FIRST_LEVEL_OBJECT</a>
<ul class="layouts level-2">
<li class="">
<a class="" href="/group/ssc/test-gc-1">SECOND_LEVEL_OBJECT</a>
</li>
</ul>
</li>
<li class="">
<a class="" href="/group/ssc/something-referral-program">FIRST_LEVEL_OBJECT</a>
</li>
Here's the way to provide the functionality.
Add child pages to the parent page being displayed on the portlet.
Select Options
Select Configuration
Locate included-layouts configure for All and save - This enables the "layouts level-2" class to render in the HTML without the need for selection first.
Step 2
Select Look and Feel
Navigate to Advanced Styling
Add the following CSS:
li.open ul.level-2 a {
border: none;
background: #E1E1E1;
text-indent: 15px;
}
li.open:hover ul.level-2 {
display: block;
}
If you have more than 1 navigation portlet on the page this implementation will effect all navigation portlets. The only way to isolate 1 portlet to enable this functionality is to:
Select Options
Select Configuration
Locate Bullet Style configure for Arrows (default should be Dots) and save - This will change the HTML class from nav-menu-style-dots to nav-menu-style-arrows.
Back in advanced styling add .nav-menu-style-arrows in front of li.open:hover ul.level-2 as shown below:
.nav-menu-style-arrows li.open:hover ul.level-2 {
display: block;
}
NOTE: I am aware of the Add a CSS rule for just this portlet under Advanced Styling and it didn't seem to make a difference in this instance. I believe it's an underlying issue regarding the Portlet IDs being the same for each navigation portlets.
You have now added the hover CSS selector to a default navigation portlet!
Related
Within a ul element i have a list of anchor tags that represent social media icons like so :
<ul class="social-menu">
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
<li class="social-item">
...
</li>
</ul>
On Android mobile (the only OS that displays such behaviour by default)i'm noticing that when you click an item the highlight colour will appear correctly the first time. However, after that first time if you select a different icon the highlight appears over the previously selected icon.
I've tried explicitly declaring the -webkit-tap-highlight-color, ensuring the correct anchor tag has been clicked with some console logs for each item and even stripping back the content in the <a> tag to make sure that wasn't interfering but with no luck.
Check the yellow block on the top of this page :)
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
You can try :active or :active and :visited instead.
a:active {
background-color: yellow;
}
If you like my answer, please vote. I need some points to write comments :D If its not well answered, write the exact purpouse you need highlighting for. There wil be someone who will help for sure!
I'm trying to have a custom nav-link indicator for the active link like [this][1] but i'm stuck on how I should go about it.
I was thinking about adding a custom div with the color but it doesn't make much sense to me since i'm trying to override the active class in bootstrap. How can I achieve this?
[1]: https://i.stack.imgur.com/9ZtP3.png
A quick fix would be to create a .current class. Then apply the current class to the link of the page that you are on.. Something like
CSS.
.current{
color:#09f;
border-top:3px solid #09f;
}
HTML - HOME PAGE (index.html)
<div class="topnav">
Home
ABOUT
SERVICES
EXTRA
</div>
Then on the next page you add the class to the next link. So for page 2 it will look like this
HTML - ABOUT (about.html)
<div class="topnav">
Home
ABOUT
SERVICES
EXTRA
</div>
Removed the current class from home link and added it to the second link. And on each page you add the class to the link of the page you are on.
I have the following menu implemented on a HTML/CSS theme running on Confluence.
The theme that I'm running provides options to activate drop-down menu's for all menu items by default. However, I'd like the dropdown menu to be displayed for only one of the menu items.
The theme doesn't provide the option to toggle dropdowns for specific menu items, which is why I'm forced to resort to custom CSS.
The HTML corresponding to the RELEASE NOTES menu item is as so --
<li id="rw_category_key_notes" data-name-key="notes">
<a class="rw_custom_url" href="http://localhost:8090/display/DDB/Release+Notes">
<span class="rw_item_name">RELEASE NOTES</span>
<span class="rw_item_dd rw_dropdown_btn"></span>
</a>
</li>
Also, adding the following custom CSS removes the dropdown menu for ALL menu items.
#rw_category_menu.rw_theme_underline ul.rw_category_items li a .rw_item_dd{
display: none;
}
I'd like CSS to conditionally not display the dropdown for the RELEASE NOTES menu item, displaying it only for LEARNING instead.
How would I go about this?
Thanks.
if you want to target only the first instance of element you can use
ul.your-ul-class > li {
// target only the 1st node instance
}
ul.your-ul-class li > li.second-intance {
// target only the 2nd node instance
}
this will only the first instance of the node
ex:
<ul>
<li> -- CSS implemented -- <li>
<li> -- CSS implemented --
<ul>
<li class="second-intance" > -- NO CSS implemented -- </li>
</ul>
</li>
<ul>
Thank you, #misorude!
That solved it, I applied --
#rw_category_key_notes .rw_dropdown_btn { display: none; }
to the theme's custom CSS as you suggested. By itself it doesn't hide the dropdown menu for the RELEASE NOTES menu item, but adding !important at the end makes it work.
#rw_category_key_notes .rw_dropdown_btn { display: none !important; }
I am using Foundation 6's tabs as described here: https://foundation.zurb.com/sites/docs/tabs.html
I want deep links, so I put the attribute data-deep-link=true. This works fine, but as the contents of the different tabs are of different length, the site jumps up and down when switching tabs.
Is there a way to allow deep linking without scrolling to content in Foundation 6?
(I read that this was possible with Foundation 5, with scroll_to_content: false, but I did not find any documentation about this with Foundation 6.)
To explain it a bit more, just with one tab entry:
<ul class="tabs" data-tabs data-deep-link="true" data-deep-link-smudge="true" data-update-history="true">
<li class="tabs-title is-active">
link
</li>
</ul>
And below, the tab content container:
<div class="tabs-content" data-tabs-content="device-manager-tabs">
<div class="tabs-panel is-active" id="jumpToTab"></div>
</div>
From Browser's point of view, the jump to #jumpToTab is correct. But I would like to avoid it anyway, maintaining the functionality of Foundation. If Foundation would be able to use a custom attribute (such as data-tab-id instead of id, which is interpreted by browsers as well), it would be no problem.
Try adding data-auto-focus="false" to your tab container.
Can someone please offer me some advice?
I'm trying to customise a website and its HTML Nav Menu. By default, the menu already highlights the current tab for all existing pre-built pages.
http://webservices.retrotorque.com
I've added a new page to the website - Website Design - and I've added a tab to the menu for that page. All fine. But I can't find a way of making that tab become highlighted for only when that page is viewed.
Here is the existing code for one of the default tabs, which works fine.
<li class="first <#tag:homesection /#>">
Home
Here's my code for the menu tab I've created for my new page:
<li class="levelone <#tag:webdesignsection /#> ">
Website Design
<li>
My problem is that I can't find where to define:
<#tag:webdesignsection /#>
So I may need to find another solution.
I've thought of another approach:
<li class="levelone active">
Website Design
<li>
This code does work, but only in so much as the tab is always highlighted, whichever page is being viewed.
Is there a way of wrapping this up in a 'conditional'? So that it only applies when viewing the websitedesign page. And I could have a non-active alternative, conditionally set up for when viewing any of the other pages.
Thanks.
i think you should put JQuery there that can addClass and removeClass active from li element.
there is for example
var url = document.URL;
$('#example li a[href="'+url+'"]').parent().addClass('active');