Permalink
Browse files

feat(nav): new examples

  • Loading branch information...
ddprrt committed Jul 26, 2016
1 parent 5aa9bf8 commit aee7f9515f68d3c9af975c639b6a9f39ebbd13a3
@@ -3,8 +3,8 @@
<img class="nav__logo" src="/doc/images/brand/dynatrace-logo.svg" alt="dynatrace logo" />
</a>
<div class="nav__buttongroup">
<a class="btn btn--navigation nav__cta" href="https://www.dynatrace.com/trial/">Free trial</a>
<button data-target="#nav-bar" id="menu-toggle" class="nav__menutoggle">Menu</button>
<a class="nav__btn nav__btn--cta" href="/">Find me on GitHub</a>
<button data-target="#nav-bar" id="menu-toggle" class="nav__btn--menutoggle nav__btn">Menu</button>
</div>
<nav id="nav-bar" class="nav__bar js-nav-toggle">
<ul class="nav__list nav__list--primary">
View
@@ -167,29 +167,42 @@ $nav-breakpoint: 760px;
* Toggle for mobile nav
*/
.nav__menutoggle {
.nav__btn {
color: #fff;
font-size: 1em;
font-family: inherit;
appearance: none;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer;
line-height: $nav-height;
height: $nav-height;
padding-left: 1rem;
padding-right: 1rem;
vertical-align: middle;
display: inline-block;
}
.nav__menutoggle:hover,
.nav__menutoggle:focus {
.nav__btn:hover,
.nav__btn:focus {
color: #fff;
background-color: $gray-700;
text-decoration: none;
}
.nav__btn--cta {
background-color: $green-500;
}
.nav__btn--cta:hover,
.nav__btn--cta:focus {
background-color: $green-600;
}
@media (min-width: $nav-breakpoint) {
.nav__menutoggle {
.nav__btn--menutoggle {
display: none;
}
}
@@ -3,8 +3,7 @@
<img class="nav__logo" src="/doc/images/brand/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<a class="btn btn--navigation nav__cta" href="https://www.dynatrace.com/trial/">Free trial</a>
<button data-target="#nav-bar" id="menu-toggle" class="nav__menutoggle">Menu</button>
<button data-target="#nav-bar" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
<nav id="nav-bar" class="nav__bar js-nav-toggle">
<ul class="nav__list nav__list--primary">
@@ -3,8 +3,7 @@
<img class="nav__logo" src="/doc/images/brand/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<a class="btn btn--navigation nav__cta" href="https://www.dynatrace.com/trial/">Free trial</a>
<button data-target="#nav-bar" id="menu-toggle" class="nav__menutoggle">Menu</button>
<button data-target="#nav-bar" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
<nav id="nav-bar" class="nav__bar js-nav-toggle">
<ul class="nav__list nav__list--primary">
@@ -0,0 +1,46 @@
<div class="nav">
<a class="nav__brand" href="/">
<img class="nav__logo" src="/doc/images/brand/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<a class="nav__btn nav__btn--cta" href="https://www.dynatrace.com/trial/">Free trial</a>
<button data-target="#nav-bar" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
<nav id="nav-bar" class="nav__bar js-nav-toggle">
<ul class="nav__list nav__list--primary">
<li class="nav__item">
<a class="nav__link" href="#">Solutions</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Platform</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Capabilities</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Technologies</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Services</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav__list nav__list--secondary">
<li class="nav__item">
<a class="nav__link nav__link--secondary" href="#">Community</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--secondary" href="#">Company</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--secondary" href="#">Blogs</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--secondary" href="#">Resources</a>
</li>
</ul>
</nav>
</div>

0 comments on commit aee7f95

Please sign in to comment.