object(HotopayModel)#862 (23) {
["error"]=>
int(0)
["message"]=>
string(7) "success"
["variables"]=>
array(0) {
}
["httpStatusCode"]=>
int(200)
["module"]=>
string(7) "hotopay"
["module_info"]=>
NULL
["origin_module_info"]=>
NULL
["module_config"]=>
NULL
["module_path"]=>
string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/"
["xml_info"]=>
NULL
["module_srl"]=>
NULL
["mid"]=>
NULL
["act"]=>
NULL
["template_path"]=>
NULL
["template_file"]=>
NULL
["layout_path"]=>
NULL
["layout_file"]=>
NULL
["edited_layout_file"]=>
NULL
["stop_proc"]=>
bool(false)
["user"]=>
object(Rhymix\Framework\Helpers\SessionHelper)#861 (20) {
["member_srl"]=>
int(0)
["user_id"]=>
NULL
["user_name"]=>
NULL
["nick_name"]=>
NULL
["email_address"]=>
NULL
["phone_number"]=>
NULL
["homepage"]=>
NULL
["blog"]=>
NULL
["birthday"]=>
NULL
["denied"]=>
NULL
["status"]=>
NULL
["is_admin"]=>
string(1) "N"
["is_site_admin"]=>
NULL
["profile_image"]=>
NULL
["image_name"]=>
NULL
["image_mark"]=>
NULL
["signature"]=>
NULL
["description"]=>
NULL
["group_list"]=>
array(0) {
}
["menu_list"]=>
array(0) {
}
}
["request"]=>
object(Rhymix\Framework\Request)#10 (13) {
["method"]=>
string(3) "GET"
["compat_method"]=>
string(3) "GET"
["url"]=>
string(32) "javascript/357480/comment/464709"
["hostname"]=>
string(8) "eond.com"
["domain"]=>
NULL
["protocol"]=>
string(5) "https"
["callback_function"]=>
string(0) ""
["_route_status":protected]=>
int(200)
["_route_options":protected]=>
object(stdClass)#11 (5) {
["cache_control"]=>
bool(true)
["check_csrf"]=>
bool(true)
["is_forwarded"]=>
bool(false)
["is_indexable"]=>
bool(true)
["enable_session"]=>
bool(true)
}
["module"]=>
string(5) "board"
["mid"]=>
string(10) "javascript"
["act"]=>
string(16) "dispBoardContent"
["args"]=>
array(5) {
["page"]=>
int(4)
["document_srl"]=>
string(6) "357480"
["comment_srl"]=>
string(6) "464709"
["mid"]=>
string(10) "javascript"
["act"]=>
string(16) "dispBoardContent"
}
}
["ajaxRequestMethod"]=>
array(2) {
[0]=>
string(6) "XMLRPC"
[1]=>
string(4) "JSON"
}
["gzhandler_enable"]=>
bool(true)
}
// family site
function startFamilySiteScroll() {
setTimeout("slideFamilySite()", 10);
}
function slideFamilySite() {
el = document.getElementById("site_list");
if (el.heightPos == null || (el.isDone && el.isOn == false)) {
el.isDone = false;
el.heightPos = 0;
el.heightTo = 110;
} else if (el.isDone && el.isOn){
el.isDone = false;
el.heightTo = 0;
}
if (Math.abs(el.heightTo - el.heightPos) > 1) {
el.heightPos += (el.heightTo - el.heightPos) / 10;
el.style.height = el.heightPos + "px";
startFamilySiteScroll();
} else {
if (el.heightTo == 110) {
el.isOn = true;
} else {
el.isOn = false;
}
el.heightPos = el.heightTo;
el.style.height = el.heightPos + "px";
el.isDone = true;
}
}
자바스크립트를 이용하여 DIV를 셀렉트박스 형태로 만드는 소스입니다.
2013년 3월에 만든 이온디 포털 레이아웃에 사용된 소스인데, 너무 오래 되서 출처는 모르겠습니다.
저 이미지 자체로 배경그림으로 이뤄져있어서 이미지는 만들기 나름입니다.
http://codepen.io/eond/details/rVWyPV/
1. html
<div id="family_site">
<h4 onclick="slideFamilySite()"><span>Family Site</span></h4>
<div id="site_list">
<ul>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
</ul>
</div>
</div>
<h4 onclick="slideFamilySite()"><span>Family Site</span></h4>
<div id="site_list">
<ul>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
<li><a href="#" onclick="window.open(this.href);return false;">이온디</a></li>
</ul>
</div>
</div>
2. CSS
#family_site {
position: relative;
float:left;
top: 7px;
left: -10px;
padding:0px;
background: url('http://eond.com/layouts/eond_portal_main_2col_right_bb/images/default/bg_family_site.gif') no-repeat;
}
#family_site h4 {
cursor: pointer;
width: 107px;
height: 16px;
margin: 0;
}
#family_site span {
display: none;
}
#family_site #site_list {
position: absolute;
bottom: 15px;
border: solid #d5d5d5;
border-width:1px 1px 0 1px;
background-color: #fff;
width: 105px;
height: 0;
margin:0;
overflow: auto;
}
#family_site #site_list a:hover,
#family_site #site_list a:focus {color:#0066cc; text-decoration:none;}
#family_site #site_list ul {
list-style: none;
margin:0;
padding:5px;
text-align:left;
overflow:hidden;
}
#family_site #site_list ul li {
display:block;
color:#666;
line-height:14px !important;
font:11px "돋움", Dotum;
letter-spacing:-1px;
}
position: relative;
float:left;
top: 7px;
left: -10px;
padding:0px;
background: url('http://eond.com/layouts/eond_portal_main_2col_right_bb/images/default/bg_family_site.gif') no-repeat;
}
#family_site h4 {
cursor: pointer;
width: 107px;
height: 16px;
margin: 0;
}
#family_site span {
display: none;
}
#family_site #site_list {
position: absolute;
bottom: 15px;
border: solid #d5d5d5;
border-width:1px 1px 0 1px;
background-color: #fff;
width: 105px;
height: 0;
margin:0;
overflow: auto;
}
#family_site #site_list a:hover,
#family_site #site_list a:focus {color:#0066cc; text-decoration:none;}
#family_site #site_list ul {
list-style: none;
margin:0;
padding:5px;
text-align:left;
overflow:hidden;
}
#family_site #site_list ul li {
display:block;
color:#666;
line-height:14px !important;
font:11px "돋움", Dotum;
letter-spacing:-1px;
}
3. Script
// family site
function startFamilySiteScroll() {
setTimeout("slideFamilySite()", 10);
}
function slideFamilySite() {
el = document.getElementById("site_list");
if (el.heightPos == null || (el.isDone && el.isOn == false)) {
el.isDone = false;
el.heightPos = 0;
el.heightTo = 110;
} else if (el.isDone && el.isOn){
el.isDone = false;
el.heightTo = 0;
}
if (Math.abs(el.heightTo - el.heightPos) > 1) {
el.heightPos += (el.heightTo - el.heightPos) / 10;
el.style.height = el.heightPos + "px";
startFamilySiteScroll();
} else {
if (el.heightTo == 110) {
el.isOn = true;
} else {
el.isOn = false;
}
el.heightPos = el.heightTo;
el.style.height = el.heightPos + "px";
el.isDone = true;
}
}
댓글 0
댓글작성칸으로