Skip to content

Commit

Permalink
fix(component): navbar optimisation
Browse files Browse the repository at this point in the history 
throttle page scroll event
navbar doc
  • Loading branch information
@ygatesoupe
ygatesoupe committed Mar 23, 2016
1 parent ab538f6 commit 132d376
Show file tree
Hide file tree
Showing 7 changed files with 250 additions and 104 deletions.
3 changes: 2 additions & 1 deletion docs-orange/_data/nav.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,10 @@
- title: Navs
- title: Navbar
# boosted mod
- title: Orange navbar
- title: Orange megamenu
- title: Orange pointed tabs
- title: Local navigation
- title: Orange megamenu
- title: Orange footer
# end mod
- title: Breadcrumb
Expand Down
196 changes: 196 additions & 0 deletions docs-orange/components/orange-navbar.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
---
layout: docs
title: Orange navbar
group: components
---

Orange navbar is based on the [navbar](../navbar) component. It adds some display management and introduces the supra bar component.

## Contents

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}

## Main navbar

Orange navbar is the main navigation of project website. It should always be included in a `<header role="banner">` tag.

{% example html %}
<header role="banner">
<nav class="navbar navbar-dark" role="navigation">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="sr-only">toggle navigation</span>
<span class="icon-menu"></span>
</button>
<div class="container" >
<a class="navbar-brand"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt='Back to homepage' title='Back to homepage'/></a>
<ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open basket</span>
<span class="icon-buy" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open search bar</span>
<span class="icon-search" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
</nav>
</header>
{% endexample %}

## Supra bar

Another navigation can be added on top of orange navbar, it is called supar bar. Simply add the `.supra` class in you navbar delcaration.

{% example html %}
<nav class="navbar navbar-dark supra" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link active">Personal</a></li>
<li class="nav-item"><a href="#" class="nav-link">Business</a></li>
<li class="nav-item"><a href="#" class="nav-link">Follow us</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="sr-only">basket</span>
<span class="icon-buy" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="sr-only">my account</span>
<span class="icon-avatar"></span>
</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">EN</a>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#">FR</a></li>
<li><a class="dropdown-item" href="#">SP</a></li>
</ul>
</li>
</ul>
</div>
</nav>
{% endexample %}

A supra bar should never be used on its own and always be included in header and with the regular navbar, which gives :

## Full example

{% example html %}
<header role="banner" id="demo_navbar">
<nav class="navbar navbar-dark supra" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link active">Personal</a></li>
<li class="nav-item"><a href="#" class="nav-link">Business</a></li>
<li class="nav-item"><a href="#" class="nav-link">Follow us</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="sr-only">basket</span>
<span class="icon-buy" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="sr-only">my account</span>
<span class="icon-avatar"></span>
</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">EN</a>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#">FR</a></li>
<li><a class="dropdown-item" href="#">SP</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-dark" role="navigation">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="sr-only">toggle navigation</span>
<span class="icon-menu"></span>
</button>
<div class="container" >
<a class="navbar-brand"><img src="../../dist/img/ORANGE_LOGO_rgb.jpg" alt='Back to homepage' title='Back to homepage'/></a>
<ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open basket</span>
<span class="icon-buy" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link icon">
<span class="sr-only">open search bar</span>
<span class="icon-search" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
</nav>
</header>
{% endexample %}

## Options

Using javascript your can initialize the navbar component with the following options :

<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>sticky</td>
<td>boolean</td>
<td>false</td>
<td>Tells wether or not the navbar should stick to the top of page</td>
</tr>
<tr>
<td>trigger</td>
<td>selector</td>
<td>empty string</td>
<td>Hides the supra bar when the "trigger" element is no longer in viewport</td>
</tr>
</tbody>
</table>
</div>

## Usage

In your document javascript simply declare your navbar component with the needed options.

{% highlight js %}
$('#demo_navbar').navbar({sticky: true, trigger: '#hide_supra_trigger'});
{% endhighlight %}

See a full implementation in the Orange News [example page](../..//examples/orange-news/)
1 change: 0 additions & 1 deletion docs-orange/examples/orange-news/images/index.svg
View file

This file was deleted.

3 changes: 1 addition & 2 deletions docs-orange/examples/orange-news/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@
<header role="banner">
<nav class="navbar navbar-dark supra" role="navigation">
<div class="container">
<a class="navbar-brand"><img src="images/logo-orange.jpg" alt='Back to homepage' title='Back to homepage'/></a>
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link active">Personal</a></li>
<li class="nav-item"><a href="#" class="nav-link">Business</a></li>
Expand Down Expand Up @@ -537,7 +536,7 @@ <h4 class="panel-title">
}

$(document).ready(function(){
$('header').navbar({sticky: true});
$('header').navbar({sticky: true, trigger: '#hide_supra_trigger'});
});
</script>

Expand Down
Loading

0 comments on commit 132d376

Please sign in to comment.