Viewing Hamburger Integration: Menu + Icon

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Hamburger Integration: Menu + Icon



User: Les C. 10 years ago
I have a working hamburger icon and menu.

I found this link as that shows how to integrate the two: https://jsfiddle.net/my3qsbbv/12/

My code for an HTML snippet has the individual parts working—but not the integration.

Any suggestions?

It looks to me like the menu loads and unloads with the pressing of the hamburger icon (there is a 1px image/shadow shift to the right), but it's hard to tell because the menu is also fading in on load.

<style>

/* code for hamburger to interface with menu */

$(document).ready(function() {
$('#vertical-nav').click(function() {
if( $("#lines-button").css('display') == 'block') {
$('#lines-button').css('display', 'none');
} else {
$('#lines-button').css('display', 'block');

}

});
});

</style>

<div class="buttons-container">

<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus">
<span class="lines"></span>
</button>

</div>

<script>
var anchor = document.querySelectorAll('button');

[].forEach.call(anchor, function(anchor){
var open = false;
anchor.onclick = function(event){
event.preventDefault();
if(!open){
this.classList.add('close');
open = true;
}
else{
this.classList.remove('close');
open = false;
}
}
});
</script>

<style>

.buttons-container {
margin: 0px auto;
text-align: center;
}

button {
display: block;
margin: 0px;
border: none;
background: none;
}

button span {
display: block;
}

.grid-button {
padding: 1rem;
cursor: pointer;
user-select: none;
}

.grid-button .grid {
width: 0.5rem;
height: 0.5rem;
background: #ecf0f1;
color: #ecf0f1;
/* Not in use when the colors are specified below */
transition: 0.3s;
}

.grid-button.close .grid {
-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
}

.grid-button.rearrange .grid {
box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.rearrange.close .grid {
box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 1rem;
}

.grid-button.collapse .grid {
box-shadow: -0.625rem 0, -0.625rem 0.625rem, 0.625rem 0, 0.625rem -0.625rem, 0 -0.625rem, -0.625rem -0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.collapse.close .grid {
box-shadow: -0.5rem 0, 0 0 transparent, 0.5rem 0, 0 0 transparent, 0 -0.5rem, 0 0 transparent, 0 0.5rem, 0 0 transparent;
}

/* lines button */
.lines-button {
padding: 1rem 0.5rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.285715rem;
/* */
}
.lines-button:hover {
opacity: 1;
}
.lines-button:active {
transition: 0;
}

.lines {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: relative;
}
.lines:before, .lines:after {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.142855rem center;
transform-origin: 0.142855rem center;
}
.lines:before {
top: 0.5rem;
}
.lines:after {
top: -0.5rem;
}

.lines-button:hover .lines:before {
top: 0.57143rem;
}
.lines-button:hover .lines:after {
top: -.57143rem;
}

.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}

.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
top: 0;
width: 1.11111rem;
}

.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
-webkit-transform: none;
transform: none;
top: 0;
width: 2rem;
}

</style>


<nav id="vertical-nav">
<ul>

<li class="fadeIn-1"><a href="#">Page 1</a></li>

<li class="fadeIn-2"><a href="#"> Page 2</a></li>

<li class="fadeIn-3"><a href="#"> Page 3</a></li>

<li class="fadeIn-4"><a href="#"> Page 4</a></li>

<li class="fadeIn-5"><a href="#"> Page 5</a></li>

<li class="fadeIn-6"><a href="#">Page 6</a></li>

</ul>
</nav>

<style type="text/css">
#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0}

#vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden

-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
animation-delay: 9s;
}

#vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:0px solid #}

#vertical-nav ul li:last-child{border-bottom:0}/* border bottom removed on the last item */

#vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 10px;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent}

#vertical-nav ul li a:hover{color:#FF0000; padding: 4px 30PX}

#vertical-nav ul li a:hover:before{display:block;position:absolute;left:10px;top:8px;content:"";width:3px;height:9px;background:#FF0000}

-webkit-transition: {0.3s all;-moz-transition: 0.3s all;-o-transition: 0.3s all;transition: 0.3s all}

.fadeIn-1 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-2 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-3{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-4{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-5{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-6{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

</style>

Last edit 10 years ago
User: Steven S. 10 years ago
This is a good menu, but I can't get it to work.

Aren't you suppose to click on the three lines and make the menu come up?

The menu already comes up.
User: Roddy 10 years ago
There's an accumulation of errors and omissions.

You have wrapped your <script> in <style> tags.

The script requires jQuery.

The selectors in the script are back to front.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#navButton").click(function() {
if( $("#vertical-nav").css("display") == "block") {
$("#vertical-nav").css("display", "none");
} else {
$("#vertical-nav").css("display", "block");
}});});
</script>

