테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

관리자 좌측메뉴 스크롤 안되나요? 채택완료

JKWang 2년 전 조회 2,016
답변 6
목록

관리자 좌측메뉴가 20개정도 되는데

화면이 넘어가버리는건 표시가 안되네요..

overflow-y:scroll 를

<nav id="gnb"> 여기에 넣거나

<ul class="gnb_ul"> 여기에 넣어주면

스크롤은 되나 서브메뉴가 표시가 안되네요.

 

방법이 없을까요?

#그누보드5 #관리자 #관리자메뉴
댓글을 작성하려면 로그인이 필요합니다.

답변 6개

채택된 답변
+20 포인트
들레아빠

이렇게 나와야 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

J
JKWang
2년 전
감사합니다. 정확하게 되었습니다.
�
들레아빠
2년 전
채택 감사 합니다.

댓글을 작성하려면 로그인이 필요합니다.

J
JKWang
2년 전

@들레아빠

</p>

<p>#gnb .gnb_ul{position:relative;height:100%;background:#ebebeb;width:120px}

#gnb .gnb_li{border-bottom:1px solid #ddd }

#gnb .gnb_li button{background-color: #ebebeb;border:0;width:120px;height:60px;padding:22px 0 0;overflow:hidden;}

#gnb .gnb_li .btn_op{background:url(../img/menu_default.png) 50% 30% no-repeat #ebebeb}

#gnb .on .btn_op{background:url(../img/menu_default_on.png) 50% 30% no-repeat #fff}

#gnb .gnb_li .btn_op.menu-100{background:url(../img/menu-1-1.png) 50% 30% no-repeat #ebebeb }

#gnb .on .btn_op.menu-100{background:url(../img/menu-1.png) 50% 30% no-repeat #fff}

#gnb .gnb_li .btn_op.menu-200{background:url(../img/menu-2-1.png) 50% 30% no-repeat #ebebeb }

#gnb .on .btn_op.menu-200{background:url(../img/menu-2.png) 50% 30% no-repeat #fff}

#gnb .gnb_li .btn_op.menu-300{background:url(../img/menu-3-1.png) 50% 30% no-repeat #ebebeb }

#gnb .on .btn_op.menu-300{background:url(../img/menu-3.png) 50% 30% no-repeat #fff}

#gnb .gnb_li .btn_op.menu-400{background:url(../img/menu-7-1.png) 50% 30% no-repeat #ebebeb }

#gnb .on .btn_op.menu-400{background:url(../img/menu-7.png) 50% 30% no-repeat #fff}

#gnb .gnb_li .btn_op.menu-500{background:url(../img/menu-6-1.png) 50% 30% no-repeat #ebebeb }

#gnb .on .btn_op.menu-500{background:url(../img/menu-6.png) 50% 30% no-repeat #fff}

#gnb .gnb_li .btn_op.menu-900{background:url(../img/menu-4-1.png) 50% 30% no-repeat #ebebeb }

#gnb .on .btn_op.menu-900{background:url(../img/menu-4.png) 50% 30% no-repeat #fff}

#gnb .gnb_li button:hover{background-color:#f3f3f3}

/*#gnb .gnb_oparea{display:none;position:absolute;top:0;left:120px;background:#fff;height:100%;width:170px;padding:20px;border-right:1px solid #dbdbdb;}*/

#gnb .gnb_oparea{display:none;position:absolute;top:0;left:120px;background:#fff;height:100%;width:170px;padding:20px;border-right:1px solid #dbdbdb;overflow-y:scroll;

-webkit-box-shadow: 2px 0 2px rgba(150,150,150,100.1);

-moz-box-shadow: 2px 0 2px rgba(150,150,150,0.1);

box-shadow: 2px 0 2px rgba(150,150,150,0.1);}

#gnb .gnb_ul{height:100%;background:#ebebeb;width:120px;overflow-y:scroll;overflow-x:hidden}</p>

<p>/*gnb*/

::-webkit-scrollbar{width:8px;height:8px}

