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

Commit: 1d1ed2ea92990ad6c41fcd1e0a74ff32f601e24d Author: Paul Dragoonis <dragoonis@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-logo@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;