Give your button this ID: id="navButton"

Before you can display the navigation, you need to first of all hide it. Add display:none in the first line of your CSS..

#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0;display:none}

I see you only have a fade in transition for the navigation but no fade out?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
--Roddy

Thanks. I updated the code. Menu no longer fades in on page load, but it also doesn't show when the hamburger icon is clicked on.

I wasn't planning on using the fade out at the moment.

Below is the updated code with your changes.


LC


<style>

<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/java script">
$(document).ready(function() {
$("#navButton").click(function() {
if( $("#vertical-nav").css("display") == "block") {
$("#vertical-nav").css("display", "none");
} else {
$("#vertical-nav").css("display", "block");
}});});
</script>

</style>

<div class="buttons-container">

<button id="navButton" type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus">
<span class="lines"></span>
</button>

</div>

<script>
var anchor = document.querySelectorAll('button');

[].forEach.call(anchor, function(anchor){
var open = false;
anchor.onclick = function(event){
event.preventDefault();
if(!open){
this.classList.add('close');
open = true;
}
else{
this.classList.remove('close');
open = false;
}
}
});
</script>

<style>

.buttons-container {
margin: 0px auto;
text-align: center;
}

button {
display: block;
margin: 0px;
border: none;
background: none;
}

button span {
display: block;
}

.grid-button {
padding: 1rem;
cursor: pointer;
user-select: none;
}

.grid-button .grid {
width: 0.5rem;
height: 0.5rem;
background: #ecf0f1;
color: #ecf0f1;
/* Not in use when the colors are specified below */
transition: 0.3s;
}

.grid-button.close .grid {
-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
}

.grid-button.rearrange .grid {
box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.rearrange.close .grid {
box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 1rem;
}

.grid-button.collapse .grid {
box-shadow: -0.625rem 0, -0.625rem 0.625rem, 0.625rem 0, 0.625rem -0.625rem, 0 -0.625rem, -0.625rem -0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.collapse.close .grid {
box-shadow: -0.5rem 0, 0 0 transparent, 0.5rem 0, 0 0 transparent, 0 -0.5rem, 0 0 transparent, 0 0.5rem, 0 0 transparent;
}

/* lines button */
.lines-button {
padding: 1rem 0.5rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.285715rem;
/* */
}
.lines-button:hover {
opacity: 1;
}
.lines-button:active {
transition: 0;
}

.lines {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: relative;
}
.lines:before, .lines:after {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.142855rem center;
transform-origin: 0.142855rem center;
}
.lines:before {
top: 0.5rem;
}
.lines:after {
top: -0.5rem;
}

.lines-button:hover .lines:before {
top: 0.57143rem;
}
.lines-button:hover .lines:after {
top: -.57143rem;
}

.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}

.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
top: 0;
width: 1.11111rem;
}

.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
-webkit-transform: none;
transform: none;
top: 0;
width: 2rem;
}

</style>


<nav id="vertical-nav">
<ul>

<li class="fadeIn-1"><a href="#">Page 1</a></li>

<li class="fadeIn-2"><a href="#"> Page 2</a></li>

<li class="fadeIn-3"><a href="#"> Page 3</a></li>

<li class="fadeIn-4"><a href="#"> Page 4</a></li>

<li class="fadeIn-5"><a href="#"> Page 5</a></li>

<li class="fadeIn-6"><a href="#">Page 6</a></li>

</ul>
</nav>

<style type="text/css">
#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0;display:none}

#vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden

-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
animation-delay: 9s;
}

#vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:0px solid #}

#vertical-nav ul li:last-child{border-bottom:0}/* border bottom removed on the last item */

#vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 10px;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent}

#vertical-nav ul li a:hover{color:#FF0000; padding: 4px 30PX}

#vertical-nav ul li a:hover:before{display:block;position:absolute;left:10px;top:8px;content:"";width:3px;height:9px;background:#FF0000}

-webkit-transition: {0.3s all;-moz-transition: 0.3s all;-o-transition: 0.3s all;transition: 0.3s all}

