menu dla urządzeń mobilnych

synergia · Feb 17, 2015 · 40181cd · 40181cd
1 parent c681426
commit 40181cd
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 33 deletions.
diff --git a/js/init.js b/js/init.js
@@ -257,8 +257,10 @@
             var div_top = $('.nav-container').offset().top;
             if (window_top > div_top) {
                 $('nav').addClass('sticky');
+                $('a#pull').removeClass('noshow');
             } else {
                 $('nav').removeClass('sticky');
+                $('a#pull').addClass('noshow');
             }
         });
         /**
@@ -302,12 +304,28 @@
         });
     });
     $(document).ready(function () {
-        $('.switch').on('click', function(e) {
-      $('#cardId').toggleClass("flip"); //you can list several class names
-      e.preventDefault();
+        $('.switch').on('click', function (e) {
+            $('#cardId').toggleClass("flip"); //you can list several class names
+            e.preventDefault();
+        });
     });
+    //M E N U
+    $(function () {
+        var pull = $('#pull');
+        menu = $('nav ul');
+        menuHeight = menu.height();
+
+        $(pull).on('click', function (e) {
+            e.preventDefault();
+            menu.slideToggle();
+        });
+    });
+    $(window).resize(function () {
+        var w = $(window).width();
+        if (w > 320 && menu.is(':hidden')) {
+            menu.removeAttr('style');
+        }
     });
 })(jQuery);
 
 //Flipper
-
diff --git a/style.css b/style.css
@@ -3,7 +3,7 @@ Theme Name: RoboDrift
 Author: stsdc
 Author URI: http://vk.com.stsdc/
 Description: Motyw specjalnie przygotowany dla RoboDrift.
-Version: 0.7
+Version: 0.7.2
 Text Domain: robodrift
 RoboDrift WordPress Theme, Copyright 2014-2015 Stanisław Dac.
 */
@@ -838,6 +838,20 @@ nav {
     font-size: 1em;
 }
 
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.clearfix {
+    *zoom: 1;
+}
+
 #header nav ul {
     margin-bottom: 0;
 }
@@ -846,13 +860,13 @@ nav {
     display: inline;
 }
 
-#header nav a {
+#header ul a {
     display: inline-block;
     padding: 10px;
     color: rgba(255, 255, 255, 1);
 }
 
-#header nav a:hover,
+#header ul a:hover,
 .active {
     border-bottom: 4px solid white;
     background: rgba(255, 255, 255, 0.05);
@@ -1017,6 +1031,43 @@ a.single-link:hover {
         height: auto;
         max-width: 200px;
     }
+    nav ul {
+        display: none;
+        height: auto;
+    }
+    nav a#pull {
+        width: 100%;
+        position: relative;
+    }
+    nav a#pull:after {
+        content: "";
+        width: 30px;
+        height: 30px;
+        display: inline-block;
+        position: absolute;
+        right: 15px;
+        top: 10px;
+    }
+    #header ul a {
+        display: inline-block;
+        padding: 0px;
+        width: 100%;
+        color: rgba(255, 255, 255, 1);
+    }
+    #header ul a:hover,
+    .active {
+        border-bottom: 0px solid white;
+        background: rgba(255, 255, 255, 0.2);
+    }
+    .noshow {
+        display: none;
+    }
+}
+
+@media (min-width: 737px) {
+    nav a#pull {
+        display: none;
+    }
 }
 
 @media (max-width: 960px) {

diff --git a/template-part-head.php b/template-part-head.php
@@ -1,35 +1,37 @@
 <?php global $dm_settings; ?>
 
-    <section id="header" class="dark" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#header">
+<section id="header" class="dark" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#header">
 
-        <div class="impreza-na-fb">
-            <a href="<?php echo $dm_settings['fb'] ?>" class="icon fa-facebook"><span class="label">Facebook</span></a>
+    <div class="impreza-na-fb">
+        <a href="<?php echo $dm_settings['fb'] ?>" class="icon fa-facebook"><span class="label">Facebook</span></a>
+
+    </div>
 
-        </div>
 
+    <header>
+        <h1><?php bloginfo( 'name' ); ?></h1>
+    </header>
+    <footer>
+        <div class="nav-container">
+            <nav class="clearfix">
+                <ul class="clearfix">
+                    <li><a href="#first">O Zawodach</a>
+                    </li>
+                    <li><a href="#second">Regulamin</a>
+                    </li>
+                    <li><a href="#nagrody">Nagrody</a>
+                    </li>
+                    <li><a href="#organizatorzy">Organizatorzy</a>
+                    </li>
+                    <li><a href="/rejestracja">Rejestracja</a>
+                    </li>
+                </ul>
+                <a href="#" id="pull"><i class="fa-bars icon"></i></a>
+            </nav>
+        </div>
+    </footer>
+</section>
 
-        <header>
-            <h1><?php bloginfo( 'name' ); ?></h1>
-        </header>
-        <footer>
-            <div class="nav-container">
-                <nav>
-                    <ul>
-                        <li><a href="#first">O Zawodach</a>
-                        </li>
-                        <li><a href="#second">Regulamin</a>
-                        </li>
-                        <li><a href="#nagrody">Nagrody</a>
-                        </li>
-                        <li><a href="#organizatorzy">Organizatorzy</a>
-                        </li>
-                        <li><a href="/rejestracja">Rejestracja</a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
-        </footer>
-    </section>
 <script type="text/javascript">
     if (!mo()) {
         (function ($) {