Fix navbar-menu in mobile without JavaScript

The problem is that Bulma doesn't offer the same basic functionality
without JavaScript. Namely, if you don't have JavaScript enabled,
you cannot access the navbar menu nor toggle the navigation menu
in mobile or low-resolution devices. However, it's possible to offer
this features without JavaScritp.

Unlike the JavaScript version, the version without JavaScript doesn't
have an animation when you toggle the navigation menu.
It's impossible to change the value of the attribute aria-expanded
(which should change to true when the menu is shown), so it must be
removed.
Furthermore, maybe it's not enough to use the pseudoelement :hover

Obviously, the ones who disable JavaScript will have less features,
but the website will be usable.

5 files changed, 62 insertions, 48 deletions

diff --git a/about.html b/about.html
index 84e9f30..c9b5d51 100644
--- a/about.html
+++ b/about.html
@@ -16,32 +16,30 @@
             <nav class="navbar">
 	        <div class="container">
 	            <!-- nav site title -->
+                    <!-- Input for menu-mobile with checkbox-->
+                    <input id="navbar-toggle-cbox" role="button" type="checkbox">
+                    <!-- End Input for menu-mobile with checkbox-->
                     <div class="navbar-brand">
                         <a class="navbar-item">
                             <h3 class="title is-3" style="color: white;">CL</h3>
                         </a>
                         <!-- this "navbar-burger" hamburger menu is only visible on mobile -->
-                        <span class="navbar-burger" data-target="navMenu">
+                        <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
                             <span></span>
                             <span></span>
                             <span></span>
-                        </span>
+                        </label>
                         <!-- end of burger -->
                     </div>
 
 	            <!-- this "nav-menu" is hidden on mobile -->
                     <div id="navMenu" class="navbar-menu">
-                        <div class="navbar-end">
-                            <a href="index.html" class="navbar-item is-tab">Home</a>
-                            <a href="post.html" class="navbar-item is-tab">Static Post</a>
-                            <a href="about.html" class="navbar-item is-tab is-active">About</a>
-                            <a href="contact.html" class="navbar-item is-tab">Contact</a>
-                            <a class="navbar-item">
-	                        <span class="icon">
-		                    <i class="fa fa-search"></i>
-	                        </span>
-	                    </a>
-                        </div>
+                        <ul class="navbar-end">
+                            <li><a href="index.html" class="navbar-item is-tab">Home</a></li>
+                            <li><a href="post.html" class="navbar-item is-tab">Static Post</a></li>
+                            <li><a href="about.html" class="navbar-item is-tab is-active">About</a></li>
+                            <li><a href="contact.html" class="navbar-item is-tab">Contact</a></li>
+                        </ul>
                     </div>
 	            <!-- end of nav -->
 	        </div>
diff --git a/contact.html b/contact.html
index 68622f4..117410e 100644
--- a/contact.html
+++ b/contact.html
@@ -16,32 +16,30 @@
             <nav class="navbar">
 	        <div class="container">
 	            <!-- nav site title -->
+                    <!-- Input for menu-mobile with checkbox-->
+                    <input id="navbar-toggle-cbox" role="button" type="checkbox">
+                    <!-- End Input for menu-mobile with checkbox-->
                     <div class="navbar-brand">
                         <a class="navbar-item">
                             <h3 class="title is-3" style="color: white;">CL</h3>
                         </a>
                         <!-- this "navbar-burger" hamburger menu is only visible on mobile -->
-                        <span class="navbar-burger" data-target="navMenu">
+                        <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
                             <span></span>
                             <span></span>
                             <span></span>
-                        </span>
+                        </label>
                         <!-- end of burger -->
                     </div>
 
 	            <!-- this "nav-menu" is hidden on mobile -->
                     <div id="navMenu" class="navbar-menu">
-                        <div class="navbar-end">
-                            <a href="index.html" class="navbar-item is-tab">Home</a>
-                            <a href="post.html" class="navbar-item is-tab">Static Post</a>
-                            <a href="about.html" class="navbar-item is-tab">About</a>
-                            <a href="contact.html" class="navbar-item is-tab is-active">Contact</a>
-                            <a class="navbar-item">
-	                        <span class="icon">
-		                    <i class="fa fa-search"></i>
-	                        </span>
-	                    </a>
-                        </div>
+                        <ul class="navbar-end">
+                            <li><a href="index.html" class="navbar-item is-tab">Home</a></li>
+                            <li><a href="post.html" class="navbar-item is-tab">Static Post</a></li>
+                            <li><a href="about.html" class="navbar-item is-tab">About</a></li>
+                            <li><a href="contact.html" class="navbar-item is-tab is-active">Contact</a></li>
+                        </ul>
                     </div>
 	            <!-- end of nav -->
 	        </div>