.fadeIn-1 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-2 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-3{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-4{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-5{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-6{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

</style>
User: Roddy 10 years ago
I've emailed you an HTML file.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
Here is the final code (with a *special* thanks to Roddy).

There is still, however, an issue with it: in Chrome and Opera, a 'blue' outline will display around the hamburger icon when clicked on. For the life of me, I can't figure it out. Maybe someone else can.


HTML Snippet (menu location)
<nav id="vertical-nav">
<ul>
<li class="fadeIn-1"><a href="#">Page 1</a></li>
<li class="fadeIn-2"><a href="#">Page 2</a></li>
<li class="fadeIn-3"><a href="#">Page 3</a></li>
<li class="fadeIn-4"><a href="#">Page 4</a></li>
<li class="fadeIn-5"><a href="#">Page 5</a></li>
<li class="fadeIn-6"><a href="#">Page 6</a></li>
</ul>
</nav>

HTML (Hamburger icon location)
<style type="text/css">
#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0;display:none}
#vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden
}
#vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:0px solid #}
#vertical-nav ul li:last-child{border-bottom:0}/* border bottom removed on the last item */
#vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 10px;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent}
#vertical-nav ul li a:hover{color:#FF0000; padding: 4px 30PX}
#vertical-nav ul li a:hover:before{display:block;position:absolute;left:10px;top:8px;content:"";width:3px;height:9px;background:#FF0000}
-webkit-transition: {1s all;-moz-transition: 1s all;-o-transition: 1s all;transition: 1s all}

.fadeIn-1 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-2 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-3{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-4{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-5{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-6{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

<style>

.buttons-container {
margin: 0px auto;
text-align: center;
}

button {
display: block;
margin: 0px;
border: none;
background: none;
-webkit-animation:fadeIn ease-in 1s;
-moz-animation:fadeIn ease-in 1s;
-o-animation:fadeIn ease-in 1s;
animation:fadeIn ease-in 1s;
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
}

button span {
display: block;
}

.grid-button {
padding: 1rem;
cursor: pointer;
user-select: none;
}

.grid-button .grid {
width: 0.5rem;
height: 0.5rem;
transition: 0.3s;
}

.grid-button.close .grid {
-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);
}

.grid-button.rearrange .grid {
box-shadow: -0.625rem -0.625rem, 0 -0.625rem, 0.625rem -0.625rem, -0.625rem 0, 0.625rem 0, -0.625rem 0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.rearrange.close .grid {
box-shadow: 0 -0.5rem, 0 -1rem, 0.5rem 0, -1rem 0, 1rem 0, -0.5rem 0, 0 1rem, 0 1rem;
}

.grid-button.collapse .grid {
box-shadow: -0.625rem 0, -0.625rem 0.625rem, 0.625rem 0, 0.625rem -0.625rem, 0 -0.625rem, -0.625rem -0.625rem, 0 0.625rem, 0.625rem 0.625rem;
}

.grid-button.collapse.close .grid {
box-shadow: -0.5rem 0, 0 0 transparent, 0.5rem 0, 0 0 transparent, 0 -0.5rem, 0 0 transparent, 0 0.5rem, 0 0 transparent;
}
.lines-button {
padding: 1rem 0.5rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.285715rem;
}
.lines-button:hover {
opacity: 1;
}
.lines-button:active {
transition: 0;
}

.lines {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: relative;
}
.lines:before, .lines:after {
display: inline-block;
width: 2rem;
height: 0.285715rem;
background: #FF0000;
border-radius: 0.142855rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.142855rem center;
transform-origin: 0.142855rem center;
}
.lines:before {
top: 0.5rem;
}
.lines:after {
top: -0.5rem;
}

.lines-button:hover .lines:before {
top: 0.57143rem;
}
.lines-button:hover .lines:after {
top: -.57143rem;
}

.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}

.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
top: 0;
width: 1.11111rem;
}

.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
-webkit-transform: none;
transform: none;
top: 0;
width: 2rem;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="buttons-container">
<button id="navButton" type="button" role="button" aria-label="Toggle Navigation" class="lines-button minus"><span class="lines"></span></button>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#navButton").click(function() {
if( $("#vertical-nav").css("display") == "block") {
$("#vertical-nav").css("display", "none");
} else {
$("#vertical-nav").css("display", "block");
}});});

var anchor = document.querySelectorAll('button');

[].forEach.call(anchor, function(anchor){
var open = false;
anchor.onclick = function(event){
event.preventDefault();
if(!open){
this.classList.add('close');
open = true;
}
else{
this.classList.remove('close');
open = false;
}
}
});
</script>

Last edit 10 years ago
User: Steven S. 10 years ago
I also get the blue halo. I use Chrome and many people I know do. Can't you fix it?
User: Roddy 10 years ago
Thats's because you are using a button rather than a div. Add the outline selector and give it a vale of "none"...

button {outline:none}

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Les C. 10 years ago
--Roddy

Brilliant! It's interesting that I would have to specify "none" in this case in lieu of nothing being specified at all.


Many thanks.

L C


Post Reply
You must login or signup to post.