<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Cross Domain</title>
<meta name="description" content="Testing Iframe Height plugin" />
<meta name="author" content="Ilker Guller" />
<meta name="viewport" content="width=device-width">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
html, body{
height: 100%; overflow:hidden;
}
body { margin: 0; }
.snm-menu-bar {
background: #0c4da2;
display: inline-block;
width: 100%;
}
.snm-menu { margin: 0; padding: 0; }
.snm-menu li {
float: left;
list-style:none;
position: relative;
}
.snm-menu li:hover { background: white; }
.snm-menu li:hover>a { color: #0c4da2; }
.snm-menu a {
color: white;
display: block;
padding: 10px 20px;
text-decoration: none;
}
.snm-menu ul {
background: #eee;
border: 1px solid silver;
display: none;
padding: 0;
position: absolute;
left: 0;
top: 100%;
width: 180px;
}
.snm-menu ul li { float: none; }
.snm-menu ul li:hover { background: #ddd; }
.snm-menu ul li:hover a { color: black; }
.snm-menu ul a { color: black; }
.snm-menu ul ul { left: 100%; top: 0; }
.snm-menu ul ul li {float:left; margin-right:10px;}
.multi-menu-bar {
background: #0c4da2;
width: 100%;
display: inline-block;
}
.multi-menu { padding: 0; margin: 0; }
.multi-menu li { float: left; list-style:none; }
.multi-menu>li:hover { background: white; position: relative; }
.multi-menu>li:hover a { color: black; }
.multi-menu a {
text-decoration: none;
display: block;
padding: 10px 20px;
color: white;
}
.multi-menu div {
background: white;
border-radius: 0 0 4px 4px;
box-shadow: 0 3px 6px #ccc;
display: table;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
min-width: 150px;
}
.multi-menu div a { color: black; padding: 5px 10px; }
.multi-menu ul {
padding: 0;
margin: 0;
display: table-cell;
}
.multi-menu div li {
color: #000;
float: none;
padding: 3px 10px;
}
.multi-menu div li:hover { background: #eee; }
.multi-menu div li:hover a { color: black; }
.multi-menu div ul:not(:first-child) { border-left: 1px solid silver; }
.multi-menu .dropdown-header {
padding: 3px 20px;
font-size: 12px;
color: #999 !important;
background: white !important;
}
.multi-menu .divider {
height: 1px;
margin: 4px 2px;
padding: 0;
background: #ddd !important;
}
</style>
<script>
$(function(){
$(".snm-menu li").hover(function(){
$('ul:first',this).show();
}, function(){
$('ul:first',this).hide();
});
$(".snm-menu>li:has(ul)>a").each( function() {
$(this).html( $(this).html()+' ∨' );
});
$(".snm-menu ul li:has(ul)")
.find("a:first")
.append("<p style='float:right;margin:-3px'>▸</p>");
$(".multi-menu>li:has(ul)>a").each( function() {
$(this).html( $(this).html()+' ∨' );
});
$(".multi-menu li").hover(function(){
$('div',this).show();
}, function(){
$('div',this).hide();
});
});
</script>
</head>
<body>
<div class='snm-menu-bar'>
<ul class="snm-menu">
<li><a href="#">Service Name</a></li>
<li><a href="#">1번 메뉴</a></li>
<li><a href="#">2번 메뉴</a>
<ul>
<li><a href="#">2-A 메뉴</a></li>
<li><a href="#">2-B 메뉴</a>
<ul>
<li><a href="#">2-B-1 메뉴</a></li>
<li><a href="#">2-B-2 메뉴</a></li>
</ul>
</li>
<li><a href="#">2-C 메뉴</a></li>
<li><a href="#">2-D 메뉴</a>
<ul>
<li><a href="#">2-D-1 메뉴</a></li>
<li><a href="#">2-D-2 메뉴</a></li>
<li><a href="#">2-D-3 메뉴</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">3번 메뉴</a>
<ul>
<li><a href="#">3-A 메뉴</a></li>
<li><a href="#">3-B 메뉴</a></li>
</ul>
</li>
<li><a href="#">4번 메뉴</a></li>
</ul>
</div>
<div class='multi-menu-bar'>
<ul class="multi-menu">
<li><a href="#">홈</a></li>
<li><a href="#">1번 메뉴</a></li>
<li><a href="#">2번 메뉴</a>
<div style='width:300px;'>
<ul>
<li class='dropdown-header'>헤더 2A</li>
<li><a href="#">2A-1 메뉴</a></li>
<li><a href="#">2A-2 메뉴</a></li>
<li><a href="#">2A-3 메뉴</a></li>
<li><a href="#">2A-4 메뉴</a></li>
</ul>
<ul>
<li><a href="#">2B-1 메뉴</a></li>
<li><a href="#">2B-2 메뉴</a></li>
<li class="divider"></li>
<li class='dropdown-header'>헤더 2B</li>
<li><a href="#">2B-3 메뉴</a></li>
</ul>
</div>
</li>
<li><a href="#">3번 메뉴</a>
<div>
<ul>
<li><a href="#">3-1 메뉴</a></li>
<li class="divider"></li>
<li><a href="#">3-2 메뉴</a></li>
<li><a href="#">3-3 메뉴</a></li>
</ul>
</div>
</li>
<li><a href="#">4번 메뉴</a></li>
</ul>
</div>
<iframe id="autoIframe" src="http://127.0.0.1:8080/hello/inpage" width="100%" height="100%" style="background-color:#cccccc;border:0px solid gray;"></iframe>
</body>
</html>