::-webkit-scrollbar-track{background-color:#fff}

::-webkit-scrollbar-thumb{background:#badcff99;border-radius:5px}

::-webkit-scrollbar-thumb:hover{background:#ff80ed66}

::-webkit-scrollbar-thumb:active{background:#ff2525}

::-webkit-scrollbar-button {display:none}</p>

<p>

 

아이콘은 메뉴가 많아져서 없애고 메뉴명으로 나오게 해논 상태입니다.

말씀해주신데로 적용했는데

서브메뉴가 안나옵니다.

inspect에서는 위치는 차지하고 있는데 말이죠..ㅠ_ㅠ

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
들레아빠
2년 전
/*gnb*/를 모두 이걸로 해보세요.
[code]
/*gnb*/
#gnb{position:fixed;top:0;left:0;max-width:220px;height:100%;padding-top:50px;z-index:999}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_ul{height:100%;background:#ebebeb;width:50px;overflow-y:scroll;overflow-x:hidden}
#gnb .gnb_li{border-bottom:1px solid #ddd }
#gnb .gnb_li button{background-color: #ebebeb;border:0;width:50px;height:50px;text-indent:-999px;overflow:hidden;}
#gnb .gnb_li .btn_op{background:url(../img/menu_default.png) 50% 50% no-repeat #ebebeb}
#gnb .on .btn_op{background:url(../img/menu_default_on.png) 50% 50% no-repeat #fff}
#gnb .gnb_li .btn_op.menu-100{background:url(../img/menu-1-1.png) 50% 50% no-repeat #ebebeb }
#gnb .on .btn_op.menu-100{background:url(../img/menu-1.png) 50% 50% no-repeat #fff}
#gnb .gnb_li .btn_op.menu-200{background:url(../img/menu-2-1.png) 50% 50% no-repeat #ebebeb }
#gnb .on .btn_op.menu-200{background:url(../img/menu-2.png) 50% 50% no-repeat #fff}
#gnb .gnb_li .btn_op.menu-300{background:url(../img/menu-3-1.png) 50% 50% no-repeat #ebebeb }
#gnb .on .btn_op.menu-300{background:url(../img/menu-3.png) 50% 50% no-repeat #fff}
#gnb .gnb_li .btn_op.menu-400{background:url(../img/menu-7-1.png) 50% 50% no-repeat #ebebeb }
#gnb .on .btn_op.menu-400{background:url(../img/menu-7.png) 50% 50% no-repeat #fff}
#gnb .gnb_li .btn_op.menu-500{background:url(../img/menu-6-1.png) 50% 50% no-repeat #ebebeb }
#gnb .on .btn_op.menu-500{background:url(../img/menu-6.png) 50% 50% no-repeat #fff}
#gnb .gnb_li .btn_op.menu-900{background:url(../img/menu-4-1.png) 50% 50% no-repeat #ebebeb }
#gnb .on .btn_op.menu-900{background:url(../img/menu-4.png) 50% 50% no-repeat #fff}
#gnb .gnb_li button:hover{background-color:#f3f3f3}
#gnb .gnb_oparea{display:none;position:absolute;top:0;left:50px;background:#fff;height:100%;width:170px;padding:20px;border-right:1px solid #dbdbdb;overflow-y:scroll;
-webkit-box-shadow: 2px 0 2px rgba(150,150,150,100.1);
-moz-box-shadow: 2px 0 2px rgba(150,150,150,0.1);
box-shadow: 2px 0 2px rgba(150,150,150,0.1);}
#gnb .on .gnb_oparea{display:block}
#gnb .gnb_oparea h3{margin-bottom:10px;line-height:18px;font-size:1.17em}
#gnb .gnb_oparea li{line-height:28px}
#gnb .gnb_oparea li a{color:#555}
#gnb .gnb_oparea li a:hover,#gnb .gnb_oparea li .on{color:#435ffe;}
#gnb.gnb_small .gnb_oparea{display:none;}
#gnb.gnb_small .gnb_li:hover .gnb_oparea{display:block;}
.gnb_small .gnb_ul{display:block;}

::-webkit-scrollbar{width:4px;height:8px}
::-webkit-scrollbar-track{background-color:#fff}
::-webkit-scrollbar-thumb{background:#badcff99;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#ff80ed66}
::-webkit-scrollbar-thumb:active{background:#ff2525}
::-webkit-scrollbar-button {display:none}
[/code]

댓글을 작성하려면 로그인이 필요합니다.

조

#gnb .gnb_ul{overflow-y:auto;}  

#gnb .gnb_oparea {position : fxied; top : 50px;}

 

이렇게 두개 수정하시면 되겠네요

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

균
균이
2년 전

꼭 그렇게만 사용하려고 하지말고

administrator 우측 빈 공간에 많이 쓰는 메뉴를 가져다 붙이면 더 좋지않나요?

 

admin.css 57행

#gnb{ position:fixed <---- 요놈 삭제

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

들레아빠 

</p>

<p>#gnb .gnb_ul{height:100%;background:#ebebeb;width:90px;overflow-y:scroll}</p>

<p>~</p>

<p>~</p>

<p>#gnb .gnb_oparea{display:none;position:absolute;top:0;left:50px;background:#fff;height:100%;width:170px;padding:20px;border-right:1px solid #dbdbdb;overflow-y:scroll;

-webkit-box-shadow: 2px 0 2px rgba(150,150,150,100.1);

-moz-box-shadow: 2px 0 2px rgba(150,150,150,0.1);

box-shadow: 2px 0 2px rgba(150,150,150,0.1);}</p>

<p>

scroll view

</p>

<p>/*gnb*/</p>

<p>::-webkit-scrollbar{width:8px;height:8px}

::-webkit-scrollbar-track{background-color:#fff}

::-webkit-scrollbar-thumb{background:#badcff99;border-radius:5px}

::-webkit-scrollbar-thumb:hover{background:#ff80ed66}

::-webkit-scrollbar-thumb:active{background:#ff2525}

::-webkit-scrollbar-button {display:none}</p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

J
JKWang
2년 전
답변 감사합니다.
서브메뉴가 아니라 회색의 메뉴 1차 메뉴가 20개 정도로 많은데 거기는 스크롤이 안생겨서요.
답변 주신 내용은 2차메뉴에 스크롤이 생기더라고요.
�
들레아빠
2년 전
거기도 스크롤 됩니다. 줄 전체를 적용 하세요.
[code]
#gnb .gnb_ul{height:100%;background:#ebebeb;width:50px;overflow-y:scroll;overflow-x:hidden}
[/code]
J
JKWang
2년 전
댓글엔 사진첨부가 안되어서 따로 답변 달았는데 확인 가능하실까요?

댓글을 작성하려면 로그인이 필요합니다.

조

#gnb .gnb_oparea

여기에도 overflow-y : auto 를 줘보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

J
JKWang
2년 전
했는데 안되용.T_T

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인