Created
August 13, 2013 18:47
-
-
Save soulrider911/6224342 to your computer and use it in GitHub Desktop.
A CodePen by Brady Sammons. Responsive Navigation Menu - Responsive navigation menu with nesting.
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
| <body> | |
| <nav> | |
| <ul class='clearfix'> | |
| <li><a href="#">Intro</a></li> | |
| <li class='submenu'> | |
| <a href="#">About</a> | |
| <ul> | |
| <li><a href="#">Partners</a></li> | |
| <li><a href="#">Team</a></li> | |
| <li><a href="#">Products</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Gallery</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| <a href="#" id='drop'>Menu<i class='icon-reorder'></i></a> | |
| </nav> | |
| <h1> | |
| <i class='icon-desktop'></i> | |
| <span>Responive Navigation</span> – With Nesting</h1> | |
| </body> |
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
| (function($){ | |
| var dropper = $("a#drop"), | |
| menu = $("nav>ul"); | |
| subMenu = $("nav>ul>li.submenu"); | |
| link = menu.find("li"), | |
| dropper.on("click" , function(e){ | |
| menu.slideToggle(); | |
| e.preventDefault(); | |
| }); | |
| $(window).resize(function(){ | |
| var winWidth = $(this).width(); | |
| if(winWidth > 800 && menu.is(":hidden")){ | |
| menu.removeAttr("style"); | |
| } | |
| }); | |
| link.on("click" , function(){ | |
| var winWidth = $(window).width(); | |
| if(winWidth < 800 && !$(this).hasClass("submenu")){ | |
| menu.slideToggle(); | |
| } | |
| }); | |
| subMenu.hover(function(){ | |
| $(this).children("ul").stop().slideDown(); | |
| },function(){ | |
| $(this).children("ul").stop().slideUp(); | |
| }); | |
| })(jQuery); |
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
| @import "compass"; | |
| @import "compass/reset"; | |
| @import "compass/css3"; | |
| //----------------- | |
| //Change Color Here | |
| $menu_Color: #519799; | |
| //----------------- | |
| *{ | |
| @include box-sizing(border-box); | |
| } | |
| body{ | |
| padding-top: 60px; | |
| font-family: helvetica, arial, sans-serif; | |
| background-color: lighten($menu_Color, 40%); | |
| } | |
| a{ | |
| text-decoration: none; | |
| color:#fff; | |
| @include transition(background-color .3s linear); | |
| } | |
| h1{ | |
| font-size: 2em; | |
| text-align: center; | |
| margin-top: 1em; | |
| color:darken($menu_Color, 20%); | |
| span{ | |
| font-weight: 600; | |
| } | |
| } | |
| .clearfix:after{ | |
| content: ""; | |
| height:0; | |
| line-height: 0; | |
| clear: both; | |
| display: block; | |
| *zoom:1; | |
| } | |
| nav{ | |
| height: 60px; | |
| width: 100%; | |
| background-color: $menu_Color; | |
| font-size: .8em; | |
| position: fixed; | |
| top:0; | |
| } | |
| nav ul{ | |
| margin-top: 10px; | |
| li{ | |
| float: left; | |
| display: inline-block; | |
| width: 100px; | |
| position: relative; | |
| margin-left: 10px; | |
| text-align: center; | |
| @include border-radius(4px); | |
| &.submenu:after{ | |
| font-family: "FontAwesome"; | |
| content: "\f0d7"; | |
| display: block; | |
| position: absolute; | |
| right: 12px; | |
| top:12px; | |
| color: lighten($menu_Color, 20%); | |
| } | |
| &:hover{ | |
| background-color: darken($menu_Color, 20%); | |
| } | |
| background-color: darken($menu_Color, 10%); | |
| a{ | |
| padding: 10px; | |
| display: block; | |
| width: 100%; | |
| } | |
| } | |
| } | |
| li{ | |
| >ul{ | |
| position: absolute; | |
| left: 0; | |
| padding-top:3px; | |
| margin: 0; | |
| display: none; | |
| margin-top:0; | |
| >li{ | |
| margin: 0 0 3px 0; | |
| } | |
| } | |
| } | |
| nav a#drop{ | |
| display: none; | |
| background-color: darken($menu_Color, 10%); | |
| line-height: 30px; | |
| padding: 10px 0; | |
| text-indent: 10px; | |
| font-size: 1.5em; | |
| width: 100%; | |
| & i{ | |
| float: right; | |
| line-height: 30px; | |
| margin-right: 10px; | |
| } | |
| } | |
| /* -------------------------------------------------------- */ | |
| /* Media Queries | |
| /* -------------------------------------------------------- */ | |
| @media screen and(max-width: 800px){ | |
| body{ | |
| padding:0; | |
| } | |
| nav{ | |
| height: auto; | |
| position: static; | |
| ul{ | |
| margin-top: 0; | |
| padding: 10px; | |
| display: none; | |
| li{ | |
| display: block; | |
| text-align: left; | |
| //text-indent: 10px; | |
| width: 100%; | |
| margin-left: 0; | |
| font-size: 1.2em; | |
| background-color: transparent; | |
| >ul{ | |
| position: static; | |
| padding-left: 30px; | |
| padding-top: 0; | |
| >li{ | |
| text-indent: 10px; | |
| font-size: 1em; | |
| &:hover, &.active{ | |
| background-color: darken($menu_Color, 10%); | |
| } | |
| &:last-child{ | |
| margin-bottom: 8px; | |
| } | |
| a{ | |
| padding-left: 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| nav a#drop{ | |
| display: block; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, can you link to a codepen as well? I'm having some trouble including the various Compass add-ons to get this running.
Tried compiling in Sassmeister to get the CSS, but no success.
I tried putting this in a codepen here: http://codepen.io/bg17aw/pen/bpagrL
Doesn't seem to work