カスタムSidedeenu - Count - html属性でtabindexを使う方法

ここでは有用なHTML属性であるtabindexについての短い記事です.
順序を指定することができます“タブ”ボタンを押すと、このかわいい属性のおかげでHTML要素間を移動します.TabIndexを使用すると、お客様のウェブサイトやキーボードユーザーのアクセシビリティを向上させます💓
のクイックメニューを作りましょう.HTMLコード:

<div class=”menu”>
   <div class=”item” id=”homepage” tabindex=”1">Homepage</div> 
   <div class=”item” id=”about” tabindex=”2">About</div>
   <div class=”item” id=”news” tabindex=”3">News</div>
   <div class=”item” id=”services” tabindex=”4">Services</div>
   <div class=”item” id=”contact” tabindex=”5">Contact</div>
</div>

ご覧の通り、tabindex属性を使用してdivを注文しました.若干の非常に基本的なスタイルを加えましょう.以下はCSSです.

.menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 10vw;
   height: 100vh;
   background: #eee;
   overflow: auto;
}

.menu .item {
   padding: 18px;
   border-bottom: 2px solid #ddd;
}

.menu .item:focus {
   background: #ddd;
   font-weight: bold;
   outline: none;
}

今、私は“タブ”ボタンを押しています.さて、次のようにしてください.

それです.お読みありがとうございます.🎉
これらのコードのgithub repo :
https://github.com/inancakduvan/tabindex
マイギタブプロフィール
https://github.com/inancakduvan
Twitterアカウント