|
|
|
// 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) |
