Commit for Adding Drop Down menu & mobile bug fix

vcm/index.html

@@ -139,6 +139,79 @@
         font-size: .9rem;
         margin: 20px 10px 0 0;
         display: inline-block;
+    }
+/* Css code for Dropdown Menu */
+    /* The container <div> - needed to position the dropdown content */ 
+        .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+
+    /* The dropdown container <div> - needed to hold the content inside dropdown */ 
+    .dropdown-content {
+        right: -20px;
+        display: none;
+        position: absolute;
+        min-width: 150px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        z-index: 1;
+    }
+
+    /* Accordion as a button to add expandible and collapsible menu items */
+    .accordion {
+        border: solid white;
+        border-width: thin;
+        display: block;  
+        background-color:dimgray;
+        color: white;
+        cursor: pointer;
+        padding: 11px;
+        width: 100%;
+        text-align: left;
+        outline: none;
+        font-size: 15px;
+        transition: 0.4s;
+    }
+
+    /* Sub menu items inside the accordion */
+    .sub-menu {
+        line-height: 35px;
+        padding: 0px 20px;
+        background-color: dimgray;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.2s ease-out;
+    }
+
+    /* Styling for text of submenu */
+    .sub-menu a{
+        text-decoration: none;
+        color: aliceblue;
+        cursor: pointer;
+        outline: none;
+        font-size: 15px;
+    }
+
+    .active, .accordion:hover {
+        background-color: darkgray;
+    }
+
+    /* Changing of + and - on menu expand and collapse respectively*/
+    .accordion:after {
+        content: '\002B';
+        color:black;
+        font-weight: bold;
+        float: right;
+        margin-left: 5px;
+    }
+
+    .active:after {
+        content: "\2212";
+    }
+
+    /* Show the dropdown menu on hover */
+    .dropdown:hover .dropdown-content {
+        display: block;
     }	 
 	 </style>
 	
@@ -159,6 +232,25 @@
               <div class="company-logo"></div>
           </div>
           <div class="title-box vcm_copyright_headerTitle"></div>
+                    <!-- Drop down menu starts here -->
+                    <div class="dropdown hidden" style="float: right; right:20px">
+                        <i class="fa fa-bars" style="font-size:1.8rem;color: antiquewhite;"></i>
+                            <div class="dropdown-content">
+                                <button class="accordion">Menu 1</button>
+                                    <div class="sub-menu">
+                                        <a href="#">Sub Menu 1</a>           
+                                    </div>
+                                <button class="accordion">Menu 2</button>
+                                    <div class="sub-menu">
+                                        <a href="#">Sub Menu 2</a>
+                                    </div>
+                                <button class="accordion">Menu 3</button>
+                                    <div class="sub-menu">
+                                        <a href="#">Sub Menu 3</a>
+                                    </div>
+                            </div>
+                      </div>
+                    <!-- Drop down menu ends here -->            
            <div class="tool-box" style="cursor:pointer"></div> 
       </div>
   </header>
@@ -550,5 +642,22 @@
                   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                   crossorigin="anonymous"></script>
     <script src="templates/story/virtualcitystory.js"></script>
+        <!--Start: Javascript code to handle expand and collapse functionality of dropdown menu -->
+        <script>
+            var acc = document.getElementsByClassName("accordion");
+            var i; 
+            for (i = 0; i < acc.length; i++) {
+              acc[i].addEventListener("click", function() {
+                this.classList.toggle("active");
+                var subMenu = this.nextElementSibling;
+                if (subMenu.style.maxHeight) {
+                    subMenu.style.maxHeight = null;
+                } else {
+                    subMenu.style.maxHeight = subMenu.scrollHeight + "px";
+                } 
+              });
+            }
+            </script>
+        <!--End: Javascript code to handle expand and collapse functionality of dropdown menu -->    
   </body>
 </html>

vcm/templates/story/story.css

@@ -130,7 +130,8 @@ div.title-fill {
     top: 100%;
 }
 .vcs_map_container{
-    bottom: 50%;
+    /* Removing bottom white portion appearing for mobile view which was hiding the 50% of the map */
+    /* bottom: 50%; */  
 }
 
 

vcm/templates/story/virtualcitystory.js

@@ -469,8 +469,9 @@ var showMap = function() {
     $("#story-frame").addClass("tour-inactive");
     $("#widget-box").removeClass("hidden");
     $(".mapControls").removeClass("hidden");
-    $(".tool-box").addClass("hidden");
-    $(".tour-header").addClass("hidden");
+    // $(".tool-box").addClass("hidden");  //Commenting tool-box and tool-header to hide the vcm header to avoid menu from getting overrided behind header
+    //$(".tour-header").addClass("hidden");
+    $(".dropdown").removeClass("hidden");
     setMapMovement(true);
 };
 
@@ -479,8 +480,8 @@ var showTour = function() {
     $("#story-frame").removeClass("tour-inactive");
     $("#widget-box").addClass("hidden");
     $(".mapControls").addClass("hidden");
-    $(".tool-box").addClass("hidden");
-    $(".tour-header").removeClass("hidden");
+    //$(".tool-box").addClass("hidden");
+    //$(".tour-header").removeClass("hidden");
     if(disableMovement) {
         setMapMovement(false);
     }