I have a navbar that shows a sub navbar on hover. I need to have another sub navbar (so a sub sub navbar) show on a button hover in the sub navbar.
All I need to do is change the Display from "None" to "Block" on hover of the ID= preStart.
This is what I have:
.subsubnavbar-content {
display: none;
position: absolute;
left: 300px;
background-color: #eee;
color: white;
width: 50%;
z-index: 1;
}
#preStart:hover .subsubnavbar-content{
display: block;
}
You can first have a look at this answer to understand the class selectors better.
Now, coming to understanding WHAT is working and WHY is it working. Your subnav-content appears as block on hover of subnav because your subnav-content is a descendent of subnav in the html.
.subnav:hover .subnav-content {
display: block;
}
<div class="subnav">
<div class="subnav-content">
...
</div>
</div>
Whereas your .subsubnavbar-content is NOT a descendent of #preStart in the HTML. For your display: block to work, you need to place your .subsubnavbar-content inside #preStart
<a id="preStart">
Pre-Start Checklists
<i class="fa fa-caret-down"></i>
<div class="subsubnavbar">
<div class="subsubnavbar-content">
...
</div>
</div>
</a>
I can't solve this with CSS, but I know how to with JavaScript. Use the code below.
const preStart = document.querySelector("#preStart");
const subsubnavbar = document.querySelector(".subsubnavbar-content");
preStart.onmouseover = function () {
subsubnavbar.style.display = "block";
}
Related
I have a giant list of images currently in an unordered list and i'm now trying to alter it to display another image over the original only when hovered and in process of that, hide the original image.
I can almost get it to work with the below code but it's only hiding the original picture and not bringing the new picture into view.
.mainImg {
opacity: 1;
}
.mainImg:hover {
opacity: 0;
}
.hidgeImg {
display: none;
}
.hideImg:hover {
display: inline-block;
}
<!-- dont know if the picture CSS is relevant but here it is -->
#pictures li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
#pictures img {
vertial-align: top;
max-height: 350px;
}
<ul id="pictures">
<li>
<a href="/"><img src="image1.jpg" class="mainImg">
<img src="image2.jpg" class="hideImg">
</a>
</li>
</ul>
I have commented the code where it is relevant to you.
You were very close, what needs to happen is you need a parent element that, when hovered over, will handle the hovering events for each of its parent images.
If you remove the ability to see mainImg on hover for example, then there is no element to be hovering over that makes hideImg display.
If you have a parent object to hover over, that is always 'displayed' (but never has any visual other than its child img) then you can handle hover events via thisparent.
This is down by specifying what is being hovered over, followed by the query/selector of the element you want to change (E.G .parent:hover .child{CSS HERE;})
<head>
<style>
//When parent is hovered voer, make main hidden and hideen displayed
#hoverelement:hover .hideImg{
display: inline-block;
}
#hoverelement:hover .mainImg{
display: none;
}
//Hide Img is hidden by default
.hideImg{
display: none;
}
<!-- dont know if the picture CSS is relevant but here it is -->
li {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
img {
vertial-align: top;
max-height: 350px;
}
#MainArea{
background-color:tan;
padding:5%;
}
</style>
</head>
<body>
<div id="MainArea">
<ul id="pictures">
<li>
<a href="/" id="hoverelement"><!--Add a parent element to handle hovering -->
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="mainImg">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="hideImg">
</a>
</li>
</ul>
</div>
</body>
CSS
I am jQuery-phobic and new to css. So, please do not recommend to use jQuery.
I have two questions with my code.
[solved]When I click any one of .active divs, others go down. How to fix it on top?
How to change display from none to active as I click the div? (the code I wrote only show the div as long as I 'click' it)
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
.active:active > .hidden{
display: block;
margin : 0 0;
}
<div class = 'wrap'>
<div class = 'active'>
<h2>1</h2>
<div class ='hidden' onclick='layer_toggle()'>a</div>
</div>
<div class = 'active'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>
If the usual javascript function suits you.
function switch_active(e) {
if (e.querySelector('.hidden').style.display == 'none') {
e.querySelector('.hidden').style.display = 'block';
} else {
e.querySelector('.hidden').style.display = 'none';
}
}
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
<div class = 'wrap'>
<div class = 'active' onclick='switch_active(this)'>
<h2>1</h2>
<div class ='hidden'>a</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>
You can easily fix the vertical alignment by adding
"vertical-align: top;" to your ".active" class in your CSS.
You say you don't want to use jQuery. I don't know if you are also plain javascript-phobic but if not, I would suggest use simple javascript since that is the easiest way. If you want to keep focussing on CSS, one way to do it is to make them checkboxes or radio buttons (depending on the effect you are looking for), making the checkbox/radio button invisible and styling them as your divs.
Also, there is no reason to be jQuery-phobic. It can look a bit overwhelming but the basics are really not that difficult! :)
I have a div with contents that can be styles as info or warning as shown below. (The underscore is for deactivating the impact of the class for this particular example case and needs not to be addressed in this scope.)
<div className="content info _warning">
...
<div className="footer">
<i className="fas fa-exclamation-triangle"></i>
</div>
</div>
By switching over to
<div className="content _info warning">
...
</div>
I'm controlling the color of the icon at the bottom, as set up by the following styling.
div.content.warning div.footer { ...
color: burlywood;
}
div.content.info div.footer { ...
background-color: fuchsia;
}
The problem is that I'd like the icon to change as well. If I'd be using images, I'd hide all by the needed one but that against using the vectorizable FontAwesome goodies. I considered a set of divs with different contents as shown below but it seems clunky.
...
Is there a CSS based approach that can be used to alter the icon shown in the pseudo-code below?
div.content.warning div.footer { ...
color: burlywood;
image: "fas fa-warning";
}
div.content.info div.footer { ...
background-color: fuchsia;
image: "fas fa-info";
}
You can use the :after pseudo selector in CSS for example:
div.content.warning div.footer:after { ...
content: "(Icon with .warning styles)"
}
div.content.info div.footer:after { ...
content: "(Icon without .warning styles)"
}
if you're using Font Awesome you can dynamically add the content property through Javascript
Since you are using FontAwesome icons, you should keep using fa-* classes on different elements and hide them accordingly with your custom classes. This is what I mean:
<div class="footer">
<div class="info-message">
<i class="fa-info-icon"></i>
</div>
<div class="warning-message">
<i class="fa-warning-icon"></i>
</div>
</div>
And in CSS:
.footer .info-message,
.footer .warning-message {
display: none;
}
.footer.info .info-message {
display: block;
}
.footer.warning .warning-message {
display: block;
}
So the proper icon element will be shown just giving .info or .warning on footer.
I am working with a template. The client is wanting the three buttons different colors. All three are controlled by the same class. I can change the background color to be different if I inspect the page and I can insert it in the element style. How can I make this change permanent in the CSS?
This is the current buttons:
This is how the client would like the buttons:
The CSS controlling this is:
.full-width .generic .third p a {
background-color: #543D91;
border-bottom: 1px solid #fff;
color: #fff;
display: block;
float: left;
padding: 10px 0;
width: 100%;
border-radius: 99em;
}
How can I change this so that each button is a different color? Is this even possible? It has to be done in CSS. I can not use JavaScript/jQuery or anything like it. It has to work in a JSFiddle in only the CSS and HTML. Note that the HTML is created only the label for each button. I cannot make the hyperlink have a style.
If this is not possible can you please give me the codes that I can have 3 images centered with buttons in a container that is 900px with padding between? I appreciate everyones help!
You could use 2 classes and create a CSS like:
.cls {
color: #FFF;
padding: 10px 0;
width: 30%;
}
.c1 {
background-color: #F00;
}
.c2 {
background-color: #0F0;
}
.c3 {
background-color: #00F;
}
<button class="cls c1">Button1</button>
<button class="cls c2">Button2</button>
<button class="cls c3">Button3</button>
I have tried to solve your question using jQuery, try and have a look, it's simple and works like magic:
This is the dummy HTML:
<div id="searchable">
<a>
Something
</a>
<button>
Something
</button>
<a>
Something2
</a>
<button>
Something2
</button>
<a>
Something3
</a>
<button>
Something3
</button>
</div>
This is the required jQuery for this:
var buttons = $("#searchable").find("button");
var color = ["red", "blue", "green"];
buttons.each(function(i){
$(this).css('color', color[i]);
});
Here is a link to my fiddle:
https://jsfiddle.net/x5ve63w5/1/
I've created a vertical navigation on the left of our site. We'd like the background color for a .item to change based on the subdirectory where a user is viewing content. So if someone clicks on a nav .item, the href will redirect them to a page and we want that .item to be highlighted a unique hex color that we can customize for each nav .item. All 6 nav items would have a different color.
One point of clarification is that sometimes folks may visit our site without having ever clicked a navigation item. I want the navigation items to still be highlighted based on the current subdirectory where a person is viewing content. This helps them easily identify where they are and how to get back if they navigate to other parts of the community. Also if a person does a global search and stumbles upon content in one of our 6 main areas, we want the nav menu to instantly identify their current location (based on url) and highlight that nav .item in our vertical nav bar.
Is Javascript or Jquery the way to go? Any help would be appreciated!!
Heres a FIDDLE with all the code.
sample CSS:
.navback {
position: fixed;
top: 0;
left: 0px;
width: 100px;
height: 100%;
background: #283237;
z-index: 4;
}
.navbar {
position: fixed;
top: 44px;
left: 0px;
width: 100px;
height: 60vh;
background: #283237;
display: flex;
z-index: 5;
flex-direction: column;
}
.topbar {
border-top: 1px solid #000;
top: 44px;
}
.navbar .item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
max-height: 100px;
z-index: 5;
}
.navbar .item div.label {
color: #fff;
position: relative;
top: 5px;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
left: -100px;
}
Sample HTML:
<div class="topbar"></div>
<div class="navback leftnav">
<div class="navbar">
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
JS/jQuery
// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";
// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;
$(".item")
.find("[href^='" + hereUrl + "']")
.closest(".item").addClass("here");
Note .find("[href^=...]") selects things that start with what you're looking for.
CSS
/* now use .here to style */
.item.here {
background-color: purple;
}
.item.here .label {
font-weight: bold;
}
To answer your question directly, yes this could be done also via JavaScript/jQuery but there is a far simpler way using the css :active selector.
For example, if the user clicks the .item
then the code would be:
.item:active {
background-color: #cecece; // or whatever styling you want
}
Sidenote: As a webdesigner myself, in general i'd advise using the :hover selector when it comes to navbar highlightng instead of the :active one.
Use jquery in your html (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)
Add the following script
$('.item').click(function(){
$('.item.active').removeClass("active");
$(this).addClass('active');
})
CSS
.item.active {
background-color: red;
}
Please see updated fiddle
If you are using jQuery you can loop through each anchor and test it against the current URL of the page like this:
$(function highlightCurrentUrl() {
var currentUrl = window.location.href;
var items = $(".item").each(function() {
var anchor = $(this).find('a');
$(this).removeClass('active');
//comparison logic
if (anchor.prop('href') == currentUrl) {
$(this).addClass("active");
}
});
});
What this does is add a class to the matching .item in the menu. (This won't work in JSFiddle due to Content Security policy so you will have to test it your own environment.)
Next, you will need to define the styles that will be applied to an .item.active DIV tag. And, if you want different colors for different items, you should probably give them ID's in you markup, so you can reference them individually:
<div class="item hvr-shrink" id="home-link">
<a href="https://community.canopytax.com/">
<div>
<img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
<div class="label">Home</div>
</div>
</a>
</div>
<div class="item hvr-shrink" id="central-link">
<a href="https://community.canopytax.com/community-central/">
<div>
<img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
<div class="label">Central</div>
</div>
</a>
</div>
These rules are saying that when the active class is added to the div with the ID home-link or central-link it should have the following properties
#home-link.active {
background-color: blue;
}
#central-link.active {
background-color: green;
}