I am just trying to play around with the widget on this link and hide all the tabs on the top except "Flights", so I have one in the end instead of four.
I figured out the following CSS snippet for this, which is visible in the html on the link :
[data-cf-product="FLIGHTSHOTELS"] {
display:none;
}
So I am just trying to hide the second li in the ul that has a data attribute with value FLIGHTSHOTELS with this code, but I have no idea why it isn't working. Can anyone help?
[data-cf-selectedproduct="FLIGHTS"] > li:not(:nth-of-type(1)) {
display:none;
}
Related
I am working on css, for me code is getting dynamically so I putting a screen shot for your reference
Now can you please tell me how to apply display block form first iframe, to fifth iframe using nth child, I tried it but it's not working.
If you have any questions please let me know.
Here's my solution:
#wrapper iframe:nth-child(-n+5) {
display: block;
}
Then keep the first 5 iframe in a div with class name="display-block" , then in CSS:
.display-block iframe{
display:block;
}
Give id 'display-block' from 1st to 5th iframe and then add css-
#display-block{
display:block;
}
I have been working on this for quite a while, and cannot seem to find why my dropdown menu is not working. After searching many online forums and asking friends, I have no answer. I just want the dropdown to work. I cannot seem to make the .dropdown_trigger class make the .dropdown class hide, or reappear. Any help would be very much appreciated. Linked below are the pages.
Thanks,
Alex
Index Page CSS File
By inspecting the html page provided in the "Index Page" link, there is only one element with the "dropdown" class, and it's empty. It's not clear what your code is trying to show or hide.
<div class="dropdown"></div>
The "dropdown_trigger" class is located in a table header element:
<th>
PROJECTS
</th>
By inspection, there does not appear to be any javascript to trigger any behavior. It does not show up in Source in the Chrome Inspector. Normally, this would be done with JS to use .show() or .hide(), for example if you had jQuery (there are other ways). Or are you trying to create this without JS at all? Are you trying to create dropdown menus with only CSS?
If so, please check this tutorial out:
https://css-tricks.com/solved-with-css-dropdown-menus/
The key part is here:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
By creating a CSS rule to change the visibility, the dropdown menu can be shown. However, there does not appear to be any HTML content to show in the current linked page you provided. That div is empty.
Okay, so I'm making a responsive navigation out of pure CSS (using a tutorial). The way it works is, when you're viewing the responsive (condensed) menu, the "Menu" button has a hidden checkbox input assigned to it. When the checkbox is checked, the navigation ul#menu (set to display:none; in mobile view) gets set to display:block like so:
input[type=checkbox]:checked ~ #menu {display:block;}
I also have a span with an arrow icon for menu items with submenus that rotates to point down when you hover over the li with the submenu.
<li class="dropdown">Link with Submenu<span class="arrow">></span></li>
.dropdown:hover .nav-arrow {transform:rotate(90deg);}
Standard stuff.
I didn't like the "hover" attribute displaying the submenu in mobile view, so I converted those to checkboxes as well. So tapping the li items will trigger their own checkboxes to display the submenu ul beneath them.
input[type=checkbox]#show-menu:checked ~ .sub-nav {display:block;}
The problem I can't seem to figure out now is how to get the submenu arrows to rotate down when you tap(check) the submenu link.
I've tried moving the input both above and below the li with the arrow (using both checkbox:checked + .nav-arrow and checkbox:checked ~ .nav-arrow respectively), but nothing seems to work.
Does anyone have any ideas of how to appropriately select the span with the arrow after the checkbox is checked? Appreciate it!
As a quick side note, I'm not JavaScript/jQuery savvy, and the point of this is to avoid using it, so any solutions negating those languages would be preferred. :)
Edit: Here's a js fiddle of my exact html/cs setup:
http://jsfiddle.net/nL3cd9mg/
Thanks for your responses so far, I hope the fiddle helps. :P
Ah! I finally got it. Simple solution I overlooked, as always. I just became more specific with my selectors:
input[type=checkbox]#show-cl-menu:checked ~ .show-cl-menu .nav-arrow {
instead of the old
input[type=checkbox]#show-cl-menu:checked ~ .nav-arrow {
Thanks everyone for your input!
If the issue is the actual rotation animation, try something like:
.subnav {
transition: transform .5s;
}
input[type=checkbox]#show-menu:checked ~ .sub-nav {
transform: rotate(90deg);
}
Obviously you'll need to change precisly what that is applied to fit your exact situation. Your question has no html so I can't be more specific to your situation. But you can see the parts that work together to get that rotating arrow effect.
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
I would like to know if it's possible to keep another element open upon clicking span or link. Here is an example of what I am trying to do, if you click on the + sign, the form display, but soon as i get off the span, the form goes away. http://jsfiddle.net/robx/68jmY/
I know it's possible with the help of JQuery, but is it possible to do without any javascript?
Demo: http://jsfiddle.net/68jmY/3/
Something along these lines could work. Here is what I changed...
<span id="expand">+</span>
...
#contact:target { display: block; }
#expand a { text-decoration: none; }
Try the :target pseudo-class: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-a-click-event-with-css/