<nav id="nav">
<h2 class="visually-hidden">メインメニュー</h2>
<button type="button" class="button" aria-haspopup="true" aria-controls="menu" :aria-expanded="ariaExpanded"
@click="onclick">メニュー</button>
<ul id="menu" class="menu" :aria-hidden="ariaHidden" v-show="flag">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>
.visually-hidden{
border: none;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin:0;
overflow: hidden;
padding:0;
position: absolute;
white-space: nowrap
width: 1px;
}
.button[aria-expanded="false"]::after{
content: "を開く";
}
.button[aria-expanded="true"]::after{
content: "を閉じる";
}
Vue.createApp({
data() {
return {
flag: false,
ariaHidden: true,
ariaExpanded: false
};
},
methods: {
onclick() {
this.flag = !this.flag;
this.ariaHidden = !this.ariaHidden;
this.ariaExpanded = !this.ariaExpanded;
}
}
}).mount('#nav');
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.