안녕하세요. T26테마에 메가 메뉴 부분만 적용하고 싶습니다.
페이지 정보
작성자 one 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 6건 작성일 21-11-25 15:31본문
그런데 메가 메뉴를 적용해야 합니다. 그래서 이전에 구입한 M-20테마(메가메뉴)가 있어서 해당 테마를 보고 적용해보려 했는데
잘 안되네요. 어디를 추가하고 수정해야 하는지 문의드립니다.
현재 navigation 부분과 css 부분을 코드 보고 수정을 하였습니다.
문제는 메뉴에 마우스를 올린 후 아래 세부메뉴 클릭하려고 하면 메뉴가 바로 닫혀 버립니다.
혹시 js 파일도 추가해야 하는지 문의드리며 전체적으로 메가 메뉴만 적용하려고 한다면 어디 어디 추가를 해야 하는지 문의드립니다.
사이트: https://kmca2021.cafe24.com/
한가지 더 문의드리고자 합니다.
특정 사이즈에서 메가메뉴 길이가 가로로 기본적으로 길어지게 됩니다.
이 부분은 메가메뉴 테마 구입때부터 발생하는 현상인듯 하는데 이 부분 조절하는 코드는 어디일까요?
댓글목록
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
안녕하세요~
에티테마에 메가메뉴만 구성하시려고 하신다면
아래 코드를 참고해주세요~
navication.php 파일은 자동화가 되어 있으므로 수정사항이 까다로우실 수 있습니다.
그렇기 때문에 메가메뉴는 수동으로 구현하시거나 자동화 되어 있는 부분을 메가메뉴로 교체하시면 좋을것 같습니다.
아래 구성 참고 하셔서 navacation.php 파일에서 해당 부분 교체하시면 됩니다.
감사합니다.~~
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
[메뉴오버시 문제]
네비게이션에 마우스 오버시에 메가메뉴 부분에서 빨리 닫히는 현상이 나옵니다.
이것은 네비게이션 메뉴와 메가메뉴사이의 틈이 발생한것으로 보여 집니다.
네비게이션 텍스트들을 좀더 아래로 내리셔야 될것 같습니다.
one님의 댓글
one 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
답변 감사합니다. 다른 부분은 어느정도 해결을 하였는데 역시 빨리 닫히는 현상이 있습니다. 틈이 발생한걸 해결하고 있는데 혹시 어디를 수정해야하는지 알 수 있을까요?
padding 값줄여보고 있는 중입니다.
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
[특정사이즈 가로 길이 문제]
다시 테스트 해보았으나 해당 게시판의 가로 길이는 마우스로 잡았을때만 나타나는 현상인데요.
이는 네비게이션이 이동하면서 발생되는 현상 입니다. 오류는 아니고 자연스러운것인데요.
제가 크롬, 엣지에서 테스트 해봤을때 스샷처럼 가로 길이의 문제는 발생되지 않았습니다.
다시 한번 체크 부탁드리겠습니다.~~
소프트존님의 댓글
소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일
개념은 이렇습니다.
현재 네비게이션 보시면
@media only screen and (min-width: 1201px)
.navbar-default {
border: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
border-radius: 0px;
margin-bottom: 0;
width: 100%;
min-height: 90px;
padding: 20px 0;
-webkit-box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.11765) 0px 1px 3px;
-ms-box-shadow: rgba(0, 0, 0, 0.11765) 0px 1px 3px;
box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px;
background-color: rgba(255, 255, 255, 0.98);
clear: both;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 1039 !important;
}
위 내용중에서 padding: 20px 0; 으로 잡혀 있는 부분이 있습니다.
위 내용은 네비게이션 여백이기 때문에 네비게이션 여백으로 높이를 지정하시면 안되고요~
위의
테스트 코드 입니다.
우선 맨위 코드에서 padding: 20px 0; 를 제거 합니다. 그럼 네비게이션이 줄어들게 됩니다.
대신
우의
테스트 해보니 잘되는것 확인하였습니다.
테마폴더/common.css 217 번째줄에서 아래와 같이 padding : 50px 20px 로 수정해주세요.
그럼 잘되는것 확인이 가능하십니다.
.nav>li>a {
position: relative;
display: block;
padding: 50px 20px;
font-family: 'SCDream4',sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
}
수고하세요~
one님의 댓글
one 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일감사합니다. 정상작동 확인 하였습니다.