Skip to content

Commit

Permalink
feature: navbar hover
Browse files Browse the repository at this point in the history
  • Loading branch information
junseok0304 committed Feb 5, 2023
1 parent 9ee9469 commit 950db49
Show file tree
Hide file tree
Showing 14 changed files with 378 additions and 13 deletions.
4 changes: 1 addition & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,9 @@ <h1>"모의" 수강신청시스템 로그인</h1><h2 style="color: red;">모의
<input type="text" id="txtUserID" name="txtUserID" placeholder="아이디를 입력하세요(아이디는 학번입니다.)">
<label>패스워드</label>
<input type="password" id="txtPwd" name="txtPwd" placeholder="패스워드를 입력하세요">
<button type="button" class="btn-login" id="btn-login" onclick="location.href='./main.html'">로그인</button>
<button type="button" class="btn-login" id="btn-login" onclick="location.href='./test.html'">로그인</button>
<div class="login-link">
<a href="./pwreset.html">비밀번호 초기화</a>
<!-- <span class="split"></span>
<a href="http://forest.skhu.ac.kr/Gate/OPEN/UniSearchAccount.aspx" target="_blank">계정 찾기</a> -->
</div>
</form>
</div>
Expand Down
2 changes: 1 addition & 1 deletion main.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<header>
<div class="wrap-header">
<div class="is-left" onclick="location.href='./main.html'" style="cursor:pointer;" title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right">
<ul class="nav-menu">
Expand Down
45 changes: 45 additions & 0 deletions menudropdown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
function myFunction1() {
document.getElementById("myDropdown1").classList.toggle("show");
}

function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}

function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}

function myFunction4() {
document.getElementById("myDropdown4").classList.toggle("show");
}

function myFunction5() {
document.getElementById("myDropdown5").classList.toggle("show");
}

