From 39dc6c18ec67ff82069746bf9be40e4f90734d7e Mon Sep 17 00:00:00 2001 From: Yves Gatesoupe Date: Thu, 17 Mar 2016 11:59:07 +0100 Subject: [PATCH] fix(component): megamenu documentation --- docs-orange/boosted-migration.md | 36 +-- docs-orange/components/orange-megamenu.md | 231 +++++++------------- docs-orange/examples/orange-news/index.html | 24 +- scss/_o-megamenu.scss | 14 +- 4 files changed, 95 insertions(+), 210 deletions(-) diff --git a/docs-orange/boosted-migration.md b/docs-orange/boosted-migration.md index ddbf3df5ee..bb213e909b 100644 --- a/docs-orange/boosted-migration.md +++ b/docs-orange/boosted-migration.md @@ -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 : - - - in high resolution : - -Some other bars appear in mobile resolutions : - - -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 diff --git a/docs-orange/components/orange-megamenu.md b/docs-orange/components/orange-megamenu.md index 24094058ed..adca096362 100644 --- a/docs-orange/components/orange-megamenu.md +++ b/docs-orange/components/orange-megamenu.md @@ -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 %} - -{% endexample %} \ No newline at end of file +See a full implementation in the Orange News [example page](../..//examples/orange-news/) \ No newline at end of file diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html index 67206078e9..5f1efb798e 100644 --- a/docs-orange/examples/orange-news/index.html +++ b/docs-orange/examples/orange-news/index.html @@ -116,21 +116,21 @@
-
- - Fun +
+ + Fun
-
- - Money +
+ + Money
-
- - Care +
+ + Care
-
- - Tariff +
+ + Tariff
diff --git a/scss/_o-megamenu.scss b/scss/_o-megamenu.scss index b88c90a0fd..4b1a2a49d9 100644 --- a/scss/_o-megamenu.scss +++ b/scss/_o-megamenu.scss @@ -32,17 +32,17 @@ text-decoration: none; } - .hero-wrapper { + .o-frame-wrapper { margin-bottom: 1.25rem; } - .hero { + .o-frame { @include hover{ cursor: default; } font-size: calc((#{map-get($container-max-widths, xl)} / 4) - 1.25rem); color: $brand-orange; - + .hero-link { + + .o-frame-link { top: calc((((#{map-get($container-max-widths, xl)} / 4) - 1.25rem) / 2) - #{$font-size-h3} / 2); width: 100%; font-size: $font-size-h3; @@ -51,7 +51,7 @@ @include media-breakpoint-down(lg) { font-size: calc((#{map-get($container-max-widths, lg)} / 4) - 1.25rem); - + .hero-link { + + .o-frame-link { top: calc((((#{map-get($container-max-widths, lg)} / 4) - 1.25rem) / 2) - #{$font-size-h4} / 2); width: 100%; font-size: $font-size-h4; @@ -60,7 +60,7 @@ } @include media-breakpoint-down(md) { font-size: calc((#{map-get($container-max-widths, md)} / 4) - 1.25rem); - + .hero-link { + + .o-frame-link { top: calc((((#{map-get($container-max-widths, md)} / 4) - 1.25rem) / 2) - #{$font-size-h5} / 2); width: 100%; font-size: $font-size-h5; @@ -69,7 +69,7 @@ } @include media-breakpoint-down(sm) { font-size: calc((#{map-get($container-max-widths, sm)} / 2) - 1.25rem); - + .hero-link { + + .o-frame-link { top: calc((((#{map-get($container-max-widths, sm)} / 2) - 1.25rem) / 2) - #{$font-size-h3} / 2); width: calc(#{map-get($container-max-widths, sm)} / 2); font-size: $font-size-h3; @@ -78,7 +78,7 @@ } } - .hero + .hero-link { + .o-frame + .o-frame-link { position: absolute; left: 0; display: block;