-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Multilevel menu for mobile in top-bar. This is not Foundation navigation. It is an independent development.
- Loading branch information
Showing
16 changed files
with
300 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
app/magento-foundation/default/template/catalog/navigation/mobile-menu.phtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
|
|
||
| <div id="mobile-menu"> | ||
|
|
||
| <ul> | ||
| <?php foreach ($this->getStoreCategories() as $_category): ?> | ||
| <?php echo $this->drawItem($_category) ?> | ||
| <?php endforeach ?> | ||
| </ul> | ||
|
|
||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -47,3 +47,4 @@ | |
| </ul> | ||
| </div> | ||
| <?php endif ?> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
|
|
||
| #mobile-menu { | ||
| display:none; | ||
| margin: 0; | ||
| } | ||
|
|
||
| #mobile-menu h2 { | ||
| margin:0; | ||
| padding: 15px; | ||
| background: #666; | ||
| color: #fff; | ||
| text-transform:uppercase; | ||
| } | ||
|
|
||
| #mobile-menu ul { | ||
| margin:0; | ||
| display: block; | ||
|
|
||
| position: relative; | ||
|
|
||
| } | ||
|
|
||
| #mobile-menu #nav li ul.shown-sub { left:0; z-index:999; border: 1px solid #0f0; } | ||
|
|
||
| #mobile-menu li { | ||
| font-size: 18px; | ||
| border-bottom: 1px solid #666; | ||
| width: 100%; | ||
| background:#777; | ||
| } | ||
|
|
||
| .header-container .top-bar #mobile-menu ul > li a:not(.button) { | ||
| display: block !important; | ||
| right: 15px; | ||
| line-height: 24px; | ||
| } | ||
|
|
||
|
|
||
| #mobile-menu li a{ | ||
| color:#eee; | ||
| padding: 10px 15px 10px 20px; | ||
| width: 100%; | ||
| font-family: "OpenSans","Helvetica Neue","Helvetica",Arial,Verdana,sans-serif !important; | ||
| } | ||
|
|
||
|
|
||
| .top-bar #mobile-menu ul > li a:not(.button) { | ||
| font-size: 18px; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| #mobile-menu li a:hover { color:#fff; } | ||
|
|
||
| #mobile-menu li a span{ | ||
| float:left; | ||
| padding: 0 0 0 15px; | ||
| } | ||
|
|
||
| #mobile-menu li:hover { background:#888; } | ||
| #mobile-menu li li{ background: #999; } | ||
| #mobile-menu li li:hover { background: #aaa; } | ||
| #mobile-menu li li li { background: #bbb; } | ||
| #mobile-menu li li li:hover { background: #ccc; } | ||
|
|
||
| #mobile-menu li.level1.last, #mobile-menu li.level2.last { border-bottom:0; } | ||
| #mobile-menu li a { border-right: 0!important; } | ||
|
|
||
| #mobile-menu li a span{ padding-left: 0px; } | ||
| #mobile-menu li li a span{ padding-left: 15px; } | ||
| #mobile-menu li li li a span{ padding-left: 30px; } | ||
|
|
||
| #mobile-menu li a{ background:url(../images/white-arrows.png) no-repeat; display:block; } | ||
|
|
||
| #mobile-menu li a{ background-position: 98% -105px; } | ||
| #mobile-menu li.accordion a { background-position: 98% -244px; } | ||
| #mobile-menu li.accordion a.accordionExpanded { background-position: 98% -197px; } | ||
|
|
||
| #mobile-menu li.parent li a { background-position: 98% -105px; } | ||
|
|
||
| #mobile-menu li li.parent a { background-position: 98% -244px; } | ||
|
|
||
| #mobile-menu li.parent li.parent li a { background-position: 98% -108px; } | ||
|
|
||
| /************ MEDIA QUERIES ************/ | ||
|
|
||
| .boton-menu-movil { | ||
| float:left; | ||
| margin:8px 0 0 8px; | ||
| display:none; | ||
| } | ||
|
|
||
| .boton-menu-movil a { | ||
| font-size:18px; | ||
| overflow:visible; | ||
| width:auto; | ||
| border:0; | ||
| padding:8px 16px 6px; | ||
| margin:0; | ||
| cursor:pointer; | ||
| color:#fff; | ||
| float:right; | ||
| text-shadow: 0 1px 1px #333; | ||
|
|
||
| border-radius:5px; | ||
| -webkit-border-radius:5px; | ||
| -moz-border-radius:5px; | ||
|
|
||
| background: #666; | ||
|
|
||
| text-decoration:none; | ||
| text-transform:uppercase; | ||
| } | ||
|
|
||
|
|
||
| @media only screen and (max-width: 800px) { | ||
|
|
||
| nav ul { display: none; } | ||
|
|
||
| .nav-container { display: none !important; } | ||
|
|
||
| #mobile-menu .nav-container { display: block !important; } | ||
|
|
||
| .boton-menu-movil { display:inline;} | ||
|
|
||
| #mobile-menu { display:block;} | ||
|
|
||
| } |
Oops, something went wrong.