Skip to content

Commit

Permalink
fix(component): megamenu documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygatesoupe
ygatesoupe committed Mar 17, 2016
1 parent 872855d commit 39dc6c1
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 210 deletions.
36 changes: 3 additions & 33 deletions docs-orange/boosted-migration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,45 +30,15 @@ In addition to new navbar classes and semantic, arrows elements are now to be pu

#### Mega menu

Mega menu has been totally reworked. See [here](/?) for more info.

the new mega menu has no common legacy with his ancessor. The previous one was base on the dropdown menu. This version has his own implementation but the main html structure part is closed.
the new mega-menu needs some others component to run :
<ul>
<li>dropdown</li>
<li>navbar</li>
</ul>

in high resolution :
<ul>
<li> The part is contained in topmenu class </li>
<li> The dropdown part is contained in navbar-toggleable-xs class</li>
</ul>
Some other bars appear in mobile resolutions :
<ul>
<li> The language part is contained in navbar-langbar </li>
<li> The dropdown part is contained in navbar-toggleable-xs </li>
</ul>

It is highly recommended to re-inject your content in the new mega menu but here are some of the changing point you can use to transform your old megamenu in a new one.
in Order to convert your mega menu you have to had the class the mega-menu in the navbar container
change class dropdown-toggle into megamenu-dropdown-toggle
add dropdown-mega to li.nav-item
add the mega-menu-content-title to evrey H2 in mega-menu-content
you must copy some of the html in order complete the mega menu :
add the topmenu class container
add the navbar-smallsearchbar
add the megamenusearchwraper
add the navbar-brand ( just beffore the ul.nav-menu)
add the last dropdown-mega : searchpanel ( this is the search panel in high resolution )

Mega menu has been reworked based on the collapse and navbar components. See [here](../components/orange-megamenu/) for documentation and examples.

### Forms

Dropped the `.horizontal-form`class. Each row of form is now contained in a `.form group` section with a `.row` class.

Class `.control-label`is now `.form-control-label`.

For more information please check the new [forms](../components/forms/) for documentation and examples.
For more information please check the new [forms](../components/forms/) documentation and examples.


### Skiplinks
Expand Down
231 changes: 73 additions & 158 deletions docs-orange/components/orange-megamenu.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,164 +4,79 @@ title: Orange megamenu
group: components
---

Add the `.mega-menu` class to the nav tag, `.nav-menu` onto the nav links container. Each item with a sub menu will have the same classes as the [dropdowns](/components/dropdowns/)
Megamenu is based on the [collapse](../collapse) component.

It consists of 3 or 4 columns depending on project design needs. A `h2` title is used as a general title of the megamenu. Each column is headlined by a `h3` title.

Megamenu has a footer section where additional links can be added and a button to close the panel.

{% example html %}
<nav id="main_nav" class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="../../assets/img/logo-orange.png" alt="Link to the homepage"></a>
<ul class="nav navbar-nav nav-menu">
<li class="nav-item dropdown">
<a href="#" title="open the news menu" class="nav-link dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">open the </span>News <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="row mega-menu-content">
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">news type 1</a></li>
<li><a href="#">news type 2</a></li>
<li><a href="#">news type 3</a></li>
<li><a href="#">news type 4</a></li>
<li><a href="#">news type 5</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">news type 6</a></li>
<li><a href="#">news type 7</a></li>
<li><a href="#">news type 8</a></li>
<li><a href="#">news type 9</a></li>
<li><a href="#">news type 10</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">news type 11</a></li>
<li><a href="#">news type 12</a></li>
<li><a href="#">news type 13</a></li>
<li><a href="#">news type 14</a></li>
<li><a href="#">news type 15</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img alt="" style="height: 180px; display: block;" src="images/index.svg">
</div>
<a role="button" class="pull-right" href="#" title="close the menu">
<span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</li>
</ul>
</li>
<!-- megamenu toggle -->
<a class="btn btn-info" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Toggle megamenu
</a>

<!-- megamenu content -->
<div class="mega-menu panel" style="position: static;">
<div class="collapse panel-collapse in" id="collapseExample" aria-labelledby="menu_title">
<div class="container">
<h2 aria-hidden="true" id="menu_title"><a href="#">Home Shop</a></h2>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3">
<h3 id="list_title_1"><a href="#">Internet</a></h3>
<ul aria-labelledby="list_title_1" role="menu">
<li role="menuitem"><a href="#">iPhone 6</a></li>
<li role="menuitem"><a href="#">Phones </a></li>
<li role="menuitem"><a href="#">Tablets</a></li>
<li role="menuitem"><a href="#">Accessories</a></li>
<li role="menuitem"><a href="#">Coming soon</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<h3 id="list_title_2"><a href="#">Mobile</a></h3>
<ul aria-labelledby="list_title_2" role="menu">
<li role="menuitem"><a href="#">Phones </a></li>
<li role="menuitem"><a href="#">Plans</a></li>
<li role="menuitem"><a href="#">Accessories</a></li>
<li role="menuitem"><a href="#">Connected objects</a></li>
<li role="menuitem"><a href="#">Options</a></li>
<li role="menuitem"><a href="#">Bundles</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<h3 id="list_title_2"><a href="#">Lorem</a></h3>
<ul aria-labelledby="list_title_2" role="menu">
<li role="menuitem"><a href="#">Lorem ipsum </a></li>
<li role="menuitem"><a href="#">Lorem ipsum</a></li>
<li role="menuitem"><a href="#">Lorem ipsum</a></li>
<li role="menuitem"><a href="#">Lorem ipsum</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3">
<h3 id="list_title_2"><a href="#">Ipsum</a></h3>
<ul aria-labelledby="list_title_2" role="menu">
<li role="menuitem"><a href="#">Lorem ipsum </a></li>
<li role="menuitem"><a href="#">Lorem ipsum</a></li>
<li role="menuitem"><a href="#">Lorem ipsum</a></li>
<li role="menuitem"><a href="#">Lorem ipsum</a></li>
</ul>
</div>
</div>
<div class="row footer">
<div class="pull-md-left">
<a href="#">Footer link</a>
</div>
<div class="pull-md-right hidden-xs-down">
<a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="#collapseExample" title="close shop menu"><span class="icon-delete"></span></a>
</div>
</div>
</div>
</div>
</div>
{% endexample %}

