Skip to content

Commit

Permalink
updated JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@zurbchris
zurbchris committed Aug 30, 2012
1 parent e025efe commit 1beb919
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 148 deletions.
155 changes: 36 additions & 119 deletions scss/foundation/components/modules/_topbar.scss
View file
Expand Up @@ -24,7 +24,7 @@
$topBarLinkSize: ms(0) - 1;
$topBarDropToggleSize: 5px;
$topBarSearchWidth: 200px;
$topBarBreakPoint: 800px;
$topBarBreakPoint: 1085px;
$topBarNavToggleSize: 8px;

.top-bar { width: 100%; background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0;
Expand All @@ -43,10 +43,10 @@
&.title h5 { color: $topBarTitleColor; }
&.divider { padding: 0; display: block; background: darken($topBarBgColor, 15%); width: 1px; height: 100%; @include box-shadow(1px 0 0 rgba(255,255,255,0.15)); margin-right: 1px; }
&.search { padding: 0 $topBarHeight / 3; height: $topBarHeight;
form { display: inline-block; vertical-align: middle; margin-top: 1px; width: $topBarSearchWidth; min-width: $topBarSearchWidth;
input { height: 28px; font-size: ms(0) - 1; margin-bottom: 0; }
input[type=search] { font-size: 16px; position: relative; top: 8px; }
.button { @include border-left-radius(0); font-size: ms(0) - 1; padding: 7px 12px 6px; top: -1px; }
form { display: inline-block; vertical-align: middle; margin-bottom: 0; margin-top: -1px; width: $topBarSearchWidth; min-width: $topBarSearchWidth;
input[type=text] { width: 120px; @include border-right-radius(0); height: 28px; font-size: ms(0) - 1; margin-bottom: 0; float: left; }
input[type=search] { font-size: 16px; margin-bottom: 0; }
.button { @include border-left-radius(0); font-size: ms(0) - 1; padding: 7px 12px 6px; border-left: none; float: left; }
}
}
&.toggle-nav { display: none; }
Expand Down Expand Up @@ -108,10 +108,11 @@
}

@media only screen and (max-width: $topBarBreakPoint) {
.top-bar { height: $topBarHeight; overflow: hidden; margin-bottom: 0;

.top-bar { height: $topBarHeight; overflow: hidden; margin-bottom: 0; background: transparent;

.js-generated { display: block !important; }
section { position: relative; left: 0; @include single-transition(left, 400ms); }
section { position: relative; left: 0; @include single-transition(left, 300ms); }

ul { width: 100%; min-height: 100%; height: 100%; margin-bottom: 0; display: block; background: lighten($topBarBgColor, 5%);
li { float: none;
Expand All @@ -126,10 +127,11 @@
a { padding: 0 $topBarHeight / 2;
&.active { background: darken($topBarBgColor, 3%); }
}
&.divider { width: 100%; clear: both; height: 0px; border-top: solid 1px darken($topBarBgColor, 25%); border-bottom: solid 1px rgba(255,255,255,0.25); }
&.divider { width: 100%; clear: both; height: 0px !important; border-top: solid 1px darken($topBarBgColor, 15%); border-bottom: solid 1px rgba(255,255,255,0.2); }
&.search { padding: 0 $topBarHeight / 2;
form { width: 100%;
.button { top: 0; }
form { width: 100%;
input[type=text] { width: 75%; }
.button { top: 0; width: 25%; }
}
}

Expand All @@ -138,16 +140,35 @@
a { padding-right: $topBarHeight * .75;
&:after { margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; }
}
.dropdown { display: block; left: 100%; top: 0; }
&:hover {
// .dropdown { display: none; }
.dropdown { display: none; visibility: hidden; background: lighten($topBarBgColor, 5%); }
&.moved { position: static;
.dropdown { top: 0; display: block; visibility: visible;
li {
label { margin-bottom: 6px; padding-top: 6px !important; font-size: ms(0) - 3; }
&:not(.title) { padding-bottom: 0;
a { padding: 8px $topBarHeight / 2; font-size: ms(0); }
}
a, label { padding: 0 $topBarHeight / 2; }
a:hover { background: transparent; }
&.divider { margin-top: 8px; margin-bottom: 8px; }
}
}
.back.title { padding-bottom: 0;
a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, #fff, right); }
h5 { margin: 0; padding-left: $topBarDropToggleSize * 3; margin-bottom: 5px; position: relative;
a { padding-top: 8px; padding-bottom: 8px; font-size: ms(2); font-weight: $topBarTitleWeight; }
}
}
}
}

/* Dropdown Level 2 */
&.has-dropdown .dropdown li {
&.has-dropdown .dropdown li { background: transparent;
&.has-dropdown {
.dropdown { left: 100% !important; top: 0; right: auto !important; }
&>a { padding-right: $topBarHeight * .75;
&:after { content: ""; margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; }
}
}
}
}
Expand All @@ -169,109 +190,5 @@
}
}
}
}



// /* Media query ensures that hover effects don't conflict on touch devices */
// @media only screen and (min-width: 768px) {
// .top-bar {
// .attached {
// &>ul>li:hover>a, &>ul>li:hover>span { background: #222; }
// &>ul>li:hover>span { cursor: default; }
// &>ul .dropdown>li:hover>a { background-color: #333; }
// &>ul>li:hover>a+.dropdown, &>ul>li:hover>span+.dropdown { display: block; }
// .dropdown li:hover>a+.dropdown, .dropdown li:hover>span+.dropdown { display: block; }
// }
// }
// }

// /* Including the desktop-only hover states for IE7/8 */
// .lt-ie9 {
// .top-bar {
// .attached {
// &>ul>li:hover>a, .top-bar .attached>ul>li:hover>span { background: #222; }
// &>ul>li:hover>span { cursor: default; }
// &>ul>li:hover>span+.dropdown, .lt-ie9 .top-bar .attached>ul>li:hover>a+.dropdown { display: block; }
// &>ul .dropdown>li:hover>a { background-color: #333; }
// .dropdown li:hover>a+.dropdown, .lt-ie9 .attached .dropdown li:hover>span+.dropdown { display: block; }
// }
// }
// }

// /* Styles for smaller screens like tablets */
// @media only screen and (max-width: 1024px) and (min-width: 768px) {
// .top-bar { font-size: 10px; height: 36px; line-height: 36px;
// .attached { height: 36px;
// &>.name { height: 36px; }
// &>ul>li { height: 36px;
// &>a, &>span { padding: 0 9px; height: 36px; }
// }
// &>ul.left .dropdown>li {
// &>a, &>span { background-position: right -4px; }
// }
// &>ul.right .dropdown>li {
// &>a, &>span { background-position: left -34px; }
// }
// &>ul>li form { padding: 0 12px; height: 36px; }
// &>ul .dropdown { top: 36px; }
// }
// }
// }

// /* Styles for mobile devices like phones */
// @media only screen and (max-width: 767px) {
// .top-bar, .top-bar .attached { position: relative; background: #333; border-width: 0; }
// .top-bar { overflow: hidden; height: 45px;
// &.expanded { height: auto !important;
// .attached a.toggle-nav { border-top: none; border-bottom: 8px solid #fff; }
// }
// .attached { left: 0; border-bottom: none; height: auto; background: none;
// &>ul { float: none; width: 100%; position: static;
// &>li { display: block; float: none; border-right: none; border-left: none; border-bottom: 1px solid #444; margin: 0; padding: 0; height: auto; position: relative; }
// &:last-child>li:last-child { border-width: 0; }
// &>li>a, &.right>li>a, &>li form, &>li>span { border-left: none; border-right: none; border-bottom: 1px solid #222; height: auto; }
// &>li.active>a { background: none; }
// &>li.active .dropdown { display: block; visibility: hidden; }
// &>li form { margin-bottom: 0; padding-bottom: 12px; }
// &>li.has-dropdown>a, &>li.has-dropdown>span { background-image: url(../images/top-bar/dropdown-sprite.png); background-repeat: no-repeat; padding-right: 28px; background-position: right 8px; }
// &.right .dropwon>li>a, &.right .dropdown>li>span { padding-left: 20px; }
// &.right .dropdown>li.has-dropdown>a, &.right .dropdown>li.has-dropdown>span { background-image: url(../images/top-bar/dropdown-sprite.png); background-repeat: no-repeat; padding-right: 28px; background-position: right -3px; }
// .dropdown {
// &>li {
// &.divider { border-top: 1px solid #222; border-bottom: 1px solid #444; }
// &.back { margin-top: 8px; }
// &.back a { color: #999; padding: 5px 20px; }
// &.title { border-bottom: 1px solid #444; margin-bottom: 12px; }
// &.title h5 { border-bottom: 1px solid #222; margin: 0 -20px; padding: 0 20px 12px; color: #fff; font-weight: bold; font-size: 18px; font-size: 1.8rem; }
// &.title h5 a { font-size: 18px; font-size: 1.8rem; margin: 0; padding: 0; }
// a { padding: 5px 20px; font-weight: bold; font-size: 13px; }
// }
// }
// }
// &>.name { display: block; width: 100%; float: none; position: relative; cursor: pointer; }
// &>ul.right>li { border-left: none; }
// &>ul>li>a small, li.title h5 small { text-transform: uppercase; font-weight: bold; float: right; position: relative; top: 2px; }
// .input-text { box-sizing: border-box; width: 100%; display: block; }
// .button { padding: 6px 11px 8px; }
// a.toggle-nav { display: block; height: 0; width: 0; position: absolute; right: 20px; top: 0; border-left: 8px solid transparent;border-right: 8px solid transparent; border-top: 8px solid #fff; top: 20px; }
// }

// /* Slide Styles */
// .attached, .attached>.name { -webkit-transition: left 0.2s linear; transition: left 0.2s linear; }

// /* Override for the default states */
// .attached > ul .dropdown { padding-top: 0; padding-bottom: 0; }

// /* Base styles for the subsequent dropdown */
// .attached {
// li.active { position: static !important;
// &>a+.dropdown { display: block; visibility: hidden; width: 100%; top: 0; position: absolute; background: #333; border-left: none; }
// }
// }
// .attached li.active>a+.dropdown { display: block; visibility: visible; left: 100%; }
// .attached>ul>li.active>a+.dropdown { top: 45px; }
// }
// }


}
10 changes: 3 additions & 7 deletions test/topbar.html
View file
Expand Up @@ -91,13 +91,9 @@ <h1>
</li>
<li class="divider"></li>
<li class="search">
<form class="row collapse">
<div class="eight mobile-three columns">
<input type="text">
</div>
<div class="four mobile-one columns postfix">
<button type="submit" class="secondary radius button">Search</button>
</div>
<form class="collapse">
<input type="text">
<button type="submit" class="secondary radius button">Search</button>
</form>
<!-- <form>
<input type="search">
Expand Down
55 changes: 33 additions & 22 deletions vendor/assets/javascripts/foundation/jquery.foundation.topbar.js
View file
@@ -1,7 +1,7 @@
(function ($) {

var currentIndex = 0,
breakPoint = 800;
breakPoint = 1085;

// Define Breakpoint for small layout
function atBreakpoint() {
Expand All @@ -18,12 +18,11 @@
$section.find('.has-dropdown>a').each(function () {
var $link = $(this),
$dropdown = $link.siblings('.dropdown'),
$titleLi = $('<li class="title js-generated"><h5></h5></li>');
$titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>');

// Copy link to subnav
$titleLi.find('h5').html($link.html());
$titleLi.find('h5>a').html($link.html());
$dropdown.prepend($titleLi);
$dropdown.prepend('<li class="back js-generated"><a href="">&larr; Back</a></li>');
});

// Put element back in the DOM
Expand All @@ -41,7 +40,7 @@
initializeMarkup($this.closest('.top-bar'));
$this.addClass('top-bar-initialized');
}
console.log($this);

$this.closest('.top-bar').toggleClass('expanded');
}
});
Expand All @@ -51,54 +50,66 @@
if (atBreakpoint()) {
var $this = $(this),
$selectedLi = $this.closest('li'),
$nextLevelUl = $selectedLi.find('>ul'),
$nextLevelUl = $selectedLi.children('ul'),
$titleLi = $('<li class="title js-generated"><h5></h5></li>'),
$section = $this.closest('section'),
$topbar = $this.closest('.top-bar'),
$largestUl;
$currentUlPadding = parseInt($selectedLi.find('>ul.dropdown').css('padding-top')) + parseInt($selectedLi.find('>ul.dropdown').css('padding-bottom')),
$nextLevelUlHeight = 0;

e.preventDefault();

currentIndex += 1;

$selectedLi.addClass('moved');
$section.css({'left': '-' + 100 * currentIndex + '%'});
$section.find('>.name').css({'left': 100 * currentIndex + '%'});
$section.css({'left': -(100 * currentIndex) + '%'});
$section.find('>.name').css({'left': 100 * currentIndex + '%'});

$selectedLi.find('>ul.dropdown>li').each(function () {
$nextLevelUlHeight += $(this).outerHeight();
});

console.log(currentIndex);

$section.css({'height': $nextLevelUlHeight + $topbar.find('>ul').outerHeight() + $currentUlPadding + 'px'});

if (currentIndex === 1) {
$largestUl = $nextLevelUl;
$nextLevelUl.find('ul.dropdown').each(function () {
if ($(this).height() > $largestUl.height()) {
$largestUl = $(this);
}
});
$section.css({'height': $largestUl.height() + 45 + 'px'});
if (currentIndex > 1) {
$section.css({'height': $nextLevelUlHeight + $topbar.find('>ul').outerHeight() + $currentUlPadding + 'px'});
}
// if (currentIndex === 1) {
// $largestUl = $nextLevelUl;
// $nextLevelUl.find('ul.dropdown').each(function () {
// if ($(this).height() > $largestUl.height()) {
// $largestUl = $(this);
// }
// });
// $section.css({'height': $largestUl.height() + 'px'});
// }
}
});

// Go up a level on Click
$('.top-bar .has-dropdown').on('click', '.back', function(e) {
var $this = $(this),
$activeLi = $this.closest('li.active'),
$movedLi = $this.closest('li.moved'),
$section = $this.closest('section'),
$topbar = $this.closest('.top-bar'),
$previousLevelUl = $activeLi.closest('ul');
$previousLevelUl = $movedLi.closest('ul');

e.preventDefault();

currentIndex -= 1;

$section.css({'left': '-' + 100 * currentIndex + '%'});
$section.css({'left': -(100 * currentIndex) + '%'});
$section.find('>.name').css({'left': 100 * currentIndex + '%'});

if (currentIndex === 0) {
$section.css({'height': ''});
}

setTimeout(function () {
$activeLi.removeClass('active');
}, 400);
$movedLi.removeClass('moved');
}, 300);
});

// define on() and off() for older jQuery
Expand Down

0 comments on commit 1beb919

Please sign in to comment.