com web/news: Add a simple responsive menu: common.php style.css
| From: | Ben Ramsey | Date: | Sat, 22 Jul 2017 00:12:47 +0000 |
| Subject: | com web/news: Add a simple responsive menu: common.php style.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-26182@lists.php.net to get a copy of this message | ||
Commit: 079606e237bb93f79b01ad33662526db791ad4e4
Author: Arnaud Lemercier <arnaud@wixiweb.fr> 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;