Skip to content

Instantly share code, notes, and snippets.

@TotallyInformation

TotallyInformation/index.html

Last active May 25, 2022 17:54
Show Gist options
  • Save TotallyInformation/c8754707d210554f1f3684f66c9b8129 to your computer and use it in GitHub Desktop.
Save TotallyInformation/c8754707d210554f1f3684f66c9b8129 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Web Component Test: nav-bar</title>
<script type="module" async >
import './nav-bar.js'
</script>
</head><body>
<nav-bar></nav-bar>
<h1>Demonstrating Web Components</h1>
<p>
This is some demo text.
</p>
</body></html>
Raw
nav-bar.js
// https://www.makeuseof.com/responsive-navigation-bar-using-html-and-css/
const myHtml = `
<style>
:host {
/* display: block; default is inline */
/* contain: content; performance boost */
box-sizing: border-box;
/* position: relative; */
width: 100%;
background-color: black;
color: white;
padding: 0;
margin: 0 0 0.8rem 0;
/* border: 2px solid silver; */
}
nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
overflow-x: auto;
background-color: black;
}
nav * {
/* display: block; */
margin: .1rem;
}
ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
position: relative;
}
li {
display: inline-block;
}
li:hover a {
color: white;
}
a {
text-decoration: none;
color: white;
}
ul ul {
display: none;
}
.site-menu {
order: 0;
flex: 1 1 auto;
align-self: auto;
}
.has-sub-menu:hover {
position: relative;
z-index: 10;
}
.has-sub-menu:hover ul {
/* display: initial; */
display: block;
background-color: blue;
position: absolute;
top: 1em;
left: 1em;
z-index: 20;
}
.has-sub-menu:hover ul li {
display: block;
z-index: 30;
}
</style>
<nav>
<ul class="site-menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="has-sub-menu">
<a href="/">Services</a>
<ul class="site-sub-menu">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li class="button"><a href="#">Log In</a></li>
<li class="button secondary"><a href="#">Sign Up</a></li>
</ul>
</nav>
`
const template = document.createElement('template')
template.innerHTML = myHtml
export default class NavBar extends HTMLElement {
constructor() {
super()
//this.attachShadow({ mode: 'open', delegatesFocus: true })
// .append(template.content.cloneNode(true))
// this.append(template.content.cloneNode(true))
//this.innerHtml = myHtml
} // ---- end of constructor ----
} // ---- end of Class ---- //
// Self-register the HTML tag
customElements.define('nav-bar', NavBar)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment