최신의 웹브라우저는 지원을 하지만 IE 구버전인 경우는 가상 클래스를 지원하지 않아서 드랍다운 메뉴를 구현하려면 CSS만으로는 안되고 자바스크립트를 추가해야했습니다. 우선 CSS만으로 드랍다운 메뉴를 구현하는 방법을 알아보고 구버전 IE를 위한 자바스크립트 코드를 추가하는 방법을 알아봅니다.
우선 메뉴를 구성합니다.
<body>
다음은 CSS를 구성합니다.
그다음으로 자바스크립트 코드를 추가합니다.
우선 메뉴를 구성합니다.
<body>
<ul>
<li>Sunfishes
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li>Grunts
<ul>
<li><a href="">Smallmouth grunt
</a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li>
<li>Remoras
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>
</body>
다음은 CSS를 구성합니다.
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul { display: block; } //이부분이 문제가 되는 부분입니다.
li:hover ul { display: block; } //이부분이 문제가 되는 부분입니다.
</style>
위와같이 구성하면 현재의 최신의 웹브라우저는 작동이 잘되지만 li:hover 라는 pseudo class를 구버전의 IE에서는 지원을 안하므로 별도로 추가코드를 만들어줘야합니다.
<ul id="nav">위와같이 구성하면 현재의 최신의 웹브라우저는 작동이 잘되지만 li:hover 라는 pseudo class를 구버전의 IE에서는 지원을 안하므로 별도로 추가코드를 만들어줘야합니다.
li:hover ul, li.over ul{ display: block; }
그다음으로 자바스크립트 코드를 추가합니다.
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
example1.html
더보기
'부트스트랩.CSS.JS/CSS2.1' 카테고리 관련글
