Skip to content

Commit

Permalink
Merge pull request #1239 from jkorz/topnav-login-form
Browse files Browse the repository at this point in the history 
Added support for a login box in the top nav bar
  • Loading branch information
@zurbchris
zurbchris committed Jan 14, 2013
2 parents c5d0ce6 + f64c941 commit e5c63be
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 0 deletions.
3 changes: 3 additions & 0 deletions scss/foundation/_settings.scss
View file
Expand Up @@ -118,6 +118,9 @@ $topBarDropToggleSize: 5px !default;
$topBarDropToggleColor: #fff !default;
$topBarDropToggleAlpha: 0.5 !default;
$topBarSearchWidth: 200px !default;
$topBarLoginWidth: 300px !default;
$topBarLoginButtonWidth: 60px !default;
$topBarLoginInputWidth: ($topBarLoginWidth - $topBarLoginButtonWidth) / 2 !default;
$topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
$topBarNavToggleSize: 8px !default;

Expand Down
12 changes: 12 additions & 0 deletions scss/foundation/components/modules/_topbar.scss
View file
Expand Up @@ -77,6 +77,18 @@
}
&:hover, &:focus { background: $topBarBgColor; }
}

/* Put login bar in the top bar */
&.login {padding: 0 $topBarHeight / 3;
form {display: inline-block; margin-bottom: 0; vertical-align: middle; width: $topBarLoginWidth;
input{float: left; width: auto; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; margin-bottom: 0; }
input[type=text]{ @include border-right-radius(0); width: $topBarLoginInputWidth;}
input[type=password] { margin-bottom: 0; @include border-left-radius(0); width: $topBarLoginInputWidth;
&+.button {border-left: none; @include border-left-radius(0); @include border-right-radius(2px); float: left; font-size: ms(0) - 2; margin-top: -1px; padding: 5px 12px 4px; width: $topBarLoginButtonWidth;}
}
}
&:hover, &:focus { background: $topBarBgColor; }
}

/* Hide the triangle for breakpoint menu */
&.toggle-topbar { display: none; }
Expand Down
194 changes: 194 additions & 0 deletions test/topbar-login.html
View file
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />

<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />

<title>Foundation Top Bar Testing</title>

<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/styles.css">

<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>

</head>
<body>

<div class="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
<!-- <img src="http://placehold.it/25x25"> -->
Top Bar Title
</a>
</h1>
</li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>

<section>
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active has-dropdown">
<a href="#">Main Item 1</a>
<ul class="dropdown">
<li><a href="#">Dropdown Option</a></li>
<li class="active"><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all &rarr;</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="#">Main Item 2</a></li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Main Item 3</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Dropdown Level 1a</a>
<ul class="dropdown">
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 3a</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#" class="">Dropdown Level 1b</a>
<ul class="dropdown">
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 3b</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all &rarr;</a></li>
</ul>
</li>
<li class="divider"></li>
</ul>

<!-- Right Nav Section -->
<ul class="right">
<li class="show-for-large divider"></li>

<li class="has-dropdown">
<a href="#">Main Item 4</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Has Dropdown, Level 1</a>
<ul class="dropdown">
<li><a href="#">Dropdown Options</a></li>
<li><a href="#">Dropdown Options</a></li>
<li class="has-dropdown">
<a href="#">Has Dropdown, Level 2</a>
<ul class="dropdown test">
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all &rarr;</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="login">
<form>
<input type="text" placeholder="User Name">
<input type="password" placeholder="Password">
<input type="submit" class="small button" value="Log In">
</form>
</li>
<li class="divider show-for-small"></li>

</ul>
</section>
</nav>
</div>

<div class="row">
<div class="twelve columns">
<p><a href="index.html">&laquo; Back</a></p>
<h2>Foundation Top Bar Testing</h2>
<hr>
</div>
</div>

<div class="row">
<div class="twelve columns">
<h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
</div>
</div>

<!-- Included JS Files -->
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.topbar.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
<script type="text/javascript">
// Page-Specific JavaScript Goes Here
</script>
</body>
</html>

0 comments on commit e5c63be

Please sign in to comment.