zGqvMr ('-' * 6)
A Pen by Stéphane Bachelier on CodePen.
<nav id="navigation" data-role="navigation"> | |
<ul> | |
<li><a href="#" class="link">HTML</a></li> | |
<li><a href="#" class="link">CSS</a></li> | |
<li><a href="#" class="link">Javascript</a></li> | |
</ul> | |
</nav> | |
<div id="#playground"> | |
<ul> | |
<li><button data-selector="#navigation">document.querySelector('#navigation')</button> | |
</ul> | |
</div> |
#navigation { | |
margin: 0 auto; | |
padding: 0.5em 0; | |
background-color: rgb(247, 26, 49); | |
text-align: center; | |
} | |
ul { | |
padding: 0; | |
list-style-type: none; | |
} | |
li { | |
display: inline; | |
margin-right: 2em; | |
} | |
a, a:visited, a:hover, a:active { | |
color: white; | |
text-decoration: none; | |
} | |
a:hover, a:active { | |
cursor: grab; | |
} |
zGqvMr ('-' * 6)
A Pen by Stéphane Bachelier on CodePen.