Megamenu should be used in combination with the [navbar](../navbar) component.

Be sure to use `.panel` and `.pane-collapse` classes to the megamenu section and `data-parent` attribute in the navbar `.nav-link` get an opened megamenu closed when another gets opened.

<li class="nav-item dropdown ">
<a href="#" title="open the shop menu" class="nav-link dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">open the </span>Shop <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="row mega-menu-content">
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">action type 1</a></li>
<li><a href="#">action type 2</a></li>
<li><a href="#">action type 3</a></li>
<li><a href="#">action type 4</a></li>
<li><a href="#">action type 5</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">action type 6</a></li>
<li><a href="#">action type 7</a></li>
<li><a href="#">action type 8</a></li>
<li><a href="#">action type 9</a></li>
<li><a href="#">action type 10</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">action type 11</a></li>
<li><a href="#">action type 12</a></li>
<li><a href="#">action type 13</a></li>
<li><a href="#">action type 14</a></li>
<li><a href="#">action type 15</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img alt="" style="height: 180px; display: block;" src="images/index.svg">
</div>
<a role="button" class="pull-right" href="#" title="close the menu">
<span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Support</a></li>
<li class="nav-item"><a href="#" class="nav-link">Business</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <b class="caret" aria-hidden="true"></b></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a class="dropdown-item" href="#" role="menuitem">Action</a></li>
<li role="presentation"><a class="dropdown-item" href="#" role="menuitem">Another action</a></li>
<li role="presentation"><a class="dropdown-item" href="#" role="menuitem">Something else here</a></li>
<li role="presentation" class="dropdown-divider"></li>
<li role="presentation"><a class="dropdown-item" href="#" role="menuitem">Separated link</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" title="open the news menu" class="nav-link dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">open the </span>News <b class="caret" aria-hidden="true"></b><span class="sr-only"> menu</span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="row mega-menu-content">
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">news type 1</a></li>
<li><a href="#">news type 2</a></li>
<li><a href="#">news type 3</a></li>
<li><a href="#">news type 4</a></li>
<li><a href="#">news type 5</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">news type 6</a></li>
<li><a href="#">news type 7</a></li>
<li><a href="#">news type 8</a></li>
<li><a href="#">news type 9</a></li>
<li><a href="#">news type 10</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul>
<li><a href="#">news type 11</a></li>
<li><a href="#">news type 12</a></li>
<li><a href="#">news type 13</a></li>
<li><a href="#">news type 14</a></li>
<li><a href="#">news type 15</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img alt="" style="height: 180px; display: block;" src="images/index.svg">
</div>
<a role="button" class="pull-right" href="#" title="close the menu">
<span class="sr-only">close the menu</span><span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</li>
</ul>
</li>
<li class="nav-item" id="id_for_cdu_link"></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% endexample %}
See a full implementation in the Orange News [example page](../..//examples/orange-news/)
24 changes: 12 additions & 12 deletions docs-orange/examples/orange-news/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,21 +116,21 @@
<div class="container">
<h2 aria-hidden="true" id="menu_title"><a href="#">Home Discover</a></h2>
<div class="row">
<div class="hero-wrapper col-xs-12 col-sm-6 col-md-3">
<span class="hero icon-frame-fun"></span>
<a href="#" class="hero-link">Fun</a>
<div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
<span class="o-frame icon-frame-fun"></span>
<a href="#" class="o-frame-link">Fun</a>
</div>
<div class="hero-wrapper col-xs-12 col-sm-6 col-md-3">
<span class="hero icon-frame-money"></span>
<a href="#" class="hero-link">Money</a>
<div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
<span class="o-frame icon-frame-money"></span>
<a href="#" class="o-frame-link">Money</a>
</div>
<div class="hero-wrapper col-xs-12 col-sm-6 col-md-3">
<span class="hero icon-frame-care"></span>
<a href="#" class="hero-link">Care</a>
<div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
<span class="o-frame icon-frame-care"></span>
<a href="#" class="o-frame-link">Care</a>
</div>
<div class="hero-wrapper col-xs-12 col-sm-6 col-md-3">
<span class="hero icon-frame-tariff"></span>
<a href="#" class="hero-link">Tariff</a>
<div class="o-frame-wrapper col-xs-6 col-sm-6 col-md-3">
<span class="o-frame icon-frame-tariff"></span>
<a href="#" class="o-frame-link">Tariff</a>
</div>
</div>
<div class="row footer">
Expand Down
Loading

0 comments on commit 39dc6c1

Please sign in to comment.