I'm trying to understand the difference between Twitter Bootstrap dropdown menus when they are included within a navbar and when they are not.
When they are included into a navbar, a little up triangle/arrow is showed upon the expanded menu. This triangle is not showed when no navbar is used :
http://twitter.github.com/bootstrap/javascript.html#dropdowns
I just spent two hours exploring the css/html, I still don't understand WHY...
Any idea ?
There are two styles applied to the dropdown menu when inside the nav element. They are as follows:
.navbar .nav > li > .dropdown-menu::before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu::after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
border-left: 6px solid transparent;
content: '';
}
They create two triangles on top of each other one light grey, the other dark grey.
If you use chrome developer tools you can inspect these elements and turn off different styles to get a feel for what they are doing. These styles are not applied without the navbar
Just add this to the CSS and you will be able to use dropdown menu arrow without placing the dropdown inside a nav bar
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu:before, .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}
.dropdown-menu::after, .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}
The triangle can be generated by the following syntax:
<b class="caret dropdown-toggle"></b>
Related
I'm used my Angular-6 project for the ng-bootstrap and i used ngbootstrap-pills, i tried to add active pills to drop down icon with removing button option, but its not working, anyone know how to do that correctly.
here with stack blitz code
this is my .css code
.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
I tried to do like this image
Thanks.
This solution doesn't need .svg's to work.
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
position: relative;
}
::ng-deep .nav-pills .nav-link.active:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: block;
left: 35%;
bottom: 0;
}
https://stackblitz.com/edit/angular-aticm5-5nnhz3
Try using ::ng-deep selector to apply the styles. Otherwise the styles won't be applied to the library.
In your case it would be:
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
::ng-deep a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
You can also read about Angular View encapsulation.
Hi I have modified some minor changes to your code please check out this StackBlitz Link
https://stackblitz.com/edit/angular-aticm5-2ghoez
Hope this will help you
I found some solution
Stackblitz
::ng-deep .nav-pills .nav-link.active:after {
content: '';
display: block;
position: absolute;
left: 6px;
top: 100%;
width: 0;
height: 0;
border-top: 7px solid #262262;
border-right: 13px solid transparent;
border-bottom: 0 solid transparent;
border-left: 15px solid transparent;
}
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
display: inline-block;
position: relative;
background: #262262;
padding: 8px 0;
}
I need to find a responsive solution to the following code.
HTML:
<span> </span><span> </span><span>YES!</span>
CSS:
span {
color: #bac12d;
background-color: #213d55;
display: inline-block;
position: relative;
margin-right: 10px;
margin-left: 30px;
font-size: 80px;
line-height: 1;
}
span:before {
content: "";
display: inline-block;
border-left: 20px solid transparent;
border-top: 40px solid #213d55;
border-right: 0px solid #213d55;
border-bottom: 40px solid #213d55;
position: absolute;
z-index: -1;
top: 0;
left: -20px;
}
span:after {
content: "";
display: inline-block;
border-left: 20px solid #213d55;
border-top: 40px solid transparent;
border-right: 0px solid transparent;
border-bottom: 40px solid transparent;
position: absolute;
z-index: -1;
top: 0;
right: -20px;
}
span:nth-child(-n+2){
width: 0px;
}
Here is my fiddle:
http://jsfiddle.net/283azx0t/
Is it possible to make it responsive so that it follows font-size?
Yes this is possible with media query. As per the different screen size change the font size and also the background arrow size.
Yes this is possible with EM units.
Here is a rough fiddle:
http://jsfiddle.net/zbetxu8g/1/
Here is something like what you want to do for the approach, but choose better em measurements:
span:before {
...
border-left: 2em solid transparent;
border-top: 4em solid #213d55;
border-right: 0px solid #213d55;
border-bottom: 4em solid #213d55;
...
left: -2em;
}
In bootstrap 2 the dropdown menu had an upwards arrow as it can be seen here
(i am not talking about the carret). Now using bootstrap 3 or latest git this arrow doesn't exist in my simple example bellow nor in the examples on the bootstrap homepage.
How can I add this arrow again using bootstrap 3?
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
PS:To be precise the picture can be seen in another stackoverflow article.
You need to add :after and :before css rules to your dropdown-menu. These rules are taken from Bootstrap 2, and are what draw the triangle above the dropdown.
JSFiddle DEMO
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
Confused how? See here for an animation that explains css triangles
Just to follow up on this - if you want the arrow to position itself correctly (like when using it on a navbar element that is right-aligned, you need the following additional CSS to ensure the arrow is right-aligned:
.navbar .navbar-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.navbar-right:before {
right: 12px; left: auto;
}
.navbar .navbar-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.navbar-right:after {
right: 13px; left: auto;
}
Note the "navbar-right" - that was introduced in BS3 instead of pull-right for navbars.
The CSS that Alexander Mistakidis provided is correct. Which is to say, it creates the arrow atop the dropdown menu in Bootstrap. In order to position it correctly in a responsive view (#user2993108), you can change the left attribute for each of the class selectors (.dropdown-menu:before,.dropdown-menu:after) at different media queries or breakpoints.
For example...
#media (max-width: 400px) {
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 30px; /* change for positioning */
...
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 31px; /* change for positioning */
...
}
}
#media (max-width: 767px) and (min-width: 401px) {
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 38px; /* change for positioning */
...
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 39px; /* change for positioning */
...
}
}
and so on...
This builds on the work by Alexander Mistakidis and Joyrex to support optional arrows and dropup menus. In my case I did not want to have an arrow on all of the dropdown menus, only some.
With this, you add the arrow class to the dropdown-menu element to get the arrow. If Bootstrap is positioning the dropdown/dropup to the left, also add arrow-right to shift the arrow to the other side.
// add an arrow to the dropdown menus
.dropdown-menu.arrow:before {
position: absolute;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
content: '';
}
.dropdown-menu.arrow:after {
position: absolute;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: '';
}
// postion at the top for a 'down' menu
.dropdown .dropdown-menu.arrow:before {
top: -7px;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dropdown .dropdown-menu.arrow:after {
top: -6px;
border-bottom: 6px solid #ffffff;
}
// postion at the bottom for an 'up' menu
.dropup .dropdown-menu.arrow:before {
bottom: -7px;
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
}
.dropup .dropdown-menu.arrow:after {
bottom: -6px;
border-top: 6px solid #ffffff;
}
// support to move the arrow to the right-hand-side
.dropdown-menu.arrow.arrow-right:before,
.dropup .dropdown-menu.arrow.arrow-right:before {
right: 15px;
left: auto;
}
.dropdown-menu.arrow.arrow-right:after,
.dropup .dropdown-menu.arrow.arrow-right:after {
right: 16px;
left: auto;
}
How do I remove the CSS triangles on main menu items that don't have a sub-menu?
See http://v2.letsfaceitbeauty.ca
I think this is the relevant CSS code and I believe ".has-sub" is the correct selector, but I can't figure out how.
#cssmenu > ul > li:hover:after { /* this is the arrow */
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 #6796ff;
margin-left: -10px;
}
If you know the css that makes the triangle and the element you want the triangle on, just put those two pieces together, i.e. replace the previous rule with
#cssmenu > ul > li.has-sub:hover:after { /* this is the arrow */
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 #6796ff;
margin-left: -10px;
}
I am using two pseudo elements to create a banner effect on a div, like so:
div { position: relative; width: 200px; background-color: #999; }
div:before, div:after { content: ""; width: 10px; height: 0; display: block; position: absolute; z-index: -1; top: 10px; border-top: 10px solid #666; border-bottom: 10px solid #666; }
div:before { right: -20px; border-right: 10px solid transparent; border-left: 10px solid #333; }
div:after { left: -20px; border-left: 10px solid transparent; border-right: 10px solid #333; }
It works fine in FF, Chrome, Safari & IE9, but no luck with IE8. The two elements with z-index of -1 show above parent. Is there any way to get this to work?
You should try setting a z-index of 1 to div.