Commit: 079606e237bb93f79b01ad33662526db791ad4e4 Author: Arnaud Lemercier <[email protected]> Sat, 22 Jul 2017 02:12:47 +0200 Parents: a72456f3c3465ac24da9248ac264653b06905b69 Branches: master
Link: http://git.php.net/?p=web/news.git;a=commitdiff;h=079606e237bb93f79b01ad33662526db791ad4e4 Log: Add a simple responsive menu Changed paths: M common.php M style.css Diff: diff --git a/common.php b/common.php index 6009f1c..728e6b1 100644 --- a/common.php +++ b/common.php @@ -43,6 +43,13 @@ function head($title="PHP Mailing Lists (PHP News)") { <form class="search-form" action="http://php.net/search.php";> <input class="search-input" value="" name="pattern" placeholder="Search"> </form> + <div class="menu-icon" onclick="document.querySelector('.menu-mobile').classList.toggle('hide')">☰ MENU</div> + <ul class="menu-mobile hide"> + <li class="menu-mobile-item"><a class="menu-mobile-item-link" href="http://php.net/downloads.php";>Downloads</a></li> + <li class="menu-mobile-item"><a class="menu-mobile-item-link" href="http://php.net/docs.php";>Documentation</a></li> + <li class="menu-mobile-item"><a class="menu-mobile-item-link" href="http://php.net/get-involved.php";>Get Involved</a></li> + <li class="menu-mobile-item mod-active"><a class="menu-mobile-item-link" href="http://php.net/support.php";>Help</a></li> + </ul> </nav> </header> <?php diff --git a/style.css b/style.css index 47379f2..4457715 100644 --- a/style.css +++ b/style.css @@ -176,6 +176,28 @@ a.header-menu-item-link:hover{ } +.menu-mobile{ + background: #4F5B93; + padding: 0; + margin: 0; + list-style: none; +} +.menu-mobile-item{ + text-align: right; + display: inline-block; +} +a.menu-mobile-item-link{ + display: inline-block; + text-decoration: none; + float: none; + padding: .75rem; + color: #E2E4EF; + border: 0; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + line-height: 24px; +} + + .search-form { float: right; width: 25%; @@ -330,23 +352,42 @@ table.standard th.subr { text-align: right; } +.menu-icon { + display: none; + background: #4F5B93; + padding: 14px 24px 10px; + line-height: 24px; + float: right; + color: #fff; + cursor: pointer; +} -.welcome-mobile{ +.hide{ display: none; } + @media screen and (max-width: 760px) { .welcome{ display: none; } - .welcome-mobile{ - display: block; + .search-form{ + display: none; } blockquote{ margin: 16px; } } +@media screen and (max-width: 580px) { + .menu-icon{ + display: block; + } + .header-menu{ + display: none; + } +} + @media screen and (max-width: 420px) { .content { padding: 0.5rem; -- PHP Webmaster List Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
