Browse Source

change comboNav visibility and css class active to highlight selected item in the menu

Aymeric B 6 years ago
parent
commit
066be8e58f
4 changed files with 43 additions and 25 deletions
  1. 1 1
      site/css/lessframework.css
  2. 7 7
      site/css/style.css
  3. 10 16
      site/index.html
  4. 25 1
      site/script/main.js

+ 1 - 1
site/css/lessframework.css

@@ -275,7 +275,7 @@ px      68    160    252    */
 
 	/* home slider */
 	
-	#slider-holder{ padding-bottom: 22px;}
+	#slider-holder{ /*padding-bottom: 22px;*/ }
 	
 	.home-slider { 
 		width: 320px; 

+ 7 - 7
site/css/style.css

@@ -184,7 +184,6 @@ header #logo{
 
 #comboNav{
     width: 100%;
-    margin-top: 30px;
     margin-bottom: 20px;
     float: left;
 }
@@ -193,20 +192,20 @@ header #logo{
 
 /*** HS List ***/
 
-#hslist ul {
+#nav ul {
     list-style: none; /* No bullets */
     padding: 0;
     margin: 10px 0;
     text-align: center;
 }
 
-#hslist li {
+#nav li {
     display: inline; /* Horizontal list */
     margin: 0;
     padding: 0;
 }
 
-#hslist li a {
+#nav li a {
     color: #f1f1f1;
     display: inline-block;
     margin: 5px;
@@ -217,13 +216,14 @@ header #logo{
     box-shadow: 0 0 5px #111;
 }
 
-#hslist li a:hover {
+#nav li a:hover,
+#nav li a.active {
     color: #fee271;
     box-shadow: 0 0 5px #fee271;
 }
 
-#hslist li a:active {
-    box-shadow: inset 0 0 3px #111;
+#nav li a:active {
+    box-shadow: inset 0 0 3px #fee271;
 }
 
 

+ 10 - 16
site/index.html

@@ -113,20 +113,6 @@
         -->
         <!-- ends nav -->
 
-
-        <!-- comboNav -->
-        <select id="comboNav">
-            <option value="index.html" selected="selected">HOME</option>
-            <option value="blog.html">BLOG</option>
-            <option value="page.html">ABOUT</option>
-            <option value="page-elements.html">- Elements -</option>
-            <option value="page-icons.html">- Icons -</option>
-            <option value="page-typography.html">- Typography -</option>
-            <option value="portfolio.html">WORK</option>
-            <option value="http://luiszuno.com/blog/downloads/simpler-template">DOWNLOAD NOW</option>
-        </select>
-        <!-- comboNav -->
-
         <!-- map holder -->
         <div class="clearfix"></div>
         <div id="slider-holder" class="clearfix">
@@ -144,11 +130,16 @@
         <!-- ENDS map holder -->
 
         <!-- HS list -->
-        <nav id="hslist">
+        <nav id="nav">
             <ul></ul>
         </nav>
         <!-- END hs list -->
 
+        <!-- comboNav -->
+        <select id="comboNav">
+        </select>
+        <!-- comboNav -->
+
     </div>
 </header>
 
@@ -207,7 +198,10 @@
 
         <!-- bottom -->
         <div class="footer-bottom">
-            <div class="left">Created by <a href="http://www.fixme.ch" >FIXME.CH</a></div>
+            <div class="left">
+                Created by <a href="http://www.fixme.ch" >FIXME.CH</a> |
+                Based on Simpler template by <a href="http://www.luiszuno.com">luiszuno.com</a>
+            </div>
             <div class="right">
                 <ul id="social-bar">
                     <li><a href="https://github.com/fixme-lausanne/hackerspaces_ch"  title="Fork it on Github" class="poshytip"><img src="img/social/github-inverted.png"  alt="Github" /></a></li>

+ 25 - 1
site/script/main.js

@@ -108,6 +108,14 @@ function populateData(key, data){
         }
         dl.append(dd)
     });
+
+
+    // Update Nav
+    $('#nav a').removeClass('active');
+    $('#nav a[href="#'+ key +'"]').addClass('active');
+
+    // Update comboNav
+    $('#comboNav').val('#' + key);
 }
 
 function getStatus(url, marker) {
@@ -123,10 +131,12 @@ function getStatus(url, marker) {
 }
 
 function createMenu(data){
-    var menu = $('#hslist');
+    var menu = $('#nav');
+    var select = $('#comboNav');
     var ul = $('<ul>');
     menu.children().replaceWith(ul);
     $.each(data, function(k, v){
+        // Link menu
         var a = $('<a>');
         a.attr({'href': '#'+k})
         a.click(function(){
@@ -137,6 +147,20 @@ function createMenu(data){
         var li = $('<li>');
         li.append(a);
         ul.append(li);
+
+        // Option combo nav
+        var o = $('<option>');
+        o.attr({'value': '#'+k}).text(k);
+        o.click(function(){
+            populateData(k, v);
+            map.setCenter(getPosition(v), 13);
+        });
+        select.append(o);
+    });
+    select.change(function() {
+        var key = this.options[this.selectedIndex].value.split('#')[1];
+        populateData(key, data[key]);
+        map.setCenter(getPosition(data[key]), 13);
     });
 }