各位大大好
小女子在練習RWD的二階式選單
碰到幾個問題
再麻煩各位前輩指導
我的 codepen
1.因最近在研究無障礙網站
focus時候需要有outline
而我的選單在tab過去時候
子選單不會自動展開
要滑鼠移動過去才能展開內容
tab 的焦點才會去找到他
如圖(圖片傳不上來直接用網址)
但我想要的效果是我按tab，選到第一層選單時，
下層的子選單就會自己打開等著給focus到
請問這要如何解呢?
2.在outline的部分，被focus時候外框為何不會完整出現呢?
都非完整的邊框，請問是我CSS哪邊寫錯了呢?
3.請問在手機版時我想要的效果是當一個子選單被打開後，
其他子選單可以自動關起來，請問這要如何解呢?
本以為單層選單的RWD方式寫起來算簡單
多一階層應該還好
結果事情不是我這個蠢人想得這樣簡單
問題多多
寫個選單就卡
再麻煩各位前輩賜教，謝謝
已邀請的邦友 {{ invite_list.length }}/5
1.用CSS 的話你要改一下HTML架構 才有辦法用:focus
用下面語法可以簡單達成你要的不過 不支援IE
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-within
.menu li:focus-within .subMenu {
display: block;
}
你也可以用JQ來寫
/*聚焦*/
$(".menu li a:nth-child(1)").focus(function(){
/* $(this).css("display","block");*/
$(this).addClass('focus');
});
/*失焦*/
$(".menu li a:nth-child(1)").blur(function () {
$(this).removeClass('focus');
});
.menu li a {
display: block;
padding: 10px 15px;
background-color: #eee;
color: black;
font-size: 1.2rem;
text-align: center;
margin: 2px 6px;
}
用CSS來寫的話自然就是你要的效果
展開一個選單其他都會關閉
用JQ或是JS寫的話 要寫得比較多
先貼codepen(https://codepen.io/cuxy6705/pen/NWWMQzZ)
3個都先幫你用一個解決方法給你參考看看
我並沒有看到你有對tab做什麼js的事件可能是你沒想到??
有很多方法 直接給 .menu li a 給 margin: 2px;可以解決 或者用 box-sizing + border 也行
你可以在點擊的一開始就先全部收起來 再打開你要的那個
剩下的submenu outline的問題就交給你去想摟 ^^
只改CSS僅供參考囉
方法一(positionb讓他浮上去~~)
*:focus {
position: relative;
z-index: 2;
outline: 2px dotted red;
}
方法二(子選項填滿底色，再把a給出空隙~)
.menu li .subMenu{
background-color: #eee;
}
.subMenu li a{
margin: 2px;
}
iThome鐵人賽
看影片追技術