com web/php: Switch to a pure CSS implementation of the responsive menu.: include/header.inc js/common.js styles/theme-base.css
| From: | Adam Harvey | Date: | Wed, 20 Nov 2013 21:04:28 +0000 |
| Subject: | com web/php: Switch to a pure CSS implementation of the responsive menu.: include/header.inc js/common.js styles/theme-base.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-17074@lists.php.net to get a copy of this message | ||
Commit: 20c9ed1dd3a53c336ba8124c98ea5c6fafff8c52
Author: Adam Harvey <aharvey@php.net> Wed, 20 Nov 2013 13:04:28 -0800
Parents: 25ae55ad3e622a82a2dc6cd9d3ff223e82a5b507
Branches: master
Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=20c9ed1dd3a53c336ba8124c98ea5c6fafff8c52
Log:
Switch to a pure CSS implementation of the responsive menu.
Changed paths:
M include/header.inc
M js/common.js
M styles/theme-base.css
Diff:
diff --git a/include/header.inc b/include/header.inc
index 0156522..fbc3ca4 100755
--- a/include/header.inc
+++ b/include/header.inc
@@ -75,7 +75,8 @@ if (isset($shortname) && $shortname) {
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand"><img
src="/images/logos/php-logo@2x.png" width="48" height="24"
alt="php"/></a>
- <a href="#" id="mainmenu-toggle"></a>
+ <div id="mainmenu-toggle-overlay"></div>
+ <input type="checkbox" id="mainmenu-toggle"></input>
<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>
diff --git a/js/common.js b/js/common.js
index 1086393..538c56f 100755
--- a/js/common.js
+++ b/js/common.js
@@ -210,11 +210,6 @@ $(document).ready(function() {
);
/*}}}*/
- // Responsive menu javascript
- jQuery('#mainmenu-toggle').on('click', function(e) {
- $('.navbar ..nav').stop().slideToggle();
- });
-
// Search box autocomplete.
jQuery("#topsearch .search-query").search({
language: getLanguage(),
diff --git a/styles/theme-base.css b/styles/theme-base.css
index fd74f58..0a8e3cb 100755
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -3120,7 +3120,7 @@ div.soft-deprecation-notice blockquote.sidebar {
float: right;
}
-#mainmenu-toggle {
+#mainmenu-toggle-overlay, #mainmenu-toggle {
display: none;
}
@@ -3144,19 +3144,27 @@ div.soft-deprecation-notice blockquote.sidebar {
/* Smartphones */
@media (max-width:465px) {
+ #mainmenu-toggle-overlay {
+ background: #669 url(../images/mobile-menu.png) no-repeat center center;
+ float: right;
+ display: block;
+ height: 32px;
+ width: 34px;
+ margin-top: 10px;
+ margin-right: 10px;
+ border-radius: 5px;
+ }
+
#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;
+ height: 32px;
+ width: 34px;
+ line-height: 32px;
+ margin-top: 10px;
+ margin-right: -34px;
+ float: right;
+ border-bottom: 0 none;
+ display: inline-block;
+ opacity: 0;
}
.navbar .brand {
@@ -3175,7 +3183,13 @@ div.soft-deprecation-notice blockquote.sidebar {
.navbar .nav {
clear: both;
float: none;
- display: none;
+ max-height: 0;
+ overflow: hidden;
+ -moz-transition: max-height 400ms;
+ -webkit-transition: max-height 400ms;
+ -o-transition: max-height 400ms;
+ -ms-transition: max-height 400ms;
+ transition: max-height 400ms;
}
.navbar .nav > li {
float: none;
@@ -3187,6 +3201,11 @@ div.soft-deprecation-notice blockquote.sidebar {
display: block;
}
+ #mainmenu-toggle:checked + .nav {
+ /* This just has to be big enough to cover whatever's in .nav. */
+ max-height: 50em;
+ }
+
/* Hiding UserVoice sticky bar when in smartphone mode */
#uvTabLabel {
display: none !important;