기초공사 (html,css,javascript)
leftmenu_arrow 본문
*******html***********
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/master.css">
<link rel="stylesheet" href="/VOIS/styles/fontawesome-free-5.13.0-web/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<!-- 이코드가 있어야 script실행된다. -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
</head>
<body class="frame-wrap" oncontextmenu="return false" cz-shortcut-listen="true">
<input type="hidden" id="s_MenuId" value="SC1000S1000">
<input type="hidden" id="s_ParentId">
<input type="hidden" id="s_TreeId">
<input type="hidden" id="s_TreeName">
<input type="hidden" id="s_TreeDepth">
<div class="frame-sidebar">
<div class="div-brand-icon">
<a class="sidebar-brand d-flex align-items-center justify-content-center"
href="/VOIS/" title="Home">
<img src="/VOIS/pub/menubar/img/pvo_logo.png" height="30" width="71" alt="VOIS 솔루션 패키지">
</a>
</div>
<hr>
<div class="div-logon-user">
<ul style="width: 100%; border: 0px solid red;">
<li style="display: inline-block;"><i class="fas fa-user-circle fa-1x text-gray-600"></i></li>
<li style="display: inline-block;">시스템관리자</li>
<li style="display: inline-block; text-align: center; width: 30px;">
<a onclick="saLogOut();" style="cursor: pointer;">
<i class="fas fa-sign-out-alt"></i>
</a>
</li>
</ul>
</div>
<!-- 시스템관리자 -->
<ul class="frame-menubar">
<li class="nav-menu-group1">
<a href="#"><i class="fas fa-dot-circle"></i>
<span>데모그룹</span>
<!-- <span class="sprite arrow"></span> -->
<i class="fas fa-solid fa-chevron-up"></i>
</a>
<ul id="PV000S0000">
<li class="nav-menu-group2"><a>목소리시험</a>
<ul id="PV0000S0000">
<li id="PV0000S0001" class="nav-menu-group3" data-tree-id="PV0000S0001" data-read-write-f="W">
<a href="#" title="목소리등록">목소리등록</a>
</li>
<li id="PV0000S0003" class="nav-menu-group3" data-tree-id="PV0000S0003"
data-read-write-f="W"><a href="#" title="목소리인증">목소리인증</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>운영통계현황</a>
<ul id="PV1000S0000">
<li id="PV1000S0001" class="nav-menu-group3" data-tree-id="PV1000S0001"
data-read-write-f="W">
<a href="#" title="대시보드">대시보드</a>
</li>
<li id="PV1000S0002" class="nav-menu-group3" data-tree-id="PV1000S0002"
data-read-write-f="W">
<a href="#" title="일일통계현황">일일통계현황</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>화자인증</a>
<ul id="PV2000S0000">
<li id="PV2000S0001" class="nav-menu-group3" data-tree-id="PV2000S0001"
data-read-write-f="W">
<a href="#" title="목소리모델관리">목소리모델관리</a>
</li>
<li id="PV2000S0002" class="nav-menu-group3" data-tree-id="PV2000S0002"
data-read-write-f="W">
<a href="#" title="목소리인증관리">목소리인증관리</a>
</li>
</ul>
</li>
<li class="nav-menu-group2">
<a>엔진관리</a>
<ul id="PV3000S0000">
<li id="PV3000S0001" class="nav-menu-group3" data-tree-id="PV3000S0001"
data-read-write-f="W">
<a href="#" title="엔진설정">엔진설정</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- nav-menu-group1 데모그룹 끝-->
<li class="nav-menu-group1">
<a href="#"><i class="fas fa-dot-circle"></i>
<span>시스템관리</span>
<i class="fas fa-solid fa-chevron-up"></i>
</a>
<ul id="CC0000S0000">
<li class="nav-menu-group2">
<a>시스템정보</a>
<ul id="CC1000S0000">
<li id="CC1010S0000" class="nav-menu-group3" data-tree-id="CC1010S0000"
data-read-write-f="W">
<a href="#" title="시스템정보관리">시스템정보관리</a>
</li>
</ul>
</li>
<li class="nav-menu-group2">
<a>사용자권한</a>
<ul id="CC2000S0000">
<li id="CC2010S0000" class="nav-menu-group3" data-tree-id="CC2010S0000"
data-read-write-f="W">
<a href="#" title="사용자관리">사용자관리</a>
</li>
<li id="CC2020S0000" class="nav-menu-group3" data-tree-id="CC2020S0000"
data-read-write-f="W">
<a href="#" title="프로그램관리">프로그램관리</a>
</li>
<li id="CC2030S0000" class="nav-menu-group3" data-tree-id="CC2030S0000"
data-read-write-f="W">
<a href="#" title="권한그룹관리">권한그룹관리</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>Admin</a>
<ul id="CC3000S0000">
<li id="CC3010S0000" class="nav-menu-group3" data-tree-id="CC3010S0000"
data-read-write-f="W">
<a href="#" title="테넌트관리">테넌트관리</a>
</li>
<li id="CC3020S0000" class="nav-menu-group3" data-tree-id="CC3020S0000"
data-read-write-f="W">
<a href="#" title="작업이력관리">작업이력관리</a>
</li>
<li id="CC3030S0000" class="nav-menu-group3" data-tree-id="CC3030S0000"
data-read-write-f="W">
<a href="#" title="로그인이력">로그인이력</a>
</li>
<li id="CC3040S0000" class="nav-menu-group3" data-tree-id="CC3040S0000"
data-read-write-f="W">
<a href="#" title="공통코드관리">공통코드관리</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-menu-group1">
<a href="#"><i class="fas fa-dot-circle"></i>
<span>테스트</span>
<i class="fas fa-solid fa-chevron-up"></i>
</a>
<ul id="TS0000S0000">
<li class="nav-menu-group2">
<a>임시</a>
<ul id="TS1000S0000">
<li id="TS1000S0001" class="nav-menu-group3" data-tree-id="TS1000S0001"
data-read-write-f="W">
<a href="#" title="예약현황">예약현황</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>김승렬_테스트</a>
<ul id="TS2000S0000">
<li id="TS2000S0001" class="nav-menu-group3" data-tree-id="TS2000S0001"
data-read-write-f="W">
<a href="#" title="화면1">화면1</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>안창용_테스트</a>
<ul id="TS9000S0000">
<li id="TS5000S0000" class="nav-menu-group3" data-tree-id="TS5000S0000"
data-read-write-f="W">
<a href="#" title="안창용_소스분석">안창용_소스분석</a>
</li>
<li id="TS5000S0001" class="nav-menu-group3" data-tree-id="TS5000S0001"
data-read-write-f="W">
<a href="#" title="안창용_소스분석1">안창용_소스분석1</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>화자인증데모</a>
<ul id="SR0000S0000">
<li id="SG1010S0000" class="nav-menu-group3"
data-tree-id="SG1010S0000" data-read-write-f="W">
<a href="#" title="등록&인증">등록&인증</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>봉나례_테스트</a>
<ul id="TS4000S0000">
<li id="TS4000S0004" class="nav-menu-group3" data-tree-id="TS4000S0004"
data-read-write-f="W">
<a href="#" title="봉나례_코드분석">봉나례_코드분석</a>
</li>
</ul>
</li>
<li class="nav-menu-group2"><a>박희정_테스트</a>
<ul id="TS6000S0000"><li id="TS6000S0012" class="nav-menu-group3"
data-tree-id="TS6000S0012" data-read-write-f="W">
<a href="#" title="목소리등록">목소리등록</a>
</li>
<li id="TS6000S0013" class="nav-menu-group3" data-tree-id="TS6000S0013"
data-read-write-f="W">
<a href="#" title="일일통계현황">일일통계현황</a>
</li>
<li id="TS6000S0010" class="nav-menu-group3" data-tree-id="TS6000S0010"
data-read-write-f="W">
<a href="#" title="화자등록페이지">화자등록페이지</a>
</li>
<li id="TS6000S0011" class="nav-menu-group3" data-tree-id="TS6000S0011"
data-read-write-f="W">
<a href="#" title="목소리모델관리_임시팝업">목소리모델관리_임시팝업</a>
</li>
<li id="TS6000S0005" class="nav-menu-group3" data-tree-id="TS6000S0005"
data-read-write-f="W">
<a href="#" title="박희정_사용자관리">박희정_사용자관리</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="js/left.js"></script>
</body>
</html>
**********css************
@charset "utf-8";
@-face {
-family: 'NotoKrL';
-style: normal;
-weight: 100;
src: local('Noto Sans Light'), local('NotoSans-Light'), url(..//NotoSans-subset/NotoSans-Light.eot);
src: url(..//NotoSans-subset/NotoSans-Light.eot?#iefix) format('embedded-opentype'), url(..//NotoSans-subset/NotoSans-Light.woff2) format('woff2'),
url(..//NotoSans-subset/NotoSans-Light.woff) format('woff');
;
}
@-face {
-family: 'NotoKrR';
-style: normal;
-weight: 300;
src: local('Noto Sans Regular'), local('NotoSans-Regular'), url(..//NotoSans-subset/NotoSans-Regular.eot);
src: url(..//NotoSans-subset/NotoSans-Regular.eot?#iefix) format('embedded-opentype'), url(..//NotoSans-subset/NotoSans-Regular.woff2) format('woff2'),
url(..//NotoSans-subset/NotoSans-Regular.woff) format('woff');
}
@-face {
-family: 'NotoKrM';
-style: normal;
-weight: 500;
src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(..//NotoSans-subset/NotoSans-Medium.eot);
src: url(..//NotoSans-subset/NotoSans-Medium.eot?#iefix) format('embedded-opentype'), url(..//NotoSans-subset/NotoSans-Medium.woff2) format('woff2'),
url(..//NotoSans-subset/NotoSans-Medium.woff) format('woff');
}
@-face {
-family: 'NotoKrB';
-style: normal;
-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(..//NotoSans-subset/NotoSans-Bold.eot);
src: url(..//NotoSans-subset/NotoSans-Bold.eot?#iefix) format('embedded-opentype'), url(..//NotoSans-subset/NotoSans-Bold.woff2) format('woff2'),
url(..//NotoSans-subset/NotoSans-Bold.woff) format('woff');
}
@-face {
-family: 'NanumGothic';
-style: normal;
-weight: 400;
src: url(..//NanumGothic-Regular.eot);
src: local('NanumGothic'), url(..//NanumGothic-Regular.eot?#iefix) format('embedded-opentype'), url(..//NanumGothic-Regular.woff2) format('x-woff2'), url(..//NanumGothic-Regular.woff)
format('woff'), url(..//NanumGothic-Regular.ttf) format('truetype');
}
@-face {
-family: 'NanumGothicBold';
-style: normal;
-weight: 700;
src: url(..//NanumGothic-Bold.eot);
src: local('NotoKrB'), url(..//NanumGothic-Bold.eot?#iefix) format('embedded-opentype'), url(..//NanumGothic-Bold.woff2) format('x-woff2'), url(..//NanumGothic-Bold.woff) format('woff'),
url(..//NanumGothic-Bold.ttf) format('truetype');
}
@-face {
-family: 'Font Awesome 5 Free';
-style: normal;
-weight: 400;
src: url("../styles/awesome-free-5.13.0-web/webs/fa-regular-400.eot");
src: url("../styles/awesome-free-5.13.0-web/webs/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../styles/awesome-free-5.13.0-web/webs/fa-regular-400.woff2")
format("woff2"), url("../styles/awesome-free-5.13.0-web/webs/fa-regular-400.woff") format("woff"), url("../styles/awesome-free-5.13.0-web/webs/fa-regular-400.ttf")
format("truetype"), url("../styles/awesome-free-5.13.0-web/webs/fa-regular-400.svg#awesome") format("svg");
}
@-face {
-family: 'Font Awesome 5 Free';
-style: normal;
-weight: 900;
src: url("../styles/awesome-free-5.13.0-web/webs/fa-solid-900.eot");
src: url("../styles/awesome-free-5.13.0-web/webs/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../styles/awesome-free-5.13.0-web/webs/fa-solid-900.woff2") format("woff2"),
url("../styles/awesome-free-5.13.0-web/webs/fa-solid-900.woff") format("woff"), url("../styles/awesome-free-5.13.0-web/webs/fa-solid-900.ttf") format("truetype"),
url("../styles/awesome-free-5.13.0-web/webs/fa-solid-900.svg#awesome") format("svg");
}
.fa, .fas {
-family: 'Font Awesome 5 Free';
-weight: 900;
padding-top: 2px;
color:#014c3d;
}
.far {
-family: 'Font Awesome 5 Free';
-weight: 400;
padding-top: 2px;
}
/* css reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
-size: 100%;
}
a {
text-decoration: none;
}
body {
color: #333;
border:1px solid #333;
margin:0 auto;
/* overflow-y: hidden; */
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
/* page default */
#page_main {
min-width: 1024px;
}
/* 시스템관리자 */
.div-logon-user ul {
background:cornsilk;
}
.div-logon-user ul li{
font-size:16px;
}
.div-logon-user ul li:last-child {
float:right;
}
/* 추가작성 */
.frame-menubar li span {
display:inline-block;
color:#333;
}
.frame-menubar li a {
font-size:16px;
font-family: 'NotoKrM';
line-height:30px;
}
/* 화살표 */
.frame-menubar li a i:last-child {
float:right;
padding-right: 10px;
transition:0.5s;
display:block;
transition:0.5s;
}
/* active를 넣어서 arrow반대로.
.frame-menubar li a i:last-child.active{
transform:rotate(45deg);
background:tomato;
}
*/
/* 위와 갈등 active를 어디에 추가해야할지
.frame-menubar li a.active i:last-child{
transform:rotate(45deg);
background:tomato;
}
*/
/* a를빼고 li에 active를 넣어야함. 정답*/
.frame-menubar li.active a i:last-child{
transform:rotate(180deg);
}
/* 자식 */
.frame-menubar li ul {
display:none;
}
.frame-menubar li ul.active {
display:block;
}
.frame-menubar li ul li a {
font-size:12px;
}
/* 모양을 plus모양말고 arrow로 fontawesome으로 */
***********js************
var asideMenu = $('.frame-menubar > li');
var li_lastchild = $('asideMenu > a > i:last-child');
asideMenu.click(function(){
// $('.frame-menubar li ul').addClass('active');
// $('li_lastchild').addClass('active'); 모든 li가 나오겠찌
$(this).find('ul').slideToggle();
$(this).siblings().find('ul').slideUp();
// 모양바꾸자
// 클릭시 i의모양이 바뀐다. --css.active
// 이것의 형제는 active를 삭제한다. active를 삭제해야 원 화살표가 나오겠찌.
// $(this).addClass('active'); 틀립 toggleClass로 해줘야함.
$(this).toggleClass('active');
$(this).siblings().removeClass('active');
});
'jquery' 카테고리의 다른 글
| li 상속 (0) | 2023.03.28 |
|---|---|
| onchange (0) | 2023.03.25 |
| slideToggle (0) | 2023.03.21 |
| 21_스크롤메뉴 -each / offset().top / scrollTop() (0) | 2023.02.22 |
| tabs_jqueryui.com (0) | 2023.02.18 |