diff --git a/css/style.css b/css/style.css
index 7825122..753d625 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,6 +5,22 @@ Author: jesus e.
 */
 
 /* basic formatting changes (mostly to cater for darker colours) */
+
+/* ------------- Menu Mobile sin JS ---------------- */
+/* input hidden */
+#navbar-toggle-cbox {
+    display: none;
+}
+
+label[for=navbar-toggle-cbox] {
+    cursor: pointer;
+}
+
+#navbar-toggle-cbox:checked ~ .navbar-menu {
+    display: block;
+}
+/*- ----------- End Menu Mobile sin JS ------------- */
+
 code {
     background-color: #282828;
     color: #73d1ed;
diff --git a/index.html b/index.html
index 23895bd..6812fff 100644
--- a/index.html
+++ b/index.html
@@ -18,28 +18,32 @@
         <div class="navigation">
             <nav class="navbar">
 	        <div class="container">
-	            <!-- nav site title -->
+                    <!-- nav site title -->
+                    <!-- Input for menu-mobile with checkbox-->
+                    <input id="navbar-toggle-cbox" role="button" type="checkbox">
+                    <!-- End Input for menu-mobile with checkbox-->
                     <div class="navbar-brand">
                         <a class="navbar-item">
                             <h3 class="title is-3" style="color: white;">CL</h3>
                         </a>
                         <!-- this "navbar-burger" hamburger menu is only visible on mobile -->
-                        <span class="navbar-burger" data-target="navMenu">
+                        <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
                             <span></span>
                             <span></span>
                             <span></span>
-                        </span>
+                        </label>
+
                         <!-- end of burger -->
                     </div>
 
 	            <!-- this "navbar-menu" is hidden on mobile -->
                     <div id="navMenu" class="navbar-menu">
-                        <div class="navbar-end">
-                            <a href="index.html" class="navbar-item is-tab is-active">Home</a>
-                            <a href="post.html" class="navbar-item is-tab">Static Post</a>
-                            <a href="about.html" class="navbar-item is-tab">About</a>
-                            <a href="contact.html" class="navbar-item is-tab">Contact</a>
-                        </div>
+                        <ul class="navbar-end">
+                            <li><a href="index.html" class="navbar-item is-tab is-active">Home</a></li>
+                            <li><a href="post.html" class="navbar-item is-tab">Static Post</a></li>
+                            <li><a href="about.html" class="navbar-item is-tab">About</a></li>
+                            <li><a href="contact.html" class="navbar-item is-tab">Contact</a></li>
+                        </ul>
                     </div>
 	            <!-- end of nav -->
 	        </div>
diff --git a/post.html b/post.html
index 3a6b5d3..f16aa42 100644
--- a/post.html
+++ b/post.html
@@ -19,32 +19,30 @@
             <nav class="navbar">
 	        <div class="container">
 	            <!-- nav site title -->
+                    <!-- Input for menu-mobile with checkbox-->
+                    <input id="navbar-toggle-cbox" role="button" type="checkbox">
+                    <!-- End Input for menu-mobile with checkbox-->
                     <div class="navbar-brand">
                         <a class="navbar-item">
                             <h3 class="title is-3" style="color: white;">CL</h3>
                         </a>
                         <!-- this "navbar-burger" hamburger menu is only visible on mobile -->
-                        <span class="navbar-burger" data-target="navMenu">
+                        <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
                             <span></span>
                             <span></span>
                             <span></span>
-                        </span>
+                        </label>
                         <!-- end of burger -->
                     </div>
 
 	            <!-- this "navbar-menu" is hidden on mobile -->
                     <div id="navMenu" class="navbar-menu">
-                        <div class="navbar-end">
-                            <a href="index.html" class="navbar-item is-tab">Home</a>
-                            <a href="post.html" class="navbar-item is-tab is-active">Static Post</a>
-                            <a href="about.html" class="navbar-item is-tab">About</a>
-                            <a href="contact.html" class="navbar-item is-tab">Contact</a>
-                            <a class="navbar-item">
-	                        <span class="icon">
-		                    <i class="fa fa-search"></i>
-	                        </span>
-	                    </a>
-                        </div>
+                        <ul class="navbar-end">
+                            <li><a href="index.html" class="navbar-item is-tab">Home</a></li>
+                            <li><a href="post.html" class="navbar-item is-tab is-active">Static Post</a></li>
+                            <li><a href="about.html" class="navbar-item is-tab">About</a></li>
+                            <li><a href="contact.html" class="navbar-item is-tab">Contact</a></li>
+                        </ul>
                     </div>
 	            <!-- end of nav -->
 	        </div>