Browse code

Modify languag switch to use css only

hiromipaw authored on17/11/2017 12:23:40
Showing4 changed files
... ...
@@ -392,3 +392,4 @@ select#lang {
392 392
 }
393 393
 
394 394
 #footer .first { margin-right: 30px; }
395
+
... ...
@@ -1309,3 +1309,50 @@ p.blogDate {
1309 1309
 .joblink a {
1310 1310
   text-decoration: none;
1311 1311
 }
1312
+
1313
+/* Style The Dropdown Button */
1314
+.dropbtn {
1315
+    background-color: #4CAF50;
1316
+    color: white;
1317
+    padding: 16px;
1318
+    font-size: 16px;
1319
+    border: none;
1320
+    cursor: pointer;
1321
+}
1322
+
1323
+/* The container <div> - needed to position the dropdown content */
1324
+.dropdown {
1325
+    position: relative;
1326
+    display: inline-block;
1327
+}
1328
+
1329
+/* Dropdown Content (Hidden by Default) */
1330
+.dropdown-content {
1331
+    display: none;
1332
+    position: absolute;
1333
+    background-color: #f9f9f9;
1334
+    min-width: 160px;
1335
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
1336
+    z-index: 1;
1337
+}
1338
+
1339
+/* Links inside the dropdown */
1340
+.dropdown-content a {
1341
+    color: black;
1342
+    padding: 12px 16px;
1343
+    text-decoration: none;
1344
+    display: block;
1345
+}
1346
+
1347
+/* Change color of dropdown links on hover */
1348
+.dropdown-content a:hover {background-color: #f1f1f1}
1349
+
1350
+/* Show the dropdown menu on hover */
1351
+.dropdown:hover .dropdown-content {
1352
+    display: block;
1353
+}
1354
+
1355
+/* Change the background color of the dropdown button when the dropdown content is shown */
1356
+.dropdown:hover .dropbtn {
1357
+    background-color: #3e8e41;
1358
+}
1312 1359
\ No newline at end of file
... ...
@@ -2,3 +2,4 @@
2 2
 @import "reset.min.css";
3 3
 @import "layout.min.css";
4 4
 @import "typography.min.css";
5
+
... ...
@@ -114,16 +114,18 @@ docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml),
114 114
               }
115 115
             }
116 116
         }:>
117
-     # LANGUAGE SWITCH CGI
117
+     # LANGUAGE SWITCH 
118 118
       <li>
119
+         <div class="dropdown">
120
+           <button class="dropbtn">Languages</button>
121
+           <div class="dropdown-content">
122
+            
119 123
          # this is a cgi trampoline to bounce us to the right page
120 124
          # alternately, if the client supports javascript we can redirect that way
121 125
          # noscript does not block onclick but clients may have disabled javascript completely
122 126
          #
123 127
          # for this to work we need to know the relative path from the document root
124 128
          # to the current directory that wml is in.
125
-         <form action="$(DOCROOT)/cgi-bin/languageswitch.cgi">
126
-           <select name="Language" id="lang">
127 129
            <:{
128 130
              #import "perl-globals.wmi";
129 131
              use Cwd;
... ...
@@ -137,17 +139,15 @@ docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml),
137 139
              while (my $file = readdir(DIR)) {
138 140
                  if (-d $file) {
139 141
                      if (-e "$file/$page") {
140
-                         my $url = $urlbase.'/'.$WML_SRC_BASENAME.'.html.'.$file;
141
-                         my $url2js = $WML_SRC_BASENAME.'.html.'.$file;
142
-                         print '<option value="'.$url.'" onclick="window.location=\''.$url2js.'\'">'.$LANGUAGES{$file}.'</option>'."\n" unless not defined $LANGUAGES{$file};
142
+                         my $url = $WML_SRC_BASENAME.'.html.'.$file;
143
+                         print '<a href="'.$url.'" >'.$LANGUAGES{$file}.'</a>'."\n" unless not defined $LANGUAGES{$file};
143 144
                      }
144 145
                  }
145 146
              }
146 147
              closedir(DIR);
147 148
            }:>
148
-           </select>
149
-           <input class="go" type="submit" name="submit" value="Go">
150
-         </form>
149
+            </div>
150
+         </div> 
151 151
        </li>
152 152
        #
153 153
       </ul>