Commit: 20c9ed1dd3a53c336ba8124c98ea5c6fafff8c52 Author: Adam Harvey <[email protected]> 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/[email protected]" 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; -- PHP Webmaster List Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
