Inverted triangle for the active menu item in a mega menu
I want to do something like the following (notice the inverted arrow below Product:
I want to show an inverted arrow below the active menu item. The mega menu is located inside Bootstrap .container
.
However, with my skills, this is what I have been able to accomplish so far. There are two crowded lines on either side. I created them with :before
and :after
an arrow element inside the active one <li>
. The challenge is to make them visible only within the limits .container
below
source to share
I haven't seen a demo link, but I've already set up some pure CSS for this :
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
<div class="content"> </div>
ul {
margin: 0 auto;
width: 90%;
height: 60px;
overflow: hidden;
position: relative;
}
ul li {
float: right;
padding: 5px;
height: 40px;
background: lightblue;
position: relative;
}
ul li:hover:before {
content: ' ';
position: absolute;
right: 50%;
margin-right: 5px;
top: 40px;
width: 10000px;
height: 20px;
background: white;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
ul li:hover:after {
content: ' ';
position: absolute;
left: 50%;
margin-left: 5px;
top: 40px;
width: 10000px;
height: 20px;
background: white;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
ul:after {
content: ' ';
position: absolute;
top: 40px;
width: 100%;
height: 20px;
background: white;
}
ul:hover:after {
display: none;
}
It creates 20px space below the menu items. This space is filled with an element ul:after
. When dropped, the ul
class :after
is removed. Hovering over the menu items displays li:before
and li:after
, which provide a white background and are skewed, making it look like an arrow.
The only downside to this script is that the default white space (presented ul:after
) is also removed on hover ul
, not li
. Maybe someone can come up with a fix for this.
source to share
The way you did it is too complicated. The spaces are related to the height of your pseudo-elements. In this example, I removed the arrows and replaced them with CSS triangles, you just need a pseudo element in your public class like this (I let you customize the size and position):
.open::after {
content: '';
position: absolute;
left: 50%;
top: 126px;
transform: translate(-50%, 0);
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
source to share
The following changes have been made: RESULT PEN
Added z-index
, adjusted margin-top
and removed width
from :after
and :befor
e. The reason you were getting the extra white background was because you specified the width as 100vw full viewport which is unnecessary
.header .menu > li.open.horizontal > span.arrow {
background-image:
url(https://s3.amazonaws.com/imgrvx/white.svg);
background-repeat: no-repeat;
width: 14px;
height: 7px;
left: calc(50% - 14px);
margin-top: 19px;
position: absolute;
z-index:2;
}
.header .menu > li.open.horizontal > span.arrow:before {
content: '';
position: absolute;
height: 7px;
width: 100vw;
background-color: #ffffff;
display: block;
left: -100vw;
border-top: 1px solid #e6e6e6;
}
.header .menu > li.open.horizontal > span.arrow:after {
content: '';
position: absolute;
height: 7px;
left: 14px;
background-color: #ffffff;
border-top: 1px solid #e6e6e6;
}
source to share