본문 바로가기
My Proect/파이널 프로젝트 - CineDate

18일차 - 헤더 서브 네비 추가 및 공지사항 화면 구현 (헤더 레이아웃 수정 예정)

형디 2024. 9. 13. 11:54

 

 

 

 

header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CineDate</title>
<link href="/css/common.css" rel="stylesheet">
<link href="/css/header.css" rel="stylesheet">
<link href="/css/font.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<link href="/css/movie.css" rel="stylesheet">
<link href="/css/date.css" rel="stylesheet">
<link href="/css/event.css" rel="stylesheet">
<link href="/css/notice.css" rel="stylesheet">
<link href="/css/footer.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
	<header>
		<div class="main--banner">
			<div id="in--wrap">
				<img src="/img/xIcon.png" alt="x" class="x--icon btn">
				<img src="/img/bannerImg.png" alt="시데 데이트 배너" width="100%">
			</div>
		</div>
		<div class="memberInfo--wrap">
			<ul class="member" id="in--wrap">
				<c:choose>
					<c:when test="${principal != null}">
						<li>
							<a href="/user/logout">로그아웃</a>
						</li>
						<li>
							<a href="/user/myPage">마이페이지</a>
						</li>
						<li>
							<a href="/home/CS">고객센터</a>
						</li>
					</c:when>

					<c:otherwise>
						<li>
							<a href="/user/signIn">로그인</a>
						</li>
						<li>
							<a href="/user/signUp">회원가입</a>
						</li>
						<li>
							<a href="/home/CS">고객센터</a>
						</li>
					</c:otherwise>
				</c:choose>

				<form action="/search/search" method="GET" class="main--total--search">
					<label class="main--search"></label>
					<input type="text" id="main--search" name="search">

					<button type="submit" class="search--btn btn"></button>
				</form>
			</ul>
		</div>
		<div class="header--logo">
			<a href="/home"><img src="/img/header_logo.png" alt="CineDate Logo"></a>
		</div>
		<nav class="nav--wrap" id="in--wrap">
			<ul class="nav--menu">
				<li class="nav--menu--li">
					<a href="/movie/movies">영화</a>
				</li>
				<li class="nav--menu--li">
					<a href="/cinema/cinema">극장</a>
				</li>
				<li class="nav--menu--li">
					<a href="/reservation/reservation">예매</a>
				</li>
				<li class="date nav--menu--li">
					매칭
					<ul class="sub--menu">
						<li><a href="/date/date">일반리스트</a></li>
						<li><a href="/date/machingList">매칭리스트</a></li>
						<li><a href="/date/popcornStore">상점</a></li>
						<li><a href="/date/profilePage">마이페이지</a></li>
					</ul>
				</li>
				<li class="nav--menu--li"><a href="/event/event">이벤트</a></li>
				<li class="nav--menu--li"><a href="/notice">공지사항</a></li>

				<ul class="mobile--wrap btn">
					<li class="bar bar01"></li>
					<li class="bar bar02"></li>
					<li class="bar bar03"></li>
				</ul>

				<div class="mobile--all--menu" style="display:none">
					<div class="all--bg" style="display: block;"></div>
					<div class="all--menu">
						<ul>
							<li><a href="/movie/movies">영화</a></li>
							<li><a href="/cinema/cinema">극장</a></li>
							<li><a href="/reservation/reservation">예매</a></li>
							<li class="arrow"><a>매칭</a>
								<ul class="dep2" style="display: none;">
									<li><a href="">추가하세효1</a></li>
									<li><a href="">추가하세효2</a></li>
									<li><a href="">추가하세효3</a></li>
									<li><a href="">추가하세효4</a></li>
								</ul></li>
							<li><a href="/event/event">이벤트</a></li>
							<li><a href="/notice">공지사항</a></li>
						</ul>
					</div>
				</div>
			</ul>
		</nav>
	</header>

	<script>
		<!-- 헤더 상단 팝업 배너 -->
		document.addEventListener('DOMContentLoaded', function() {
			var xIcon = document.querySelector('.x--icon');

			xIcon.addEventListener('click', function() {
				var mainBanner = document.querySelector('.main--banner');
				mainBanner.style.display = 'none';
			});
		});
	</script>

 

 

 

