[PHP-WEBMASTER] com web/php: Creating a mobile responsive menu for smartphones.: images/mobile-menu.png include/header.inc js/common.js styles/theme-base.css

[Paul Dragoonis]

Commit:    1d1ed2ea92990ad6c41fcd1e0a74ff32f601e24d
Author:    Paul Dragoonis <dragoo...@gmail.com>         Sun, 6 Oct 2013 
18:58:30 +0100
Parents:   ecab3b509cbba4f93c55487460a7de008016ea5d
Branches:  master

Link:       
http://git.php.net/?p=web/php.git;a=commitdiff;h=1d1ed2ea92990ad6c41fcd1e0a74ff32f601e24d

Log:
Creating a mobile responsive menu for smartphones.

Changed paths:
  A  images/mobile-menu.png
  M  include/header.inc
  M  js/common.js
  M  styles/theme-base.css


Diff:
diff --git a/images/mobile-menu.png b/images/mobile-menu.png
new file mode 100644
index 0000000..d9641ec
Binary files /dev/null and b/images/mobile-menu.png differ
diff --git a/include/header.inc b/include/header.inc
old mode 100644
new mode 100755
index b6f5ca5..9b28820
--- a/include/header.inc
+++ b/include/header.inc
@@ -77,6 +77,7 @@ if (isset($shortname) && $shortname) {
   <div class="navbar-inner">
     <div class="container">
       <a href="/" class="brand"><img src="/images/logos/php-l...@2x.png" 
width="48" height="24" alt="php"/></a>
+      <a href="#" id="mainmenu-toggle"></a>
       <ul class="nav">
         <li class="<?php echo $curr == "downloads" ? "active" : ""?>"><a 
href="/downloads">Downloads</a></li>
         <li class="<?php echo $curr == "docs" ? "active" : ""?>"><a 
href="/docs.php">Documentation</a></li>
@@ -90,6 +91,8 @@ if (isset($shortname) && $shortname) {
   </div>
 </nav>
 
+
+
 <?php if (!isset($_COOKIE['BetaWarning']) || 
filter_var($_COOKIE['BetaWarning'],FILTER_VALIDATE_BOOLEAN) == TRUE): ?>
 <div id="head-beta-warning">
   <p id="beta-warning">
diff --git a/js/common.js b/js/common.js
old mode 100644
new mode 100755
index 1ccf712..2745e1b
--- a/js/common.js
+++ b/js/common.js
@@ -221,6 +221,11 @@ $(document).ready(function() {
     );
 /*}}}*/
 
+    // Responsive menu javascript
+    jQuery('#mainmenu-toggle').on('click', function(e) { 
+        $('.navbar .nav').stop().slideToggle();  
+    });
+
 });
 
 /**
diff --git a/styles/theme-base.css b/styles/theme-base.css
index d5b674f..9fcb7e1 100755
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -3037,6 +3037,10 @@ div.soft-deprecation-notice blockquote.sidebar {
     border-width:0;
 }
 
+#mainmenu-toggle {
+    display: none;
+}
+
 
 @media (max-width:767px) {
   .navbar-static-top .container,
@@ -3054,9 +3058,26 @@ div.soft-deprecation-notice blockquote.sidebar {
   }
 }
 
+/* Smartphones */
 @media (max-width:465px) {
+
+  #mainmenu-toggle {
+      background: #669 url(../images/mobile-menu.png) no-repeat center center;
+      display: inline-block;
+      height: 32px;
+      width: 34px;
+      color: #fff!important;
+      line-height: 32px;
+      text-transform: uppercase;
+      margin-top: 10px;
+      margin-right: 10px;
+      border-radius: 5px;
+      float: right;
+      border-bottom: 0 none;
+  }
+
   .navbar .brand {
-    float: none;
+    float: left;
     margin-bottom: 0.5em;
   }
 
@@ -3066,12 +3087,23 @@ div.soft-deprecation-notice blockquote.sidebar {
 
   .navbar .brand img {
     display: block;
-    margin: 0 auto;
+    margin-left: 12px;
+  }
+  .navbar .nav {
+    clear: both;
+    float: none;
+    display: none;
   }
   .navbar .nav > li {
-    width: 50%;
+    float: none;
+    display: block;
     text-align: center;
   }
+  .navbar .nav > li a {
+    width: 100%;
+    display: block;
+  }
+
   /* Hiding UserVoice sticky bar when in smartphone mode */
   #uvTabLabel {
     display: none !important;


--
PHP Webmaster List Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php