Added header bar

prbc · Jan 27, 2016 · 2320d9c · 2320d9c
1 parent 70be20c
commit 2320d9c
Show file tree

Hide file tree

Showing 4 changed files with 259 additions and 5 deletions.
diff --git a/additional.css b/additional.css
@@ -4,4 +4,8 @@
 
 .mapboxgl-popup-content h2 {
     text-align: center;
-}
+}
+
+.tabs-to-dropdown {
+    font-family: Roboto, Arial, sans-serif;
+}
diff --git a/index.html b/index.html
@@ -3,20 +3,38 @@
 <head>
     <meta charset='utf-8' />
     <title>Reformed Baptist Church Directory</title>
-    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.js'></script>
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.css' rel='stylesheet' />
     <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.0.0/mapbox-gl-geocoder.js'></script>
     <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v0.0.0/mapbox-gl-geocoder.css' type='text/css' />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <style>
         body { margin:0; padding:0; }
-        #map { position:absolute; top:0; bottom:0; width:100%; }
+        #map { position:absolute; top:50px; bottom:0; width:100%; }
     </style>
     <link rel="stylesheet" type="text/css" href="additional.css">
+    <link rel="stylesheet" href="tabs-to-dropdown.css">
+    <script src="tabs-to-dropdown.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
 <body>
 
+        <header class="tabs-to-dropdown">
+            <nav class="tab-bar">
+                <ul>
+                    <li class="active"><a href="#"><span class="fa fa-home"></span></a></li>
+                    <li><a href="index.html">Map</a></li>
+                    <li><a href="#0">Directory</a></li>
+                    <li><a href="#0">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="dropdown">
+                <button class="dropdown-toggle">...<span class="fa fa-angle-down"></span></button>
+                <ul></ul>
+            </div>
+        </header>
+
 <style>
     .mapboxgl-popup {
         max-width: 400px;
@@ -95,10 +113,10 @@
       });
    });
 
-   // Add zoom and rotation controls to the map.
-   map.addControl(new mapboxgl.Navigation({position: 'top-left'}));
 }
 
+// Add zoom and rotation controls to the map.
+map.addControl(new mapboxgl.Navigation({position: 'top-left'}));
 
 // Load GeoJSON data
 

