Published
Edited
Jan 6, 2021
Importers
6 stars
Insert cell
Insert cell
horizontalNav()
Insert cell
Insert cell
Insert cell
Insert cell
function horizontalNav(theme) {
theme = theme || {};
theme.backgroundColor = theme.backgroundColor || "#f3f3f3";
theme.border = theme.border || "1px solid #e7e7e7";
theme.textColor = theme.textColor || "#666";
theme.fontFamily = theme.fontFamily || "sans-serif";
theme.fontWeight = theme.fontWeight || 500;
theme.backgroundHover = theme.backgroundHover || "#e7e7e7";
theme.backgroundActive = theme.backgroundActive ||"#4CAF50";
theme.fontWeightActive = theme.fontWeightActive || 700;
theme.textColorActive = theme.textColorActive || "white";
theme.fontSize = theme.fontSize || "14px";
let nav = `
<style>
html {
--menu-spacing: 5px;
}
@media (min-width: 500px) {
html {
--menu-spacing: 15px;
}
}

ul#navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: ${theme.backgroundColor};
border: ${theme.border};
max-width: 100%;
font-weight: ${theme.fontWeight};
}

ul#navigation > li {
float: left;
}

ul#navigation li a {
display: block;
color: ${theme.textColor};
text-align: center;
padding: 8px var(--menu-spacing);
text-decoration: none;
font-family: ${theme.fontFamily};
font-size: ${theme.fontSize};
border-right: ${theme.border};
}

ul#navigation > li:last-child {
border-right: none;
}

ul#navigation > li.highlight a,
ul#navigation > li.highlight a:hover {
background-color: ${theme.backgroundActive};
font-weight: ${theme.fontWeightActive};
color: ${theme.textColorActive};
}

/* Change the link color on hover */
ul#navigation > li a:hover {
background-color: ${theme.backgroundHover};
}

</style>
`
nav += `<ul id="navigation">`;
links.map((d,i) => {
if (d.href == document.baseURI) {
nav += `
<li class="highlight" ${d.style? ' style="'+ d.style + '"' : ""}><a href=${d.href}>${d.title}</a></li>`;
} else {
nav += `
<li${d.style? ' style="'+ d.style + '"' : ""}><a href=${d.href}>${d.title}</a></li>`;
}
})
nav += "</ul>"
return html`${nav}`

}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more