window.onclick = function (event) {
if (!event.target.matches('#dropbtn1')) {
let dpd = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dpd.length; i++) {
let openDropdown = dpd[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

window.onclick = function (event) {
if (!event.target.matches('#dropbtn2')) {
let dropdowns2 = document.getElementsByClassName("dropdown-content");
let j;
for (j = 0; j < dropdowns.length; j++) {
let openDropdown = dropdowns2[j];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
2 changes: 1 addition & 1 deletion realsugangbasket.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./sugangsinchung.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
2 changes: 1 addition & 1 deletion realsugangbasket2.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./sugangsinchung.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
2 changes: 1 addition & 1 deletion realsugangsinchung.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./sugangsinchung.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
2 changes: 1 addition & 1 deletion realsugangsinchung2.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./sugangsinchung.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
2 changes: 1 addition & 1 deletion realsugangsinchungresult.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./sugangsinchung.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
65 changes: 64 additions & 1 deletion resources/css/ui.css
Original file line number Diff line number Diff line change
Expand Up @@ -3121,7 +3121,7 @@ body[class*=jconfirm-no-scroll-] {
direction: rtl
}

.jconfirm.jconfirm-rtl div.jconfirm-closeIcon {
.jconfirm.jconfirm-rtl `.jconfirm-closeIcon {
left: 10px;
right: auto
}
Expand Down Expand Up @@ -3886,6 +3886,69 @@ body.main>main {
padding: 20px
}

/* Dropdown Button */
.dropbtn {
background-color: #5c95e6;
color: rgb(241, 241, 241);
padding: 12px;
margin-top: 4px;
font-size: 15.5px;
font-weight: 800;
opacity: .8;
font-family: 'Courier New', Courier, monospace;
border: none;
cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #5c95e6;
color: rgb(255, 255, 255);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
margin-top: 11px;
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-left: 2px;
border-style: solid;
border-color: #5c95e6;
border-width: 2px;
border-radius: 3.9px;
background-color: #fffffff2;
min-width: 130px;
box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.2);
z-index: 1;
-webkit-transition: all .3s;
transition: all .3s
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}

.nav-menu {
overflow: hidden;
width: 100%
Expand Down
2 changes: 1 addition & 1 deletion sugangbasket.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./main.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
2 changes: 1 addition & 1 deletion sugangjehan.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./main.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
2 changes: 1 addition & 1 deletion sugangsinchung.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="wrap-header">
<div class="is-left" onclick="location.href='./main.html'" style="cursor:pointer;"
title="홈(Home)">
<span>모의수강신청</span>
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right" style="display: block;">
<ul class="nav-menu">
Expand Down
149 changes: 149 additions & 0 deletions test.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
<meta content="date=no" name="format-detection">
<meta content="telephone=no" name="format-detection">
<meta content="address=no" name="format-detection">
<title>성공회대학교 모의수강신청시스템</title>
<link href="./resources/css/ui.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="./resources/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="./resources/img/favicon.ico" type="image/x-icon">
</head>

<body class="main">
<!-- 네브바 스크립트 -->
<script type="text/javascript" src="menudropdown.js"></script>
<!-- 네브바 스크립트 종료 -->
<div class="wrap-loader hidden"><span class="loading-helper"></span>
<div class="loader"></div>
<div class="loading-text">Loading</div>
</div>
<span class="to-top"></span>
<header>
<div class="wrap-header">
<div class="is-left" onclick="location.href='./main.html'" style="cursor:pointer;" title="홈(Home)">
<span style="color:red;">모의수강신청</span>
</div>
<div class="is-right">
<ul class="nav-menu">
<!-- 여기서부터 상단 네브바 -->
<div class="dropdown">
<button onclick="myFunction1()" id="dropbtn1" class="dropbtn">수강신청▾</button>
<div id="myDropdown1" class="dropdown-content">
<a href="./sugangsinchung.html">신청</a><hr>
<a href="#" onclick="alert('아직 준비중인 기능입니다!')">결과조회</a>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction2(event)" id="dropbtn2" class="dropbtn">수강바구니▾</button>
<div id="myDropdown2" class="dropdown-content">
<a href="./sugangbasket.html">신청</a><hr>
<a href="#" onclick="alert('아직 준비중인 기능입니다!')">결과조회</a>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction3()" id="dropbtn3" class="dropbtn">제한수업▾</button>
<div id="myDropdown3" class="dropdown-content">
<a href="./sugangjehan.html">신청</a><hr>
<a href="#" onclick="alert('아직 준비중인 기능입니다!')">결과조회</a>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction4()" id="dropbtn4" class="dropbtn">대체과목재수강▾</button>
<div id="myDropdown4" class="dropdown-content">
<a href="#" onclick="alert('아직 준비중인 기능입니다!')">신청</a><hr>
</div>
</div>
<div class="dropdown">
<button onclick="myFunction5()" id="dropbtn5" class="dropbtn">수강철회▾</button>
<div id="myDropdown5" class="dropdown-content">
<a href="#" onclick="alert('아직 준비중인 기능입니다!')">신청</a><hr>
<a href="#" onclick="alert('아직 준비중인 기능입니다!')">결과조회</a>
</div>
</div>
<!-- 네브바 종료 -->
</ul>
<div class="user-info">
<div><span class="is-id">2023140000</span><span>홍길동</span><br>
<span>공학계 IT융합자율학부</span>
<span>1학년</span>
</div>
<button type="button" class="btn-sub" id="btn" onclick="location.href='./index.html'">로그아웃</button>
</div>
</div>
<div class="m-menu" onclick="location.href='./realsugang.html'"></div>
</div>
</header>
<main class="s-contents" id="s-contents">
<div>
<style>
.tbl-detail:hover tbody tr:hover td {
background-color: #e5f0ff;
border-color: #e5f0ff;
}
</style>
<div class="home-box mt-15">
<h1>성공회대학교 모의수강신청 시스템</h1>
<h2>2023학년도 1학기</h2>
</div>
<div class="sw-header mt-20">
<h1>모의수강신청 일정</h1>
</div>
<div class="wrap-content">
<table class="tbl-detail">
<thead>
<tr>
<th>구분</th>
<th>학년</th>
<th>입장 시각</th>
<th>시작 시각</th>
<th>종료 시각</th>
</tr>
</thead>
<tbody>
<tr style="background-color:#ffffff">
<td class="alignC">수강 바구니 신청 기간</td>
<td class="alignC">전체</td>
<td class="alignC"></td>
<td class="alignC">2023-01-31(화) 10:00</td>
<td class="alignC">2023-02-05(일) 23:59</td>
</tr>

<tr style="background-color:#ffe4e4">
<td class="alignC">본수강(학기차별 수강신청) 기간</td>
<td class="alignC">전체</td>
<td class="alignC">2023-02-06(월) 09:00</td>
<td class="alignC">2023-02-06(월) 10:00</td>
<td class="alignC">2023-02-06(월) 17:00</td>
</tr>

<tr style="background-color:#ffffff">
<td class="alignC">전체 수강 기간</td>
<td class="alignC">전체</td>
<td class="alignC">2023-02-07(화) 09:00</td>
<td class="alignC">2023-02-07(화) 10:00</td>
<td class="alignC">2023-02-07(화) 17:00</td>
</tr>

<tr style="background-color: #ffffff">
<td class="alignC">제한수업 신청 기간</td>
<td class="alignC">전체</td>
<td class="alignC"></td>
<td class="alignC">2023-02-08(수) 10:00</td>
<td class="alignC">2023-02-08(수) 17:00</td>
</tr>

</tbody>
</table>
</div>
</div>
</main>

</body>

</html>
Loading

0 comments on commit 950db49

Please sign in to comment.