JavaScript Masthead-nav-dropdown Template for Spotfire

Introduction

This template supports the following components:

• masthead-title 
• masthead-nav with active page indicator
• masthead-options

html

<DIV id="masthead" style="FONT-SIZE: 25px; BACKGROUND: #3498db; COLOR: white"></DIV> 

<div id="masthead-logo" >
   replace with logo
</div>

<h1 id="masthead-title" >JavaScript Masthead nav-dropdown for Spotfire</h1>


<div id="masthead-nav" >
	<a>page 1</a>
	<a>page 2***</a>
	<a>page 3</a>
</div>

<div id="masthead-nav-icons" hidden>coffee,globe,grid,cpu</div>


<div id="masthead-options" >
	<a>option 1</a>
	<a>option 2</a>
	<a>option 3</a>
</div>

mashtead-nav-dropdown.js

var masthead = document.getElementById("masthead")

html = `

<nav>
  <ul id="header">
    <span id="brand" ><li class="masthead-title"></li></span> 
    <label id="trigger2" for="x7">   ▼</label>
  </ul>

  <input type="checkbox" id="x7" />

  <ul id="main" class="masthead-nav">
        <span id="trigger" style="width:150px"><li class="x1">Options<span id="caret"></span></li></span>
    <ul id="dropdown" class="masthead-options"></ul>
  </ul>
</nav>



<style>

nav {
  position: absolute;
  z-index:20;
  width: 100%;
}ho

nav #brand li:hover{ background:none;}

nav #header {
  left: 0;
  float: left;
  width: auto;
  z-index: 10;
}

nav #caret {
  display: inline-block;
  height: 12px;
  width:  12px;
  border-left: 3px solid ${masthead.style.color};
  border-bottom: 3px solid ${masthead.style.color};
  transform: rotate(-45deg) translateY(-4px);
  margin-left:15px;
}

nav li, #trigger2, #trigger {
  display: inline-block;
  padding: 13px;
  color: ${masthead.style.color};		/*◄ color*/
}
nav ul {
  margin-top: 0;
  position: absolute;
  top: 0;
  background: ${masthead.style.background};		/*◄ background #496E91*/
  display: block;
  width: 100%;
  height: 50px;
  text-align: right;
  padding-left: 0;
}

li:hover { background: ${window.getComputedStyle(masthead).getPropertyValue("color").replace(")",",.2)").replace("rgb","rgba")}} 

nav #dropdown {
    height: 0;
    overflow: hidden;
    width: auto;
    right: 11px;
    transition: 0.4s;
    z-index: 20;
    position: fixed;
    top: 93px;
} 

nav #dropdown li {
  display: block;
  padding: 13px;
  text-align: left;
}


nav .x1 a, nav #dropdown a  {
  text-decoration: none !important;
  color:${masthead.style.color} !important;
  padding:11px 0 !important;
}

nav #trigger li:hover {
    background: none;
}

nav #dropdown li:first-child{
	border-top:1px solid ${masthead.style.color};
}

nav #trigger:hover + #dropdown, nav #dropdown:hover {
  height: auto; 		
}

nav .x1 {
  position: relative;
  top: -15px;
}
nav .x1.active{
	background:${window.getComputedStyle(masthead).getPropertyValue("color").replace(")",",.2)").replace("rgb","rgba")} !important;
	color:${masthead.style.color} !important;
	height:26px;
    box-shadow: inset black 0px 6px 6px 0px;
}
.x1.active a {
	background:none !important;
	color:${masthead.style.color} !important;
}



nav #trigger2 {
  display: none !important;
}
nav #x7 {
  left: 999999px;
  
}

@media (max-width: 627px) {
nav #header {
    width: 100%;
    position: fixed;
    top: 36px;
    width: 85%;
    padding: -11px;
    margin-left: 59px !important;
}

nav .x1{
    top: 30px;
  }

  nav #brand {
    position: absolute;
    top: 0;
    left: 0;
  }

 nav #main {
    overflow: hidden;
    z-index: 0;
    width: 85%;
    top: 36px;
    text-align: left;
    position: fixed;
 }

  nav #main li, nav #trigger {
    display: block;
  }
  nav #trigger2 {
    display: inline-block !important;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    margin: 0 ;
  }

  nav #x7:checked + #main {
    height: auto;
    margin: 22px 0;
  }

  nav #dropdown {
    position: initial;
    margin: 17px 0;
  }
}

.masthead-options {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.DropdownListContainer{
    z-index:999;
}

</style>`


masthead.innerHTML = html


//move elements function
function moveElement(from,to){
	if(to!=undefined){
				
	if (from.id == "masthead-nav") [...document.querySelectorAll("#masthead-nav a")].reverse().forEach(x=>{	
		li = document.createElement("li");
		li.className="x1";
		if(x.innerText.endsWith("***")) {
			li.className="x1 active"
			x.innerText = x.innerText.replace("***","")
		}
		li.append(x);document.querySelector(".masthead-nav").prepend(li)
	})
	if (from.id == "masthead-options") [...document.querySelectorAll("#masthead-options a")].forEach(x=>{
		li = document.createElement("li");
		li.style.textAlign="left";
		li.append(x);
		document.querySelector(".masthead-options").append(li)});
		to.append(...from.childNodes);	
	}
	from.remove()
	if (!to) console.log(`⚠️ class ".${from.id}" does not exists on template!`)
}


//move elements
var imports = "nav,nav-icons,title,logo,options,filters";  			
imports = imports.split(",").map(x=>{return "#masthead-"+x}).join(", "); 
[...document.querySelectorAll(imports)].forEach(e=>{t="."+e.id;moveElement(e,document.querySelector(t)) });

To make this script fixed at the top of the screen, try the JavaScript Fixed Masthead for Spotfire

◄ Back to JavaScript Masthead for Spotfire