I created tooltip arrows for this navigation. They show up on hover but they also show up in the bottom of the drop down. I am wondering what code is keeping them there!
Here is the code i am using to implement them.
Link to dev site
.cftopnavrightlower ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFC700;
margin-left: -10px;
}
You need greater specificity for the UL you are targeting for the arrows. ul.flyout is being styled with an arrow given your current selector.
This may work better:
#menu-header-nav > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFC700;
margin-left: -10px;
}
Related
So I want to create a button that looks like this when it's active (you can see that it has a little arrow pointing to the right)
Currently I have something like that, it stays blue after clicked, text turns white and all that. I used .addClass for that, but I have no idea if I should use it again to glue on a triangle onto my button, there has to be a better way right?
While I'm at it, how can I make the shadow/sidebar?
Please, experienced people, give this beginner some enlightenment
add below css for
.active {
height: 50px;
width: 100px;
background: blue;
height: 50px;
width: 100px;
background: blue;
position: relative;
}
.active:after {
content: "";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<div class="active"></div>
try
.active {
height: 50px;
width: 200px;
background: #0092ff;
}
.active:after {
content: "";
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #0092ff;
display: block;
margin-left: 200px;
transform: translateY(75%);
}
.active:hover:after {
content: "";
border-left: 0px solid #0092ff;
transition: border-left 0.2s ease-in;
}
<div class="active"></div>
Please Check following working example.
$(function() {
$('.btn').click(function() {
$(this).closest('ul').find('.active').removeClass('active');
$(this).addClass('active');
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
padding: 10px;
background: teal;
position: relative;
display: block;
width: 60px;
cursor: pointer;
}
.active::after {
content: " ";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid teal;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a class="btn active">Home</a></li>
<li><a class="btn">News</a></li>
<li><a class="btn">Contact</a></li>
<li><a class="btn">About</a></li>
</ul>
you need to add position:relative to the selector ul li.
after that, you can use the following code below to add content through the pseudo element after of the active link.
change the size of the borders, as well as positions for top and right to suit your needs.
ul li.active:after {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #0092ff;
position:absolute;
top: 15px;
right:-15px;
}
I am trying to add a ribbon/a way to highlight a particular cell in my table. I have found some code for a ribbon, but I can't get it to work with my table.
Presently I just get a square in the cell I want the ribbon to go in
Here is the fiddle
https://jsfiddle.net/4xwzuqpn/2/
The code for the ribbon:
thead th p.promo { font-size: 1em; color: #fff; position: absolute; top: 9em; left: -17px; z-index: 1000; width: 100%; margin: 0; padding: .625em 17px .75em; background: #c00; box-shadow: 0 2px 4px rgba(0,0,0,.25); border-bottom: 1px solid #900; }
thead th p.promo:before { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #900 transparent transparent; bottom: -7px; left: 0; }
thead th p.promo:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0 0; border-color: #900 transparent transparent transparent; bottom: -7px; right: 0; }
You had an error with your CSS on line 233 on your jsFiddle (an extra } character).
That error caused your CSS rule:
thead th {
position: relative;
}
not to render. Once the error is fixed, the position: relative works and that fixes the position of the ribbon.
edit: Actually, anything under line 233 won't render. Not only the positioning, but the entire definition on your ribbon.
Check this out:
https://jsfiddle.net/4xwzuqpn/3/
I'm following the example at http://bootsnipp.com/snippets/featured/simple-vertical-tab. I'm not quite able to figure out how to modify the size of the arrow mark that points towards the right when a menu item is selected.
Could I please request help to identify the element in question in the CSS?
You need to open ::after inside <a> element. And then you can change the value of borders.
for example
div.bhoechie-tab-menu div.list-group>a.active:after {
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 57px solid #5A55A3;
}
Change border value according to your needed.
CSS:
div.bhoechie-tab-menu div.list-group > a.active::after {
content: "";
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px; //change as your needed
border-bottom: 13px solid transparent; //change as your needed
border-top: 13px solid transparent; //change as your needed
border-left: 10px solid #5A55A3; //change as your needed
}
I'm trying to make something like this:
Where both sides of the button are clickable and link to a different website (have a guess which ones, heh).
https://jsfiddle.net/3HG6d/1836/
The issue I'm having (as can be seen in the jsfiddle) is that the top <a> tag always overlaps the second one, making only one clickable.
CSS:
a {
float:left;
margin:0.5%;
position:absolute;
display:inline-block;
}
/*Up-right pointing*/
.triangle-up-right {
width: 0;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-up-right:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-top: 500px solid #4679BD;
}
/*Down-left pointing*/
.triangle-down-left {
width: 10%;
height: 0;
padding-bottom: 10%;
overflow: hidden;
}
.triangle-down-left:after {
content: "";
display: block;
width: 0;
height: 0;
border-right: 500px solid transparent;
border-bottom: 500px solid #4679BD;
}
EDIT: should show the correct jsfiddle now
You will need to use a rotated square div for each one and match the angle that way. On top of this, you'll need to make sure that they are within a wrapper so that you can hide the overflow so that only the visible portion is clickable.
This thread could be of use.
use the map and area tag.
http://www.w3schools.com/tags/tag_area.asp
use poly and form a rectangle
This works for me:
.social-button {
width: 80px;
height: 80px;
display: block;
margin: 20px;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.social-button a {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.twitter {
border-top: 0px solid transparent;
border-bottom: 80px solid transparent;
border-right: 80px solid #4679BD;
}
.facebook {
border-top: 80px solid transparent;
border-bottom: 0px solid transparent;
border-left: 80px solid #BD79BD;
}
<div class="social-button">
</div>
I'm trying to create a shape in menu header which indicates that is selected (active class), but I can't bring the shape up and align it.
This is what I've tried:
HTML
<li class="active">Market</li>
CSS
.active {
z-index: -1;
position: absolute;
border-bottom: 2px solid #b6ff00;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
EXPECTED RESULT:
JSFIDDLE: http://jsfiddle.net/Q2Dra/
You're on the right track with the border. You just needed to apply it to a pseudo element instead of the li.
Full Example:
http://jsfiddle.net/Q2Dra/4/
Relevant Code:
.active:after {
content:'';
border:10px solid transparent;
border-bottom:10px solid #b6ff00;
position:absolute;
bottom:0;
left:50%;
margin-left:-10px;
}
You need to use a psuedo element: http://jsfiddle.net/webbymatt/QL7Qr/
HTML
Home
CSS
a {
position: relative;
background: red;
padding: 6px 10px;
}
a:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content: " ";
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
}