연어는 못참아
911
2021-08-13 16:01:31 작성 2021-08-13 16:20:50 수정됨
1
107

vuejs 네비바 css좀 여쭤볼 수 있을까요?



안녕하세요. vue.js 라우터링크가 연결된 네비게이션 메뉴 css를 하고 있는데요.

위의 그림과 네비바가 동일합니다. 

'개인'메뉴는 하위 메뉴가 없어서 클릭시 개인 이라는 글자가 주황색으로 바뀌고요.

'기업'이라는 메뉴는 클릭시 하위메뉴가 있어서 하위메뉴를 클릭하면 '기업'이 주황색으로 바뀌게

하고 있는데요.


각각 클릭이벤트명 따로,그에 맞는 메소드명 따로 하나씩 지정해 주면 구현은 되는데 굉장한

하드코딩이여서 이 방법은 아닌것 같습니다. ㅠㅠ

클릭시 @click="메소드명($event)"를 해주고 그걸 event.target으로 받으면 누가 보냈는지는 확인이 되는데요. 그래서 제일 상위 메뉴에 동일한 클래스 명을 지정해 준뒤 선택자 closest("클래스명")이렇게 해서

선택하면 가장 가까운 클래스의 메뉴 색깔을 바꿔라...이렇게 해주니깐 하위메뉴가 없는건 적용이 되지만 하위메뉴가 있는 아이들은 css가 안먹네요.

특히 하위 메뉴들을 선택하면 자기가 색이 바뀌는게 아니라 상위 메뉴 색이 바뀌어야 하고..

하위메뉴가 없는건 자기를 클릭시 자기 메뉴가 색이 바뀌어야 하는데요.

이걸 하드코딩 안하고 구현하는 방법이 있을까요? ㅜ,ㅜ




추가로 메뉴를 클릭하면 메뉴 일부분만 밑줄을 주고 싶은데요. 위의 카뱅처럼 해당하는 메뉴 밑에 밑줄 주는 것이요. 클릭시 저 밑줄을 주고 싶은데요.

가상요소를 써서 before나 after로 밑줄을 줄 수 있는데 이걸 vue.js에서는 어떻게 클릭이벤트랑 연결해야 할지 모르겠습니다. ㅠㅠ 클릭시 클래스 바인딩을 해주고 그 클래스명에 가상요소 after를 붙여  그 안에 밑줄을 긋는 css를 넣었는데요. 개발자도구에서는 클래스가 붙어 있는걸 확인할 수 있지만 실제 가상요소가 적용되지 않아서요..ㅠㅠ


vue.js는 scope가 너무 헷갈려서 css적용이 너무 어렵네요. ㅠㅠ




0
  • 답변 1

  • yeori
    2k
    2021-08-14 06:46:29

    메뉴 관련 vuejs 코드가 없네요

  • 로그인을 하시면 답변을 등록할 수 있습니다.