메뉴바에 Bootstrap 적용

Front-End/Bootstrap 2019. 10. 2. 15:44

메뉴바에 마우스를 올리면 해당 메뉴의 색깔이 변하면서 하위 메뉴를 출력하도록 설정함



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- views/include/menu.jsp -->
<%@ include file="header.jsp"%>
<head>

//디자인을 사용하기위해 bootstrap를 stylesheet로 링크를 건다
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js%22"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel = "stylesheet" href = "/css/bootstrap.css">
 
 
</head>
 
<style>
.menubar li ul {
background: rgb(109,109,109);
display:none;  /* 평상시에는 서브메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
.dropbtn{
  background-color: black;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropbtn b{
  background-color: red;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content b {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 800px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
 
 
</style>
 
 
<center>
    <body>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Hs-Project</a>
                </div>
 
                <div>
                    <!-- 다른 기능들 링크가 걸려있는 메뉴 페이지 -->
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="${path}/home">Home</a></li>
                    
 
 
                <div class="dropdown">
                <button class="dropbtn">게시판</button>
                    <div class="dropdown-content">
                        <a href="${path}/board/list.do">회원 게시물</a>
                        <a href="${path}/board/best_list.do">베스트 게시물</a>
                    </div>
                </div>
    
                    <!-- 어떠한 아이디로든 로그인되지 않았을 경우에만 회원가입 링크를 출력시킨다. -->
                    <c:if
                        test="${sessionScope.user_id == null and sessionScope.navername == null and sessionScope.kakaonickname == null and sessionScope.facebookname == null and sessionScope.admin_id == null}">
                        <div class="dropdown">
                        <button class="dropbtn">회원</button>
                        <div class="dropdown-content">
                        <a href="${path}/member/email.do">회원가입</a>
                    </div>
                </div>
                    </c:if>
 
 
 
                    <!-- 관리자가 로그인 하지 않았을 경우에만 로그인 링크를 출력시킴 -->
                    <c:if
                        test="${sessionScope.user_id == null and sessionScope.navername == null and sessionScope.kakaonickname == null and sessionScope.facebookname == null and sessionScope.admin_id == null}">
                        
                        <div class="dropdown">
                        <button class="dropbtn">로그인</button>
                        <div class="dropdown-content">
                        <a href="${path}/admin/admin_login_view.do">관리자 로그인</a>
                        </div>
                        </div>
                    </c:if>
                    
                    
                        <div class="dropdown">
                        <button class="dropbtn">기타 기능</button>
                        <div class="dropdown-content">
                        <a href="${path}/member/smsform.do">문자 보내기</a>
                        <a href="${path}/member/e_mailform.do">이메일 보내기</a>
                        </div>
                        </div>
 
 
                        <div class="dropdown">
                        <button class="dropbtn">필독!!</button>
                        <div class="dropdown-content">
                    <a href="${path}/board/admin_board_list.do">회원 공지사항</a>
                        </div>
                        </div>
 
 
                    <c:if test="${sessionScope.admin_id != null}">
 
                        <div class="dropdown">
                        <button class="dropbtn">관리자 메뉴</button>
                            <div class="dropdown-content">
                                <a href="${path}/admin/admin_member_forced_eviction_view.do">회원강제 탈퇴</a>
                                <a href="${path}/admin/admin_member_info.do">회원 정보</a>
                        </div>
                    </div>
                    
                        
                    
                    
                        
                    
                    
                    </c:if>
                    
                    </ul>
                    
                    <div class="dropdown">
                        <button class="dropbtn b">만든이</button>
                            <div class="dropdown-content b">
                            <br><br>
                            <span style="color: green; font-weight: bold;">- 홈페이지 작성자 -</span>    <br><br>
                            이한섭 <br><br>
                            
                            <span style="color: green; font-weight: bold;">- 이메일 주소 -</span><br><br>
                            dlgkstjq623@naver.com <br><br>
                            
                            <span style="color: green; font-weight: bold;">- 휴대폰 번호 -</span><br><br>
                            010-7285-1455 <br><br>
                            
                        </div>
                    </div>
                    
                    
                </div>
            </div>
            
            
        </nav>
 
    </body>
    
</center>
 
</html>
cs






저작자표시

'Front-End > Bootstrap' 카테고리의 다른 글

메인페이지 꾸며보기 (내 프로젝트에 적용)  (0) 2019.10.04
전체적으로 bootstrap 적용 (일부)  (0) 2019.10.02
로그인 폼에 bootstrap 적용  (0) 2019.10.02
Bootstrap 다운 및 스프링 프로젝트에 적용  (0) 2019.09.27
Bootstrap (부트스트랩) 이란??  (0) 2019.09.27
:

티스토리툴바