header.css
@charset "UTF-8";

header {
	width: 100%;
	position: relative;
	border-bottom: 1px solid #bababa;
}

.memberInfo--wrap {
	width: 100%;
}

.member {
	display: flex;
	justify-content: flex-end;
	height: 50px;
	align-items: center;
	gap: 15px;
	font-size: 14px;
}

.header--logo {
	width: 100%;
	height: 70px;
	border-top: 1px solid #bababa;
	border-bottom: 1px solid #bababa;
	padding: 10px 0;
	text-align: center;
}

.main--total--search {
	display: flex;
	align-items: center;
}

.search--btn {
	width: 25px;
	height: 25px;
	background-image: url("/img/search.png");
	background-size: contain;
	background-color: initial;
	border: 0;
	margin-left: 5px;
}

label.main--search {
	margin: 0;
}

#main--search {
	padding: 3px 12px;
	border-radius: 15px;
	border: 1px solid #666;
	width: 150px;
}

.date {
	color: #ff2588;
	font-weight: 600;
	position: relative;
}

.date::before {
	content: "💕";
	color: #ff2588;
	position: absolute;
	right: 20px;
	top: -7px;
	transform: rotateZ(20deg);
}

.date:hover {
	cursor: pointer;
}

.nav--menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
}

.nav--menu--li {
	width: 12.3%;
	text-align: center;
}

.sub--menu {
	width: 150px;
	height: 0;
	overflow: hidden;
	text-align: center;
	position: absolute;
	top: 27px;
	left: 50%;
	z-index: 9;
	transform: translateX(-50%);
	transition-duration: 0.3s;
	border-radius: 20px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

.sub--menu li {
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: #fff;
	color: #000;
}

.nav--menu--li:hover .sub--menu {
	height: 240px;
}

.sub--menu li:hover a {
	color: #ff2588;
	border-bottom: 1px solid #ff2588;
}

.mobile--wrap {
	width: 30px;
	height: 23px;
	position: relative;
	display: block;
}

.mobile--wrap .bar {
    position: absolute;
    right: 0;
    height: 2px;
    transition: all ease 0.3s;
    background-color: #333;
}

.mobile--wrap .bar.bar01 {
	top: 3px;
  width: 21px;
}

.mobile--wrap .bar.bar02 {
  top: 10px;
  width: 21px;
}

.mobile--wrap .bar.bar03 {
  top: 17px;
  width: 30px;
}

.mobile--all--menu{
    position: fixed;
    top: 261px;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9;
    overflow: hidden;
    transition: all ease 0.6s;
}

.all--menu{
	height: 100%;
}

.all--menu ul {
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    max-width: 1300px;
    margin: auto;
    align-content: center;
}

.main--banner{
	position: relative;
	height: 80px;
	background-image: linear-gradient(to top, #ff2589, #fff);
}

.x--icon{
	position: absolute;
	right: 0;
}

.swiper-pagination-bullet{
	background-color: rgba(255, 255, 255, 0.9) !important;
}

.swiper-pagination-bullet-active{
	background-color: #ff2588 !important;
}

 

 

 

ERROR

헤더를 3단으로 분리해서 하니까 모바일 메뉴 작업할 때 애매했다.

일단 매칭에 서브 메뉴 추가하고 레이아웃 재수정을 해야 될 거 같다.

728x90

'My Proect > 파이널 프로젝트 - CineDate' 카테고리의 다른 글

CineDate - 파이널 프로젝트  (2) 2024.09.23
19일차 - 슈퍼 리스트 화면 구현 및 기능 구현  (2) 2024.09.13
17일차 - 이메일 인증 구현 수정  (1) 2024.09.13
14일차 - 이메일 인증 구현 에러  (0) 2024.09.05
12일차 - 메인 페이지에서의 검색 기능 구현 및 배너  (4) 2024.09.03

'My Proect/파이널 프로젝트 - CineDate' Related Articles

티스토리툴바