Permalink
Browse files

adding category navigation for phones

  • Loading branch information...
1 parent 834645f commit a34e8ca46de75ec1d0841329093da4983f317adf @SteveRohrlack SteveRohrlack committed Apr 1, 2012
@@ -15,6 +15,9 @@
</div>
<section class="page-header">
<div class="main-container col3-layout">
+
+ <button id="categories-show-modal" class="btn btn-large visible-phone"><?php echo $this->__('categories') ?></button>
+
<div class="main row">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="span9 clearfix">
@@ -254,4 +254,51 @@ ul, ol {
.sort-by select {
width: 180px;
-}
+}
+
+/* modal */
+.modal {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ z-index: 1050;
+ overflow: auto;
+ width: 560px;
+ margin: -250px 0 0 -280px;
+ background-color: #ffffff;
+ border: 1px solid #999;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ *border: 1px solid #999;
+ /* IE6-7 */
+
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+}
+
+.modal.active {
+ display: block;
+}
+
+.subnav.modal {
+ height: auto;
+}
+
+.subnav.modal #nav {
+ margin: 0;
+ padding: 0;
+ width: auto;
+}
+
+.subnav.modal #nav ul {
+ left: 0;
+ position: relative;
+ top: 0;
+ width: auto;
+}
@@ -41,4 +41,14 @@ document.observe('dom:loaded', function() {
});
});
});
-});
+
+ //categories modal box
+ if($('categories-show-modal') && $('category-nav')) {
+ var categoryNavigation = $('category-nav');
+ $('categories-show-modal').observe('click', function(ev) {
+ categoryNavigation
+ .addClassName('modal')
+ .addClassName('active');
+ });
+ }
+});

0 comments on commit a34e8ca

Please sign in to comment.