我正在尝试制作响应式菜单。徽标位于左侧,菜单位于右侧。当页面宽度变小时,有没有办法检测菜单何时触摸了徽标,这样我就可以显示菜单图标(当前隐藏)并在徽标下面竖起菜单?
.header {
overflow: hidden;
background-color: #333;
position: relative;
width: inherit;
margin-top: 20px;
}
.logo {
display: inline-block;
color: #fff;
font-size: 17px;
padding: 14px 16px;
}
.topnav {
overflow: hidden;
background-color: #333;
float: right;
}
.topnav svg {
color: #fff;
width: 20px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
<div class="header">
<div class="logo">Lorem ipsum dolor sit amet</div>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
</a>
</div>
</div>