에티테마

2차 메뉴 네비게이션 라인에 맞추기

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 23-02-06 19:07

본문

안녕하세요. 회원분께서 1차 메뉴 마우스 오버시 2차 메뉴를 라인에 맞추고 싶다고 하셔서 해당 방법에 대해서 설명 드리겠습니다.
우선 개발자 도구를 열고서 확인해보시면


e63c56a02e54599b86a80cd6f9b93e39_1675676268_05.png


위처럼 되어 있습니다. 1차 메뉴에 마우스를 올리시면 2차 메뉴가 조금 위로 올라간 것을 알 수 있습니다.
 


e63c56a02e54599b86a80cd6f9b93e39_1675676336_4.png


위 처럼 간격이 위로 올라가 있습니다.
저 부분을 아래 네비게이션 라인에 맞추도록 하겠습니다.



e63c56a02e54599b86a80cd6f9b93e39_1675676492_9.png


네비게이션 사이에 공간이 있음을 알 수 있습니다.
해당 내용을 제거해주시면 해결이 될 수 있습니다.
먼저 네비게이션에 적용되어져 있는 padding 값이나 margin 값을 없애도록 하겠습니다.


e63c56a02e54599b86a80cd6f9b93e39_1675676656_72.png


개발자 도구로 마우스를 클릭해보시면 개발자도구에서는 우측처럼 스타일 시트 위치와 어떤값들이 들어가져 있는지 확인이 됩니다.
min-height:90px; 과 padding:20px 0; 값 때문이라는것을 알 수가 있습니다.
일단 저 부분을 제거해보도록 하겠습니다.


e63c56a02e54599b86a80cd6f9b93e39_1675676810_23.png


위 처럼 개발자도구에서 체크박스를 체크해제해보시면 간격이 줄어드는것을 확인하실 수 있습니다.
그럼 실제 코드에서 빼보도록 하겠습니다.
테마폴더 / css / style_aqours.css : 587줄 이라고 나와 있습니다.


/* 데스크탑 */
@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: rgba(0, 0, 0, 0.11765) 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: rgba(0, 0, 0, 0.11765) 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;
    }
}


위 내용이 실제 코드 입니다. 저 위에서 두줄을 삭제 해보도록 하겠습니다.


      min-height: 90px;
      padding: 20px 0;


위 두개의 줄만 삭제해주세요.


e63c56a02e54599b86a80cd6f9b93e39_1675677019_64.png


그럼 위 처럼 패딩, 마진값이 빠지니 딱 붙어 있는 모습을 볼 수 있으실 겁니다.
이제 마우스를 올려보도록 하겠습니다.


e63c56a02e54599b86a80cd6f9b93e39_1675677130_1.png


해당 스타일 시트 2줄을 제거 하니 위 처럼 네비게이션 라인에 딱 맞게 됩니다.
근데 폭이 조금 좁아서 가독성이 좀 떨어 지게 보이시죠?
그럼 해당 1차 메뉴를 세로로 조금 늘려보도록 하겠습니다.


e63c56a02e54599b86a80cd6f9b93e39_1675677454_39.png



테마폴더 / css / common.css : 306 번째줄 보시면 공통으로 사용하는 네비게이션 값이 있습니다.
메인페이지 + 서브페이지가 공통으로 사용 됩니다. 
padding 값 상하(위아래) 값을 20px 에서 30px 로 수정하였습니다.
그럼 위에 보시는 것 처럼 간격이 좁지 않게 됩니다.

위 작업을 해주시면 메인페이지와 서브페이지가 동시에 적용이 됩니다.
그런데 문제는 로고하고 오른쪽 화살표의 위치를 다시 맞춰주셔야 겠습니다.



e63c56a02e54599b86a80cd6f9b93e39_1675677652_65.png


이제 화살표 값을 수정하도록 하겠습니다. 
수정해야 하는 부분은 common.css: 1082 번째 줄 입니다.
개발자도구에서 마우스를 클릭해보시면 top:20px 로 되어 있는것을 top: 30px 으로 수정하였습니다. 
정상적으로 좀더 아래 위치하게 되니 보기 좋게 되었습니다.

이제 로고도 위치를 맞춰 보도록 하겠습니다.
 

e63c56a02e54599b86a80cd6f9b93e39_1675677899_38.png



저는 navigation.php 열어서 로고 부분을 찾아서 직접 스타일시트를 입력해줬습니다.
margin-top:10px 만큼 추가했습니다.

위의 내용 처럼 네비게이션을 둘러싸고 있는 페딩값이나 마진값을 제거 함으로써 네비게이션의 구조를 변경해보았습니다.
감사합니다.







  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 81건 1 페이지