diff --git a/tabs-to-dropdown.css b/tabs-to-dropdown.css
@@ -0,0 +1,187 @@
+.tabs-to-dropdown a,
+.tabs-to-dropdown button,
+.tabs-to-dropdown input[type=button] {
+    text-decoration:none;
+    -webkit-tap-highlight-color:transparent;
+    tap-highlight-color:transparent;
+    -ms-touch-action:manipulation;
+    touch-action:manipulation;
+}
+
+/* Tabs bar */
+.tabs-to-dropdown {
+    background:rgb(45, 62, 80);
+    position:relative;
+    z-index:9999;
+}
+.tabs-to-dropdown::after {
+    display:block;
+    content:"";
+    width:76px;
+    position:absolute;
+    right:0;bottom:0;top:0;
+    background:-moz-linear-gradient(left, rgba(45,62,80,0) 0%, rgba(45,62,80,1) 28%, rgba(45,62,80,1) 100%);
+    background:-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(45,62,80,0)), color-stop(28%,rgba(45,62,80,1)), color-stop(100%,rgba(45,62,80,1)));
+    background:-webkit-linear-gradient(left, rgba(45,62,80,0) 0%,rgba(45,62,80,1) 28%,rgba(45,62,80,1) 100%);
+    background:-o-linear-gradient(left, rgba(45,62,80,0) 0%,rgba(45,62,80,1) 28%,rgba(45,62,80,1) 100%);
+    background:-ms-linear-gradient(left, rgba(45,62,80,0) 0%,rgba(45,62,80,1) 28%,rgba(45,62,80,1) 100%);
+    background:linear-gradient(to right, rgba(45,62,80,0) 0%,rgba(45,62,80,1) 28%,rgba(45,62,80,1) 100%);
+}
+.tabs-to-dropdown>.tab-bar {
+    overflow:hidden;
+    margin-right:46px;
+    position:relative;
+}
+.tabs-to-dropdown>.tab-bar>ul {
+    width:99999px;
+    margin:0;padding:0;
+    list-style:none;
+}
+.tabs-to-dropdown>.tab-bar>ul::after{
+    display:table;
+    content:"";
+    clear:both;
+}
+.tabs-to-dropdown>.tab-bar>ul>li {
+    display:inline-block;
+    float:left;
+    opacity:1;visibility:visible;
+}
+.tabs-to-dropdown>.tab-bar>ul>li.ttd-hide{
+    opacity:0;visibility:hidden;
+}
+.tabs-to-dropdown>.tab-bar>ul>li>a {
+    display:inline-block;
+    color:rgba(255,255,255,1);
+    font-size:14px;  /* Changed from 16px to 14 px */
+    /* text-transform:uppercase; */
+    padding:0 15px; /* Changed from 20px to 15px */
+    line-height:50px; /* Changed from 90px to 50 px */
+}
+.tabs-to-dropdown>.tab-bar>ul>li>a:hover { color:rgb(25, 189, 155); }
+.tabs-to-dropdown>.tab-bar>ul>li>a:active { color:rgba(25, 189, 155,.65); }
+
+/* Home button */
+.tabs-to-dropdown>.tab-bar>ul>li>a>.fa {
+    font-size:24px; /* Changed from 34px to 24px */
+    padding:0 0; /* Changed from 9px to 0 */
+}
+
+/* Active */
+.tabs-to-dropdown>.tab-bar>ul>li.active { background:rgb(25, 189, 155); }
+.tabs-to-dropdown>.tab-bar>ul>li.active:hover { opacity:.85; }
+.tabs-to-dropdown>.tab-bar>ul>li.active:active { opacity:.7; }
+.tabs-to-dropdown>.tab-bar>ul>li.active>a { color:rgba(255,255,255,1); }
+
+/* Dropdown */
+.tabs-to-dropdown>.dropdown>button.dropdown-toggle {
+    border:0;outline:0;box-shadow:none;
+    display:inline-block;
+    line-height:50px; /* Changed from 90px to 50px */
+    background:none;
+    color:rgba(255,255,255,1);
+    font-size:25px;
+    padding:0 20px; margin:0;
+    position:absolute;
+    top:0;right:0;
+    z-index:2;
+    cursor:pointer!important;
+    opacity:0;visibility:hidden;
+}
+.tabs-to-dropdown>.dropdown.ttd-show>button.dropdown-toggle { opacity:1;visibility:visible; }
+.tabs-to-dropdown>.dropdown>button.dropdown-toggle:hover { color:rgb(25, 189, 155); }
+
+.tabs-to-dropdown>.dropdown>button.dropdown-toggle:active,
+.tabs-to-dropdown>.dropdown.ttd-open>button.dropdown-toggle { color:rgba(25, 189, 155,.65); }
+
+.tabs-to-dropdown>.dropdown>ul {
+    list-style:none;
+    margin:0;padding:0;
+    position:absolute;
+    z-index:1;
+    top:60px;right:0;
+    max-width:300px;
+    background:rgba(45, 62, 80,.8);
+    opacity:0;visibility:hidden;
+}
+.tabs-to-dropdown>.dropdown.ttd-open>ul {
+    opacity:1;visibility:visible;
+    top:50px; /* Changed from 90px to 50px */
+}
+.tabs-to-dropdown>.dropdown>ul>li {
+    margin:0;padding:0;
+    opacity:0;visibility:hidden;
+    max-height:0;
+}
+.tabs-to-dropdown>.dropdown.ttd-open>ul>li.ttd-show{
+    opacity:1;visibility:visible;
+    max-height:50px;
+}
+.tabs-to-dropdown>.dropdown>ul>li>a {
+    display:block;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    color:rgba(255,255,255,1);
+    padding:15px 15px;
+    /* text-transform:uppercase; */
+    font-size:14px;
+    line-height:18px;
+}
+.tabs-to-dropdown>.dropdown.ttd-open>ul>li>a:hover { background:rgb(25, 189, 155); }
+.tabs-to-dropdown>.dropdown.ttd-open>ul>li>a:active { background:rgba(25, 189, 155,.65);}
+
+/* Media Queries */
+@media all and (max-width:699px) {
+    /* Tabs bar */
+    .tabs-to-dropdown>.tab-bar { margin-right:37px; }
+    .tabs-to-dropdown::after { width:37px; } /* Changed from 55px to 37 px */
+    .tabs-to-dropdown>.tab-bar>ul>li>a {
+        font-size:14px;
+        padding:0 15px;
+        line-height:50px;
+    }
+    .tabs-to-dropdown>.tab-bar>ul>li>a>.fa {
+        font-size:24px;
+        padding:0;
+    }
+    /* Dropdown */
+    .tabs-to-dropdown>.dropdown>button.dropdown-toggle {
+        line-height:50px;
+        font-size:21px;
+        padding:0 10px;
+    }
+    .tabs-to-dropdown>.dropdown>ul { top:30px }
+    .tabs-to-dropdown>.dropdown.ttd-open>ul { top:50px; }
+    .tabs-to-dropdown>.dropdown>ul>li>a {
+        padding:10px;
+        font-size:12px;
+        line-height:16px;
+    }
+}
+
+/* Transition */
+.tabs-to-dropdown>.tab-bar>ul>li,
+.tabs-to-dropdown>.tab-bar>ul>li>a,
+.tabs-to-dropdown>.tab-bar>ul>li>a>.fa,
+.tabs-to-dropdown>.dropdown>button.dropdown-toggle,
+.tabs-to-dropdown>.dropdown,
+.tabs-to-dropdown>.dropdown>ul,
+.tabs-to-dropdown>.dropdown>ul>li,
+.tabs-to-dropdown>.dropdown>ul>li>a {
+    -webkit-transition:all .2s ease;
+    -moz-transition:all .2s ease;
+    -ms-transition:all .2s ease;
+    -o-transition:all .2s ease;
+    transition:all .2s ease;
+}
+.tabs-to-dropdown>.tab-bar>ul>li.active:active,
+.tabs-to-dropdown a:active,
+.tabs-to-dropdown button:active,
+.tabs-to-dropdown input[type=button] {
+    -webkit-transition:none!important;
+    -moz-transition:none!important;
+    -ms-transition:none!important;
+    -o-transition:all 0 ease!important;
+    transition:none!important;
+}
diff --git a/tabs-to-dropdown.js b/tabs-to-dropdown.js
@@ -0,0 +1,45 @@
+$(function() {
+    $(".tabs-to-dropdown").each(function() {
+        var resizeTimeout   = 20;
+
+        var tabBar          = $(this).children(".tab-bar");
+        var tabList         = tabBar.children("ul");
+        var tabListItem     = tabList.children("li");
+
+        var dropdown        = $(this).children(".dropdown");
+        var dropdownToggle  = dropdown.children(".dropdown-toggle");
+        var dropdownList    = dropdown.children("ul");
+
+        var clickHandler = ("ontouchstart" in document.documentElement ? "touchstart": "click");
+
+        var tabsToDropdown  = function() {
+            var tabBarWidth = tabBar.width();
+            tabListItem.each(function(index) {
+                var dropdownListItem  = dropdownList.children("li").eq(index);
+                var tabListItemOffset = $(this).position().left + $(this).outerWidth();
+
+                if (tabListItemOffset >= tabBarWidth) {
+                    $(this).addClass("ttd-hide"); dropdownListItem.addClass("ttd-show");
+                } else {
+                    $(this).removeClass("ttd-hide"); dropdownListItem.removeClass("ttd-show");
+                }
+            });
+
+            tabList.children(".ttd-hide").length > 0 ? dropdown.addClass("ttd-show"): dropdown.removeClass("ttd-show");
+        };
+
+        tabListItem.clone().appendTo(dropdownList);
+
+        tabsToDropdown();
+        $(window).bind("resize", function(){
+            if(typeof sizeWait != "undefined") { clearTimeout(sizeWait); }
+            sizeWait = setTimeout(function(){
+                tabsToDropdown();
+            },resizeTimeout);
+        });
+
+        dropdown.bind(clickHandler, function(e) { e.stopPropagation(); });
+        $(document).bind(clickHandler, function() { dropdown.removeClass("ttd-open"); });
+        dropdownToggle.bind(clickHandler, function(e) { dropdown.toggleClass("ttd-open"); e.stopPropagation(); });
+    });
+});