CODEWITHSUNDEEP
htmlcssnavigationeffects
Paul Brunache
Paul Brunache

Reputation: 625

Side navigation bar arrow on active

I'm trying to improve my Html and Css skills by trying to recreate templates from the web. I've learned a lot so far but I'm stuck on one template. http://weblusive-themes.com/moler/blog/

I can't figure out how they get the arrow to show up at the end of the navigation when active. I was thinking they added a arrow image at the end and just placed it there once the link is active but any ideas ?

Upvotes: 0

Views: 2746

Answers (1)

JohanVdR
JohanVdR

Reputation: 2880

They used the :after pseudo selector. With using absolute positioning to get the arrow positioned outside the nav element and using CSS to create a triangle arrow.

ul.menu > li a.active:after, ul.menu > li.current_page_item a:after, ul.menu > li.current-menu-item > a:after, ul.menu > li.current-menu-parent > a:after {
  border-bottom: 29px solid rgba(0, 0, 0, 0);
  border-left: 20px solid #FFED27;
  border-top: 28px solid rgba(0, 0, 0, 0);
  content: "";
  left: 300px;
  position: absolute;
  top: 0;
  z-index: 100;
}

Upvotes: 1

Related Questions