Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// here we set a class "itemcount-[number]" in order to calculate the height in Sass for the height (= padding-bottom) of the submenu
$(function() {
// "use strict";
var nmbrItemsHome = ($("#tt-home li").length);
var nmbrItemsBlog = ($("#tt-blog li").length);
var nmbrItemsBooks = ($("#tt-books li").length);
var nmbrItemsGoodies = ($("#tt-goodies li").length);
var nmbrItemsMedia = ($("#tt-media li").length);
var nmbrItemsNews = ($("#tt-news li").length);
var nmbrItemsContact = ($("#tt-contact li").length);
$('#tt-home').addClass('tt-nav__itemcount-'+nmbrItemsHome);
$('#tt-blog').addClass('tt-nav__itemcount-'+nmbrItemsBlog);
$('#tt-books').addClass('tt-nav__itemcount-'+nmbrItemsBooks);
$('#tt-goodies').addClass('tt-nav__itemcount-'+nmbrItemsGoodies);
$('#tt-media').addClass('tt-nav__itemcount-'+nmbrItemsMedia);
$('#tt-news').addClass('tt-nav__itemcount-'+nmbrItemsNews);
$('#tt-contact').addClass('tt-nav__itemcount-'+nmbrItemsContact);
});
$(function() {
var itms = {
home : ($("#tt-home li").length),
blog : ($("#tt-blog li").length),
books : ($("#tt-books li").length),
goodies : ($("#tt-goodies li").length),
media : ($("#tt-media li").length),
news : ($("#tt-news li").length),
contact : ($("#tt-contact li").length)
};
jQuery.each( itms, function( i, val ) {
$( "#tt-" + i ).addClass('tt-nav__itemcount-'+val);
});
});
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$tt-nav-breakpoint: 55em;
$item-count-list: 1 2 3 4 5 6 7 8 9 10;
$item-value-list: 46px 92px 138px 184px 230px 276px 322px 368px 414px 460px;
// declarations for small screen
@for $i from 1 through length($item-count-list) {
.is-active[class*="itemcount-#{$i}"] .tt-nav__submenu {
@media (max-width: $tt-nav-breakpoint) {
padding-bottom: nth($item-value-list, $i);
}
}
}
// declarations for wide screen
@for $i from 1 through length($item-count-list) {
[class*="itemcount-#{$i}"]:hover .tt-nav__submenu {
@media (min-width: $tt-nav-breakpoint) {
padding-bottom: nth($item-value-list, $i);
}
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-1"] .tt-nav__submenu {
padding-bottom: 46px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-2"] .tt-nav__submenu {
padding-bottom: 92px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-3"] .tt-nav__submenu {
padding-bottom: 138px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-4"] .tt-nav__submenu {
padding-bottom: 184px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-5"] .tt-nav__submenu {
padding-bottom: 230px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-6"] .tt-nav__submenu {
padding-bottom: 276px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-7"] .tt-nav__submenu {
padding-bottom: 322px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-8"] .tt-nav__submenu {
padding-bottom: 368px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-9"] .tt-nav__submenu {
padding-bottom: 414px;
}
}
@media (max-width: 55em) {
.is-active[class*="itemcount-10"] .tt-nav__submenu {
padding-bottom: 460px;
}
}
@media (min-width: 55em) {
[class*="itemcount-1"]:hover .tt-nav__submenu {
padding-bottom: 46px;
}
}
@media (min-width: 55em) {
[class*="itemcount-2"]:hover .tt-nav__submenu {
padding-bottom: 92px;
}
}
@media (min-width: 55em) {
[class*="itemcount-3"]:hover .tt-nav__submenu {
padding-bottom: 138px;
}
}
@media (min-width: 55em) {
[class*="itemcount-4"]:hover .tt-nav__submenu {
padding-bottom: 184px;
}
}
@media (min-width: 55em) {
[class*="itemcount-5"]:hover .tt-nav__submenu {
padding-bottom: 230px;
}
}
@media (min-width: 55em) {
[class*="itemcount-6"]:hover .tt-nav__submenu {
padding-bottom: 276px;
}
}
@media (min-width: 55em) {
[class*="itemcount-7"]:hover .tt-nav__submenu {
padding-bottom: 322px;
}
}
@media (min-width: 55em) {
[class*="itemcount-8"]:hover .tt-nav__submenu {
padding-bottom: 368px;
}
}
@media (min-width: 55em) {
[class*="itemcount-9"]:hover .tt-nav__submenu {
padding-bottom: 414px;
}
}
@media (min-width: 55em) {
[class*="itemcount-10"]:hover .tt-nav__submenu {
padding-bottom: 460px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Nav</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<nav class="tt-nav" id="js-tt-nav">
<ul class="tt-nav__list">
<li class="tt-nav__item is-active" id="tt-home"><a href="/" class="tt-nav__link">Home</a>
<ul class="tt-nav__submenu submenu-first">
<li><a href="">Home</a></li>
<li><a href="awards.htm">Awards</a></li>
<li><a href="beyond.htm">Beyond</a></li>
<li><a href="beyondchildren.htm">Beyond Children</a></li>
<li><a href="beyondlovewithin.htm">Beyond Love Within</a></li>
</ul>
</li>
<li class="tt-nav__item" id="tt-blog">
<a href="/" class="tt-nav__link">Blog</a>
<ul class="tt-nav__submenu">
<li><a href="blog/" target="_blank">Blog</a></li>
<li><a href="biography.htm">Biography</a></li>
<li><a href="interview.htm">Interviews</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="lyrics.htm">Lyrics</a></li>
</ul>
</li>
<li class="tt-nav__item" id="tt-books"><a href="/" class="tt-nav__link">Books</a>
<ul class="tt-nav__submenu">
<li><a href="books.htm">Books</a></li>
<li><a href="magazine.htm">Magazines</a></li>
<li><a href="flagggroveschool.htm">Flagg Grove School</a></li>
<li><a href="magazine.htm">Magazines</a></li>
<li><a href="mycollection.htm">My Collection</a></li>
<li><a href="songbooks.htm">Songbooks</a></li>
<li><a href="tourbooks.htm">Tourbooks</a></li>
</ul>
</li>
<li class="tt-nav__item" id="tt-goodies">
<a href="/" class="tt-nav__link">Goodies </a>
<ul class="tt-nav__submenu">
<li><a href="drawings.htm">Drawings</a></li>
<li><a href="ecards.htm">Ecards</a></li>
<li><a href="fanmap.htm">Fanmap</a></li>
<li><a href="fanstina.htm">Fans-Tina</a></li>
<li><a href="general.htm">General</a></li>
</ul>
</li>
<li class="tt-nav__item" id="tt-media">
<a href="/" class="tt-nav__link">Media</a>
<ul class="tt-nav__submenu">
<li><a href="albums.htm">Albums</a></li>
<li><a href="albums-extended.htm">Albums-Extended</a></li>
<li><a href="7inchsingles.htm">7 Inch Singles</a></li>
<li><a href="maxisingles.htm">12 Inch Maxi Singles</a></li>
<li><a href="singles.htm">CD Singles</a></li>
<li><a href="dvd-vhs-blu-ray.htm">DVD-VHS-Blu-Ray</a></li>
<li><a href="dvd-vhs-others.htm">Videos with others</a></li>
<li><a href="lp.htm">LP's</a></li>
</ul>
</li>
<li class="tt-nav__item" id="tt-news"><a href="/" class="tt-nav__link">News</a>
<ul class="tt-nav__submenu">
<li><a href="news.php">News</a></li>
<li><a href="filmography.htm">Film</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="tourphotos.htm">Tour Photos ’08-’09</a></li>
<li><a href="tourdates.htm">Tours</a></li>
<li><a href="videos.htm">Videos</a></li>
</ul>
</li>
<li class="tt-nav__item" id="tt-contact"><a href="/" class="tt-nav__link">Contact</a>
<ul class="tt-nav__submenu submenu-last">
<li><a href="contact.php">Contact</a></li>
<li><a href="http://goo.gl/uk8Ubp" target="_blank">Appearances</a></li>
<li><a href="credits.htm">Credits</a></li>
<li><a href="donation.htm">Donation</a></li>
<li><a href="forum/" target="_blank">Forum</a></li>
</ul>
</li>
</ul>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../../../js/lib/jquery-1.11.1.min.js"><\/script>')</script>
<script src="js/index.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment