This is a CSS Inverted Border Tab Menu that flows into the main background.
This type of menu pops up a lot on website such as Dribbble.com where designers are creating some of the cleanest website designs, but after a deep search I wasnt able to find where anyone had actually developed this type of menu, only designed it.
This code creates exactly that.
:)
| /* Body Background */ | |
| body { | |
| background-color: #f2f2f2; | |
| } | |
| /* Navigation menu */ | |
| .nav { | |
| width: 20%; | |
| background: #f03c9f; | |
| padding: 10px 0px 10px 10px; | |
| } | |
| /* List items */ | |
| li { | |
| list-style-type: none; | |
| font-family: helvetica; | |
| color: white; | |
| padding: 15px 25px 15px 25px; | |
| } | |
| /* Link padding */ | |
| li a { | |
| padding: 15px 25px 15px 25px; | |
| } | |
| /* list item hover effects */ | |
| li:hover { | |
| border-radius: 10px 0px 0px 10px; | |
| background-color: #f2f2f2; | |
| color: black; | |
| } | |
| /* List Item 1 */ | |
| .myLi-1:hover:after { | |
| top: 66px; | |
| left: 284px; | |
| position: absolute; | |
| border-top-right-radius: 10px; | |
| box-shadow: 0 -10px 0 0 #f2f2f2; | |
| } | |
| .myLi-1:hover:before { | |
| top: -2px; | |
| left: 284px; | |
| position: absolute; | |
| border-bottom-right-radius: 10px; | |
| box-shadow: 0 10px 0 0 #f2f2f2; | |
| } | |
| /* List Item 2 */ | |
| .myLi-2:hover:after { | |
| top: 114px; | |
| left: 284px; | |
| position: absolute; | |
| border-top-right-radius: 10px; | |
| box-shadow: 0 -10px 0 0 #f2f2f2; | |
| } | |
| .myLi-2:hover:before { | |
| top: 46px; | |
| left: 284px; | |
| position: absolute; | |
| border-bottom-right-radius: 10px; | |
| box-shadow: 0 10px 0 0 #f2f2f2; | |
| } | |
| /* List Item 3 */ | |
| .myLi-3:hover:after { | |
| top: 162px; | |
| left: 284px; | |
| position: absolute; | |
| border-top-right-radius: 10px; | |
| box-shadow: 0 -10px 0 0 #f2f2f2; | |
| } | |
| .myLi-3:hover:before { | |
| top: 94px; | |
| left: 284px; | |
| position: absolute; | |
| border-bottom-right-radius: 10px; | |
| box-shadow: 0 10px 0 0 #f2f2f2; | |
| } | |
| /* List Item 4 */ | |
| .myLi-4:hover:after { | |
| top: 210px; | |
| left: 284px; | |
| position: absolute; | |
| border-top-right-radius: 10px; | |
| box-shadow: 0 -10px 0 0 #f2f2f2; | |
| } | |
| .myLi-4:hover:before { | |
| top: 142px; | |
| left: 284px; | |
| position: absolute; | |
| border-bottom-right-radius: 10px; | |
| box-shadow: 0 10px 0 0 #f2f2f2; | |
| } | |
| /* List Item 5 */ | |
| .myLi-5:hover:after { | |
| top: 258px; | |
| left: 284px; | |
| position: absolute; | |
| border-top-right-radius: 10px; | |
| box-shadow: 0 -10px 0 0 #f2f2f2; | |
| } | |
| .myLi-5:hover:before { | |
| top: 190px; | |
| left: 284px; | |
| position: absolute; | |
| border-bottom-right-radius: 10px; | |
| box-shadow: 0 10px 0 0 #f2f2f2; | |
| } | |
| /* all pseudo before & after's */ | |
| .nav li:before, | |
| .nav li:after { | |
| content: ""; | |
| position: relative; | |
| height: 20px; | |
| width: 20px; | |
| } |