이전
목록
다음
거

full-down메뉴[펌]

거친들판
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 19년 전 · 3220 · 2
<html>
<head>
<title>http://www.blueb.co.kr</title>
<style>
#chromemenu{
width: 99%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://www.blueb.co.kr/SRC/javascript/image4/chromebg.gif) center center repeat-x; /*Theme Change here*/
margin-left: 0;
padding-left: 0;
margin: 0;
float: left;
font: bold 11px tahoma;
}


#chromemenu ul li{
display: inline;
}


#chromemenu ul li a{
float: left;
color: #7F7F7F;
font-weight: bold;
padding: 6px 12px 6px 7px;
text-decoration: none;
background: url(http://www.blueb.co.kr/SRC/javascript/image4/divider.gif) center right no-repeat; /*Theme Change here*/
}

#chromemenu ul li a:hover{
color: #494949;
}

#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*Theme Change here*/
border-bottom-width: 0;
font:normal 11px tahoma;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #F0F0F0;
}
</style>

<script type="text/javascript">
<!--
//Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated: Jan 1st, 06'

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all,

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

showhide:function(obj, e, visible, hidden){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden"
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e, "visible", "hidden")
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay)
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
}
}
//-->
</script>

</head>

<body>

<!--1차메뉴-->
<div id="chromemenu">
<ul>
<li><a href="http://www.www.blueb.co.kr/">HOME</a></li>
<li><a href="http://www.www.blueb.co.kr/" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">BLUEB</a></li>
<li><a href="http://www.www.blueb.co.kr/" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')">NEWS</a></li>
<li><a href="http://www.www.blueb.co.kr/" onMouseover="cssdropdown.dropit(this,event,'dropmenu3')">검색엔진</a></li>
</ul>
</div>


<!--2차메뉴-->
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.www.blueb.co.kr/">BlueB</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-1</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-2</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-3</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-4</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-5</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-6</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-7</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-8</a>
<a href="http://www.www.blueb.co.kr/">Submenu 1-9</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.www.blueb.co.kr/">KBS 2</a>
<a href="http://www.www.blueb.co.kr/">KBC 1</a>
<a href="http://www.www.blueb.co.kr/">MBC</a>
<a href="http://www.www.blueb.co.kr/">SBS</a>
</div>

<!--3rd anchor link and menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.www.blueb.co.kr//">Google</a>
<a href="http://www.www.blueb.co.kr/">Yahoo</a>
<a href="http://www.www.blueb.co.kr/">MSN</a>
</div>

</body>

</html>

blueb 사이트에서 퍼왔습니다.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
#개발자팁 #개발자 #팁자료실 #javascript
|

댓글 2개

좋좋아그누
프로필 보기이 회원 글보기이 회원의 댓글보기
 18년 전
좋은 소스 감사합니다^^ 유용하게 잘 사용 하겠습니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
19년 전 조회 2,221
19년 전 조회 1,827
19년 전 조회 2,020
19년 전 조회 2,282
19년 전 조회 2,039
19년 전 조회 1,824
19년 전 조회 1,889
19년 전 조회 3,382
19년 전 조회 2,242
19년 전 조회 2,101
19년 전 조회 4,597
19년 전 조회 5,218
19년 전 조회 3,390
19년 전 조회 3,131
19년 전 조회 3,726
19년 전 조회 2,267
19년 전 조회 2,626
19년 전 조회 2,931
19년 전 조회 2,996
19년 전 조회 2,594
19년 전 조회 1,861
19년 전 조회 3,640
19년 전 조회 2,222
19년 전 조회 2,623
19년 전 조회 2,690
19년 전 조회 3,121
19년 전 조회 5,445
19년 전 조회 2,724
19년 전 조회 3,552
19년 전 조회 4,488
19년 전 조회 2,755
19년 전 조회 2,689
19년 전 조회 4,278
19년 전 조회 2,978
19년 전 조회 3,223
19년 전 조회 2,433
19년 전 조회 2,440
19년 전 조회 2,230
19년 전 조회 3,531
19년 전 조회 2,343
19년 전 조회 3,031
19년 전 조회 1,970
19년 전 조회 5,535
19년 전 조회 3,799
19년 전 조회 4,546
19년 전 조회 3,290
19년 전 조회 2,768
19년 전 조회 4,159
19년 전 조회 2,879
19년 전 조회 3,220
19년 전 조회 3,190
19년 전 조회 4,409
19년 전 조회 3,345
19년 전 조회 3,239
19년 전 조회 3,931
19년 전 조회 3,218
19년 전 조회 2,449
19년 전 조회 2,459
19년 전 조회 2,399
19년 전 조회 3,020
19년 전 조회 2,724
19년 전 조회 3,576
19년 전 조회 3,434
19년 전 조회 2,045
19년 전 조회 2,973
19년 전 조회 8,058
19년 전 조회 2,735
19년 전 조회 3,351
19년 전 조회 3,103
19년 전 조회 3,212
19년 전 조회 2,464
19년 전 조회 2,687
19년 전 조회 4,290
19년 전 조회 2,471
19년 전 조회 4,468
19년 전 조회 2,623
19년 전 조회 2,303
19년 전 조회 2,553
19년 전 조회 2,110
19년 전 조회 2,637
19년 전 조회 2,431
19년 전 조회 3,300
19년 전 조회 2,077
19년 전 조회 3,754
19년 전 조회 2,928
19년 전 조회 3,650
19년 전 조회 3,678
19년 전 조회 3,379
19년 전 조회 5,672
19년 전 조회 2,399
19년 전 조회 2,447
19년 전 조회 2,551
19년 전 조회 3,619
19년 전 조회 3,949
19년 전 조회 3,967
19년 전 조회 2,586
19년 전 조회 2,613
19년 전 조회 2,912
19년 전 조회 3,221
19년 전 조회 2,661
이전 첫 페이지 다음
글쓰기