Changed select box to CSS drop down

generate-html.py

@@ -17,7 +17,7 @@ if len(sys.argv) > 1:
 
 pinout.load(lang)
 
-overlays = [
+'''overlays = [
 	'ground',
 	'spi',
 	'uart',
@@ -34,7 +34,9 @@ overlays = [
 	'explorer-hat',
 	'display-o-tron',
 	'dots'
-]
+]'''
+
+overlays = pinout.settings['overlays']
 
 template = open('src/{}/template/layout.html'.format(lang)).read()
 
@@ -334,7 +336,7 @@ def render_nav(url, overlay=None):
 overlays = map(load_overlay,overlays)
 
 for url, name in select_overlays:
-	overlays_html += '<option value="{}">{}</option>'.format(url, name)
+	overlays_html += '<li><a href="{}{}">{}</a></li>'.format(base_url, url, name)
 
 
 '''

resources/pinout.css

@@ -13,6 +13,46 @@ table.pin-functions td {width:16.6666%;}
 
 h2 {font-size:18px;margin-top:20px;}
 
+.drop-down {
+	float: right;
+	display: block;
+	width: 250px;
+	border:2px solid #D6264E;
+	margin-left:20px;
+}
+.overlay {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display:none;
+	background:rgba(255,255,255,0.95);
+	padding:10px 0px;
+	clear:both;
+}
+.drop-down:hover .overlay {display:block;}
+.overlay-container span {
+	display:block;
+	float:left;
+}
+.overlay li {
+	display:block;
+	width:250px;
+}
+.overlay li:nth-child(odd) a {
+	background:rgba(214, 38, 78, 0.05);
+}
+.overlay li a, .drop-down span {
+	display:block;
+	font-size:14px;
+	line-height:28px;
+	color:#063541;
+	padding:0 10px;
+}
+.overlay li a:hover {
+	color:#FFFFFF;
+	background:#073642;
+}
+
 .main-nav {
 	position:absolute;
 	right:0px;
@@ -369,4 +409,4 @@ ol.linenums {margin-left:30px;}
 	#content {
 		width:700px;
 	}
-}
+}

src/en-GB/settings.json

@@ -1,5 +1,23 @@
 {
   "default_desc":"The comprehensive Raspberry Pi GPIO Pinout guide for the original Raspberry Pi, B+ and Pi 2",
   "default_title":"Raspberry Pi GPIO Pinout - Pi 1, B+, Pi 2",
-  "title_suffix":" at Raspberry Pi GPIO Pinout"
+  "title_suffix":" at Raspberry Pi GPIO Pinout",
+  "overlays": [
+        "ground",
+        "spi",
+        "uart",
+        "i2c",
+        "wiringpi",
+        "arduino-spi",
+        "rtk-000-001",
+        "piborg-ledborg",
+        "piglow",
+        "pibrella",
+        "unicorn-hat",
+        "skywriter-hat",
+        "explorer-hat-pro",
+        "explorer-hat",
+        "display-o-tron",
+        "dots"
+]
 }

src/en-GB/template/layout.html

@@ -29,10 +29,12 @@
 			<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/pinout"><img src="{{resource_url}}pinout-logo.png" style="top:8px;" /><span>Raspberry Pi</span>n<span class="out">out</span></a></h1>
 			<div class="overlay-container">
 				<span>Learn about Pi add-ons and pin functions <i class="fa fa-arrow-right"></i></span>
-				<select class="overlay">
-					<option value="">&hellip;</option>
-					{{overlays}}
-				</select>
+				<div class="drop-down">
+					<span>Select&hellip;</span>
+					<ul class="overlay">
+						{{overlays}}
+					</ul>
+				</div>
 			</div>
 			<nav id="gpio">
 				<div id="pinbase"></div>