mindol1004/Blog_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Spring][쇼핑몰 프로젝트][33] 메인화면 네비 기능

Browse Source 
https://kimvampa.tistory.com/251
This commit is contained in:
SeoJin Kim
2021-09-27 15:41:55 +09:00
parent c750ac00cc
commit 3ccf90f845
6 changed files with 181 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
VamPa/src/main/webapp/WEB-INF/views/main.jsp
View File

@@ -87,7 +87,33 @@
<div class="clearfix"></div>
</div>
<div class="navi_bar_area">
<h1>navi area</h1>
<div class="dropdown">
<button class="dropbtn">국내
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/search?type=C&cateCode=202001">교양</a>
<a href="#">테스트1</a>
<a href="#">테스트2</a>
<a href="#">테스트3</a>
<a href="#">테스트4</a>
<a href="#">테스트5</a>
<a href="#">테스트6</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">국외
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">테스트1</a>
<a href="#">테스트2</a>
<a href="#">테스트3</a>
<a href="#">테스트4</a>
<a href="#">테스트5</a>
<a href="#">테스트6</a>
</div>
</div>
</div>
<div class="content_area">
<h1>content area</h1>

66
VamPa/src/main/webapp/resources/css/main.css
View File

@@ -123,10 +123,68 @@ a{
}
/* 제품 목록 네비 */
.navi_bar_area{
width: 100%;
height: 70px;
background-color: #7696fd;
.navi_bar_area {
overflow: hidden;
background-color: #5e6b9e;
}
.navi_bar_area a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
font-weight: bold;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width:140px;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f9f9f9;
width: 466px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: inline-block;
text-align: left;
width: 80px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navi_bar_area a:hover, .dropdown:hover .dropbtn {
background-color: #475382;
}
.dropdown-content a:hover {
background-color: #ddd;
}
/* 홈페이지 메인 제품 목록 */

2
VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
View File

@@ -1,5 +1,5 @@
#Generated by Maven Integration for Eclipse
#Thu Sep 16 21:52:41 KST 2021
#Mon Sep 27 14:58:55 KST 2021
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa
m2e.projectName=VamPa
groupId=com.vam

28
VamPa_MySQL/src/main/webapp/WEB-INF/views/main.jsp
View File

@@ -87,7 +87,33 @@
<div class="clearfix"></div>
</div>
<div class="navi_bar_area">
<h1>navi area</h1>
<div class="dropdown">
<button class="dropbtn">국내
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/search?type=C&cateCode=202001">교양</a>
<a href="#">테스트1</a>
<a href="#">테스트2</a>
<a href="#">테스트3</a>
<a href="#">테스트4</a>
<a href="#">테스트5</a>
<a href="#">테스트6</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">국외
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">테스트1</a>
<a href="#">테스트2</a>
<a href="#">테스트3</a>
<a href="#">테스트4</a>
<a href="#">테스트5</a>
<a href="#">테스트6</a>
</div>
</div>
</div>
<div class="content_area">
<h1>content area</h1>

67
VamPa_MySQL/src/main/webapp/resources/css/main.css
View File

@@ -122,12 +122,71 @@ a{
}
/* 제품 목록 네비 */
.navi_bar_area{
width: 100%;
height: 70px;
background-color: #7696fd;
.navi_bar_area {
overflow: hidden;
background-color: #5e6b9e;
}
.navi_bar_area a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
margin-left: 10px;
}
.dropdown .dropbtn {
font-size: 16px;
font-weight: bold;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width:140px;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f9f9f9;
width: 466px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: inline-block;
text-align: left;
width: 80px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navi_bar_area a:hover, .dropdown:hover .dropbtn {
background-color: #475382;
}
.dropdown-content a:hover {
background-color: #ddd;
}
/* 홈페이지 메인 제품 목록 */
.content_area{
width: 100%;

2
VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
View File

@@ -1,5 +1,5 @@
#Generated by Maven Integration for Eclipse
#Thu Sep 16 21:52:42 KST 2021
#Mon Sep 27 14:58:56 KST 2021
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL
m2e.projectName=VamPa_MySQL
groupId=com.vam