updated top menu

joe-suh · Jan 29, 2015 · 00002e0 · 00002e0
1 parent d9fe8de
commit 00002e0
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 243 deletions.
diff --git a/church.html b/church.html
@@ -14,7 +14,6 @@
 <link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
 <script src="js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="js/move-top.js"></script>
-<script type="text/javascript" src="js/easing.js"></script>
 <script src="js/jquery.easydropdown.js"></script>
 <script src="js/submenu.js"></script>
 <script src="phonegap.js"></script>
@@ -23,9 +22,8 @@
 <script type="text/javascript">
 
 	function changeContext(menu) {
-		var menuLinks = document.getElementById('w3-menu-links');
-		menuLinks.style.display = "none";
-
+		toggleTopMenu();
+
 		var submenu1 = document.getElementById('vision');
 		var submenu2 = document.getElementById('pastor_lee');
 
@@ -45,29 +43,26 @@
 		}
 
 	}
+
 </script>
 
 </head>
-<body>
-
-	<div class="header">
-		<div id="w3-masthead">
-			<div id="w3-universal-nav">
-				<ul id="header_top">
-					<h1>교회 소개</h1>
-				</ul>
-				<div id="w3-mobile-options">
-					<li class="video-menu-trigger"><a href="#" onClick="toggleTopMenu();return false;">Menu</a></li>
-					<li class="home-trigger"><a href="index.html">Home</a></li>
-				</div>
-				<ul id="w3-menu-links" style="display: none;">
-					<li><a href="#" onClick="changeContext('교회 비전');return false;">교회 비전</a></li>
-					<li><a href="#" onClick="changeContext('담임 목사님 소개');return false;">담임 목사님 소개</a></li>
-				</ul>
-			</div>
-		</div>
-	</div>
+<body class="other_background" onClick="handleOnClick();return false;">
 
+	<div class="top_menu_bar">
+		<h1>교회 소개</h1>
+	</div>
+	<div>
+		<div class="video-menu-trigger" onClick="toggleTopMenu();return false;"></div>
+	</div>
+	<div>
+		<div class="home-trigger" onClick="goHome();return false;"></div>
+	</div>
+	<ul class="sub-menu" id="sub-menu-links" style="display: none;">
+		<li onClick="changeContext('교회 비전');return false;">교회 비전</li>
+		<li onClick="changeContext('담임 목사님 소개');return false;">담임 목사님 소개</li>
+	</ul>
+
 	<div class="grid_1_of_3 images_1_of_3" style="display:block" id="vision">
 		<h3>비전 - 예수님의 꿈을 이루는 교회</h3>
 
@@ -141,13 +136,6 @@ <h3>담임 목사님 소개</h3>
 		<br> <br> <br> <br> 
 	</p>
 
-	<div class="top_in_footer"><a href="#" class="btn">TOP</a></div>
-	<!--
-   <div class="footer">
-	<div class="copyright">All Rights Reservered by Hanmaum. Badenerstrasse 23, 65824, Schwalbach/Ts.</div>
-   </div>
--->
-
 </body>
 
 </html>
diff --git a/css/style.css b/css/style.css
@@ -149,10 +149,6 @@ ul#w3-unav-links li {
 	background: url(../images/nav_icon.png);
 }
 
-.video-menu-trigger {
-	background: url(../images/nav_icon.png);
-}
-
 #w3-mobile-options li a {
 	display: block;
 	color: transparent;
@@ -161,32 +157,10 @@ ul#w3-unav-links li {
 	cursor: pointer;
 }
 
-#w3-menu-links li a {
-	color: #fff;
-	font-size: 13px;
-	text-transform: uppercase;
-	display: block;
-}
-
-#w3-menu-links li a:hover {
-	color: #F1E27F;
-}
-
 #w3-mobile-options #w3-search-trigger a {
 	background: url(../images/search.png) no-repeat 5px;
 }
 
-#w3-menu-links {
-	background: #000;
-	padding: 0px 10px;
-	display: none;
-}
-
-#w3-menu-links li {
-	padding: 10px 0;
-	background: none;
-	border-bottom: 1px solid #333;
-}
 
 #w3-search-module {
 	background: #000;
@@ -234,6 +208,7 @@ form input[type="text"] {
 	border-radius: .2em;
 }
 
+
 .main_background {
 	background: url(../images/background.jpg) no-repeat center bottom fixed;
 	-webkit-background-size: cover;
@@ -278,7 +253,6 @@ form input[type="text"] {
     background-size: 40px;
 	position: fixed;
     display: block;
-    float: right;
     top: 0;
 	right: 0;
     width: 40px;
@@ -287,6 +261,42 @@ form input[type="text"] {
 }
 
 
+.sub-menu {
+	position: fixed;
+    top: 45px;
+    width: 100%;
+}
+
+
+.video-menu-trigger {
+	background: url(../images/nav_icon.png);
+    background-size: 40px;
+	position: fixed;
+    display: block;
+    top: 0;
+	right: 40px;
+    width: 40px;
+    height: 40px;
+    z-index: 3;
+}
+
+
+#sub-menu-links {
+	padding: 0px 0px;
+}
+
+#sub-menu-links li {
+	padding: 10px 50px;
+	background: rgba(89, 141, 131, 0.95);	/*#598db5;*/
+	text-align: right;
+	color: #fff;
+	font-size: 15px;
+	font-weight: bold;
+	text-transform: uppercase;
+	/*border-bottom: 1px solid #333;*/
+}
+
+
 .right_menu_bar {
 	padding: 0 10px;
 	float: right;

diff --git a/images/bullet_icon.png b/images/bullet_icon.png
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
 <link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
 <script src="js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="js/move-top.js"></script>
-<script type="text/javascript" src="js/easing.js"></script>
 <script src="js/jquery.easydropdown.js"></script>
 <script src="phonegap.js"></script>
 

diff --git a/js/easing.js b/js/easing.js
diff --git a/js/submenu.js b/js/submenu.js
@@ -8,15 +8,39 @@
  * Licensed under the MIT License:
  *   http://www.opensource.org/licenses/mit-license.php
  */
-
+var isClickHandled=false;
 
 function toggleTopMenu() {
-	var menuLinks = document.getElementById('w3-menu-links');
+	var menuLinks = document.getElementById('sub-menu-links');
 	if (menuLinks.style.display != "none") {
 		menuLinks.style.display = "none";
+		isTopMenuShown=false;
 	} else {
 		menuLinks.style.display = "block";
+		isTopMenuShown=true;
+	}
+
+	isClickHandled = true;
+	return false;
+}
+
+function goHome() {
+	isClickHandled = true;
+	location.href='index.html';
+	return false;
+}
+
+
+function handleOnClick() {
+	if ( isClickHandled )
+	{
+		isClickHandled = false;
+		return false;
 	}
+	var menuLinks = document.getElementById('sub-menu-links');
+	if (menuLinks.style.display != "none") {
+		menuLinks.style.display = "none";
+	} 
 
 	return false;
 }