에티테마

유료테마 안녕하세요. T26테마에 메가 메뉴 부분만 적용하고 싶습니다.

페이지 정보

작성자 no_profile one 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 6건 조회 18회 작성일 21-11-25 15:31

본문

T26테마를 구입하였습니다. 전체적인 테마 및 레이아웃이 요청업체와 비슷하여서 구입하였습니다.

그런데 메가 메뉴를 적용해야 합니다. 그래서 이전에 구입한 M-20테마(메가메뉴)가 있어서 해당 테마를 보고 적용해보려 했는데
잘 안되네요. 어디를 추가하고 수정해야 하는지 문의드립니다.

현재 navigation 부분과 css 부분을 코드 보고 수정을 하였습니다.

문제는 메뉴에 마우스를 올린 후 아래 세부메뉴 클릭하려고 하면 메뉴가 바로 닫혀 버립니다.
혹시 js 파일도 추가해야 하는지 문의드리며 전체적으로 메가 메뉴만 적용하려고 한다면 어디 어디 추가를 해야 하는지 문의드립니다.

사이트: https://kmca2021.cafe24.com/

한가지 더 문의드리고자 합니다.
특정 사이즈에서 메가메뉴 길이가 가로로 기본적으로 길어지게 됩니다.
이 부분은 메가메뉴 테마 구입때부터 발생하는 현상인듯 하는데 이 부분 조절하는 코드는 어디일까요?
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

소프트존님의 댓글

소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

안녕하세요~
에티테마에 메가메뉴만 구성하시려고 하신다면
아래 코드를 참고해주세요~
navication.php 파일은 자동화가 되어 있으므로 수정사항이 까다로우실 수 있습니다.
그렇기 때문에 메가메뉴는 수동으로 구현하시거나 자동화  되어 있는 부분을 메가메뉴로 교체하시면 좋을것 같습니다.

아래 구성 참고 하셔서 navacation.php 파일에서 해당 부분 교체하시면 됩니다.
감사합니다.~~


                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features  <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Login</a></li>
                                <li><a href="#">메뉴</a></li>
                                <li><a href="#">메뉴</a></li>
                            </ul>
                        </li><!--features-->

                        <!--mega menu-->
                        <li class="dropdown yamm-fw">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">메가메뉴  <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <div class="yamm-content">
                                        <div class="row">

                                            <div class="col-sm-3">
                                                <h3 class="heading">메가메뉴 1</h3>
                                                <ul class="nav mega-vertical-nav">     

                                                    <li><a href="#"><i class="fa fa-text-height"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-bars"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-comment-o"></i> 회사소개 </a></li>
                                                    <li><a href="#"><i class="fa fa-table"></i> 회사소개</a></li>
                                                </ul>

                                            </div>
                                            <div class="col-sm-3">
                                                <h3 class="heading">메가메뉴 2 </h3>
                                                <ul class="nav mega-vertical-nav">
                                                    <li><a href="#"><i class="fa fa-cog"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-share"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-bell"></i> Alerts </a></li>
                                                    <li><a href="#"><i class="fa fa-cogs"></i> 회사소개</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-3">
                                                <h3 class="heading">메가메뉴 3</h3>
                                                <ul class="nav mega-vertical-nav">
                                                    <li><a href="#"><i class="fa fa-flag"></i> 회사소개</a></li>                                               
                                                    <li><a href="#"><i class="pe-7s-like"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-sliders"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-table"></i> 회사소개 </a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-3">
                                                <h3 class="heading">메가메뉴 4</h3>
                                                <ul class="nav mega-vertical-nav">
                                                    <li><a href="#"><i class="fa fa-usd"></i> 회사소개</a></li>                                               
                                                    <li><a href="#"><i class="fa fa-image"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-map-pin"></i> 회사소개</a></li>
                                                    <li><a href="#"><i class="fa fa-map-marker"></i> 회사소개</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li> <!--menu Features li end here-->

                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--container-->
        </div><!--navbar-default-->

소프트존님의 댓글

소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

[메뉴오버시 문제]
네비게이션에 마우스 오버시에 메가메뉴 부분에서 빨리 닫히는 현상이 나옵니다.
이것은 네비게이션 메뉴와 메가메뉴사이의 틈이 발생한것으로 보여 집니다.
네비게이션 텍스트들을 좀더 아래로 내리셔야 될것 같습니다.

one님의 댓글의 댓글

no_profile 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; 으로 잡혀 있는 부분이 있습니다.
위 내용은 네비게이션 여백이기 때문에 네비게이션 여백으로 높이를 지정하시면 안되고요~

<li class="dropdown mega-area......">
<a href="주소"......
위의 <a href=""....  값에 padding 값을 넣으셔야 합니다. 그럼 정상동작합니다.

테스트 코드 입니다.
우선 맨위 코드에서 padding: 20px 0; 를 제거 합니다. 그럼 네비게이션이 줄어들게 됩니다.
대신
<li class="dropdown mega-area......">
<a href="주소"......
우의 <a href=""...... 값으로 padding 값으로 새로 높이를 맞춰주시면 됩니다.


테스트 해보니 잘되는것 확인하였습니다.
테마폴더/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;
}

수고하세요~

Total 489건 1 페이지
질문답변 목록
번호 제목 글쓴이 날짜
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-29
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-19
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-18
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-17
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-09
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-22
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-19
482 no_profile 용용이당 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-26
481 no_profile 김일한 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-25
480 no_profile 김일한 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-25
열람중 no_profile one 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-25
478 no_profile 동물원 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-25
477 no_profile 김일한 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-25
476 no_profile 재회 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-24
475 no_profile 쮸디러브 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-24
474 no_profile 김일한 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-24
473 no_profile 쮸디러브 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-23
472 no_profile 김일한 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-23
471 no_profile 투덜 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-23
470 no_profile 재회 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-23
469 no_profile 김일한 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-23
468 no_profile 투덜 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-22
467 no_profile zzag 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-21
466 no_profile zzag 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-21
465 no_profile 쮸디러브 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-18
464 no_profile YAD 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-18
463 no_profile 원유정 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-15
462 no_profile nabaog123 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-15
461 no_profile one 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-15
460 no_profile 감사합니다 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-15
게시물 검색

카테고리

카테고리
질문답변

유료테마메뉴얼

유료테마메뉴얼