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; }
Related
I have a smidge of custom code on my Squarespace site. I know this isn't the Squarespace forum, but I'm blanking on how to target just one specific element in my custom CSS.
So here's the site: http://www.roboticsrookie.com/
I've tried putting #main-navigation a.folder {padding: 0px}; in my sitewide CSS, but it's proven to be ineffective. Any tips would be greatly appreciated.
The problem seems to be that Squarespace generates an empty navigation link that has padding, but I figure out how to get rid of the specific element's padding.
Screen shot
It's not "padding" it's an anchor tag, probably designed to hold an icon for drop down menus.
Remove the empty anchor tag there if possible.
<li aria-haspopup="true" class="folder-collection folder">
<!-- < this anchor is the space -->
Reviews
<span class="delimiter">/</span>
<div class="subnav">
<ul>
<li class="page-collection">Robotics Reviews</li>
<li class="page-collection">Book Reviews</li>
<li class="blog-collection">Reviews</li>
</ul>
</div>
</li>
Or add CSS :
li.folder-collection.folder > a:nth-child(1) { display: none;}
This should remove that first empty anchor.
You're css selector was incorrect. #main-navigation a.folder is looking for an anchor tag with the class "folder".
In other words <a class="folder" href="#"></a>.
What you have is a list item with the class folder and an anchor tag within that list item. Or <li class="folder-collection folder"></li>.
You can't (easily) target that specific anchor because there's nothing unique about it. There's no class or id apples to the anchor and there are other anchors within that list item. So you need to use more specific selectors, such as nth-child, to select it.
Hi i just wanted some help trying to animate my navigation bar. I want the nav link to still be highlight after I have clicked on the page. So for example if I pressed a "home" button while on the home page the home button would be highlighted to just to show that your definitely on this page. Would use :target or ::active?
<div id="header-content">
<div class="hire"><h3>For Hire</h3></div>
<h1>Black Cab Tours</h1>
<nav class="cl-effect-8">
<ul>
<li><a onclick="tours.html" href="#tab1">Tours</a></li>
<li>About</li>
<li>Contact</li>
<li>Review</li>
</ul>
</nav>
</div>
create a css class like
.active {
background: #c2c2c2;
}
when u click on a HOME page link add this class to that li tag through java script here is the code
$('li').click(function(){
$(this).removeClass('active');
$(this).addClass('active');
});
or you can use gt(), lt() selector to remove active class from else li tags
Your best bet is to use Javascript (e.g. jQuery) to assist you, in native CSS :active will only style the current interaction state as it occurs, :target may be unreliable if you rely on routing, and the final option :focus will fail when clicking elsewhere.
By using jQuery you can more tightly maintain control over the application/removal of a selected state, e.g:
$('#header-content li').on('click', function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
This isolates the relevant elements, adds the class selected when you click one, and removes it from its siblings.
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!
I have a Ul Li with some links , they display like a menu.
I want to set a "dropdown" list but like the classic "form" selectors...
-not a drop-down menu that shows on hover, but a clickable menu.
<ul>
<li>Option 1 </li>
<li>Option 2 </li>
</ul>
Which CSS would make it look like a "form dropdown"?
I attach image to make it clear to what I need:
http://i.stack.imgur.com/nNeoo.png
Assuming, for some reason, you want to keep it as a list. You'll need more than CSS.
Step 1- In the HTML, put the list inside a and also add some HTML to style as the select box. e.g.
<div class="dropdown-emulator">
<div class="dropdown-emulator-selected"></div>
v
<ul>
<li>Option 1 </li>
<li>Option 2 </li>
</ul>
</div>
Step 2- Add CSS to style this to the way you desire. Mainly you'll want to position the list to underneath the box and then display:none.
.dropdown-emulator{
position:relative;
}
.dropdown-emulator ul{
position:absolute;
top:25px;
left:0;
}
Step 3- Create some JavaScript to capture the onclick event of the select button to make the list appear.
For a very basic working example see here http://jsfiddle.net/q5SEF/3/
I think for this, you probably want to use a field, using tags?
http://www.w3schools.com/tags/tag_select.asp
Alternatively.
You could trigger a jQuery visibility toggle on a hidden div, which would show the content of your dropdown, when it is clicked.
I believe what you are looking for is a dropdown select. In stead of having a list of items use a select tag.
<select id="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
Similar to: How to Display Selected Item in Bootstrap Button Dropdown Title
I have a two-level bootstrap menu. I would like when a item is selected and navigated to, that that the drop down list from where the item is, to be always be displayed. Here is my cut down version of the code:
<ul class="menu-system">
<li class="active">
Location
</li>
<li class="dropdown">
Top level Option 1
<ul class="dropdown-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
<li> Option 4</li>
</ul>
</li>
Example: When the Top level Option 1> Option 1 page is active I would like to show the drop down menu. What it does at the moment is only display the top level menu. Since its a bootstrap drop down it will shown by default which is the correct way a drop down menu should work. Not sure if I can make it be shown dynamically. This should always been shown regardless if a user clicks off it or anything else on that page.
I am working in an ASP.NET application. I'm not sure that is has to do with the active tag, or if I have to write some javascript/jquery code to get the current page and display the appropriate drop down menu.
Any help greatly appreciated.
JSFiddle: jsfiddle.net/yZ8C6
Right, I'll preface this by saying that I couldn't get it to work properly in jsfiddle because it doesn't reload the page when the named links are clicked however, I believe this should help
$('.dropdown-menu li a').each(function() {
if($(location).attr('href').indexOf($(this).attr('href')) > 0) {
$('.dropdown-menu').show();
}
});
So what we're doing here is checking the link href on each list item and checking if it is contained within the page link. If any of them are matched, the dropdown will be set to show. Since bootstrap uses visibility and show() uses display:block, the show() should override the visibility: hidden when you stop hovering
See how you go - you might need to modify it slightly for your own purpose
http://jsfiddle.net/yZ8C6/1/
You can get the fiddle to work if you click one of the links then reload the output frame only