Pure CSS Hover Menu ('-' * 19) No javascript here. Just pure css (make that scss) and html.
Last active
August 29, 2015 14:20
-
-
Save meghart/e005beebdbfc276b0a0a to your computer and use it in GitHub Desktop.
Pure CSS Hover Menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
<nav class="solution-product"> | |
<ul class="top-menu"> | |
<li class="top-menu-item"><a class="title">Solutions</a> | |
<ul class="top-submenu"> | |
<li class="top-submenu-item"><a href="#">Citrix® Ready Certified</a></li> | |
<li class="top-submenu-item"><a href="#">Managed Service Providers</a></li> | |
<li class="top-submenu-item"><a href="#">Security Management</a></li> | |
</ul> | |
</li> | |
</ul> | |
</nav> | |
<nav class="solution-product"> | |
<ul class="top-menu"> | |
<li class="top-menu-item"><a class="title">Products</a> | |
<ul class="top-submenu"> | |
<li class="top-submenu-item"><a href="#">Awesome-o</a></li> | |
<li class="top-submenu-item"><a href="#">Greatist</a></li> | |
<li class="top-submenu-item"><a href="#">Betterer</a></li> | |
</ul> | |
</li> | |
</ul> | |
</nav> | |
<nav class="contact"> | |
<ul class="top-menu"> | |
<li class="top-menu-item"><a><i class="fa fa-comment-o fa-2x" style="vertical-align: middle;"></i></a> | |
<ul class="top-submenu"> | |
<li class="top-submenu-item"><a href="tel:+15553334444">Call: 555.333.4444</a></li> | |
<li class="top-submenu-item"><a href="mailto:sales@example.com">Email: sales@example.com</a></li> | |
<li class="top-submenu-item"><a href="#" onclick="chatWidget();">Chat</a></li> | |
</ul> | |
</li> | |
</ul> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Font family | |
@import url(http://fonts.googleapis.com/css?family=Lato:300,400); | |
// Color variables | |
$bg: #333; | |
$light-grey: #eee; | |
$dark-grey: #444; | |
// Mixin for border-radius | |
$prefix: "-webkit", "-moz", "-o", "-ms"; | |
@mixin border($radius-top, $radius-bottom) { | |
@each $vendor in $prefix { | |
#{$vendor}-border-radius: $radius-top $radius-top $radius-bottom $radius-bottom; | |
} | |
border-radius: $radius-top $radius-top $radius-bottom $radius-bottom; | |
} | |
// Text styling mixins | |
@mixin text { | |
font-family: Lato; | |
font-size: 16px; | |
font-weight: 300; | |
line-height: 1.33; | |
text-align: center; | |
text-decoration: none; | |
text-transform: uppercase; | |
vertical-align: middle; | |
} | |
@mixin subtext { | |
font-family: Lato; | |
font-size: 12px; | |
font-weight: 400; | |
line-height: 20px; | |
text-align: left; | |
text-decoration: none; | |
text-transform: uppercase; | |
vertical-align: middle; | |
} | |
// General Style | |
body { | |
background-color: $bg; | |
font-family: sans-serif; | |
} | |
// Dropdown styles | |
nav.contact ul, nav.solution-product ul { | |
list-style: none; | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
.contact, .solution-product { | |
display: inline-block; | |
width: 50px; | |
margin: 0 40px; | |
} | |
@media (max-width: 979px) { | |
.contact, .solution-product { | |
margin: 0px 30px; | |
} | |
} | |
@media (max-width: 755px) { | |
nav.solution-product ul { | |
display: none; | |
} | |
} | |
@media (max-width: 600px) { | |
.contact, .solution-product { | |
margin: 0; | |
} | |
} | |
@media (max-width: 518px) { | |
nav.contact ul { | |
display: none; | |
} | |
} | |
.contact a { | |
color: #fff; | |
display: block; | |
padding: 5px 10px 15px 10px; | |
line-height: inherit; | |
text-decoration: none; | |
} | |
.top-menu-item { | |
display: inline-block; | |
position: relative; | |
&:hover .top-submenu { | |
display: block; | |
} | |
a.title { | |
margin: 0 -2px; | |
padding: 10px; | |
@include text; | |
cursor: pointer; | |
color: #fff; | |
border-width: 0 14px; | |
border-color: transparent; | |
border-style: solid; | |
&:hover { | |
border-bottom: none; | |
} | |
} | |
} | |
ul.top-submenu { | |
display: none; | |
position: absolute; | |
width: 220px; | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
@include subtext; | |
z-index: 10; | |
background: #fff; | |
border: 1px solid rgba(0, 0, 0, 0.15); | |
background-clip: padding-box; | |
@include border(5px, 5px); | |
-webkit-box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1); | |
-moz-box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1); | |
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.1); | |
-webkit-font-smoothing: antialiased; | |
&:after { | |
display: block; | |
position: absolute; | |
content: ""; | |
top: -8px; | |
left: 0; | |
width: 100%; | |
height: 9px; | |
background: transparent; | |
} | |
li a { | |
display: block; | |
position: relative; | |
margin: 0; | |
padding: 15px 10px; | |
width: 198px; | |
border-top: 1px solid $light-grey; | |
color: $dark-grey; | |
text-decoration: none; | |
&:hover { | |
background-color: rgba(0, 0, 0, 0.05); | |
} | |
} | |
li:first-of-type a { | |
border-top: none; | |
@include border(4px, 0); | |
} | |
li:last-of-type a { | |
@include border(0, 4px); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment