iT邦幫忙

0

卡卡的 RWD 二階式選單

各位大大好

小女子在練習RWD的二階式選單

碰到幾個問題

再麻煩各位前輩指導

我的 codepen

1.因最近在研究無障礙網站
focus時候需要有outline

而我的選單在tab過去時候
子選單不會自動展開
要滑鼠移動過去才能展開內容
tab 的焦點才會去找到他
如圖(圖片傳不上來直接用網址)

但我想要的效果是我按tab,選到第一層選單時,
下層的子選單就會自己打開等著給focus到
請問這要如何解呢?

2.在outline的部分,被focus時候外框為何不會完整出現呢?
都非完整的邊框,請問是我CSS哪邊寫錯了呢?

3.請問在手機版時我想要的效果是當一個子選單被打開後,
其他子選單可以自動關起來,請問這要如何解呢?

本以為單層選單的RWD方式寫起來算簡單
多一階層應該還好
結果事情不是我這個蠢人想得這樣簡單
問題多多/images/emoticon/emoticon06.gif
寫個選單就卡
/images/emoticon/emoticon02.gif

再麻煩各位前輩賜教,謝謝

邦幫忙不能上GIF,可以把圖放在 imgur 上(你已經放了), 再把網址貼過來
你的框框一定是被某的東西擋住了 或者是 只有畫右邊 跟下面 把上跟左掠過惹
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
3
咖咖拉
iT邦好手 1 級 ‧ 2019-11-07 13:32:12
最佳解答

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');
   });
  1. 邊框無法完整顯示
    只是被擋住了 加個margin就好
.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寫的話 要寫得比較多

補個
https://codepen.io/ipphof/pen/KKKRWOM

OK : ) iT邦新手 5 級 ‧ 2020-04-09 15:28:03 檢舉

非常感謝您的解答!
我嘗試了您說的:focus-within寫法是成功的
不過阿...被打槍XD
因為IE大魔王XDDD
只好轉而求救jQuery哈哈

謝謝你讓我學到一個新東西!~

/images/emoticon/emoticon41.gif

1
cuxy6705
iT邦新手 5 級 ‧ 2019-11-08 09:48:20

先貼codepen(https://codepen.io/cuxy6705/pen/NWWMQzZ)
3個都先幫你用一個解決方法給你參考看看

  1. 我並沒有看到你有對tab做什麼js的事件可能是你沒想到??

  2. 有很多方法 直接給 .menu li a 給 margin: 2px;可以解決 或者用 box-sizing + border 也行

  3. 你可以在點擊的一開始就先全部收起來 再打開你要的那個

剩下的submenu outline的問題就交給你去想摟 ^^

OK : ) iT邦新手 5 級 ‧ 2020-04-09 15:31:57 檢舉

啊!
1.我的意思是按tab鍵讓選單被focus,不好意思我沒解釋清楚><
2.後來我用margin成功,謝謝建議!

非常感謝您的回答唷!

1
minfan_chen
iT邦新手 5 級 ‧ 2019-11-08 16:44:53

只改CSS僅供參考囉

方法一(positionb讓他浮上去~~)

*:focus {
  position: relative;
  z-index: 2;
  outline: 2px dotted red;
}

方法二(子選項填滿底色,再把a給出空隙~)

.menu li .subMenu{
  background-color: #eee;
}
.subMenu li a{
    margin: 2px;
}
OK : ) iT邦新手 5 級 ‧ 2020-04-09 15:29:03 檢舉

謝謝您~~~~!
我當下沒想到呢!

我要發表回答

立即登入回答