작성일자
카테고리 CSS/CSS2.1
최신의 웹브라우저는 지원을 하지만 IE 구버전인 경우는 가상 클래스를 지원하지 않아서 드랍다운 메뉴를 구현하려면 CSS만으로는 안되고 자바스크립트를 추가해야했습니다. 우선 CSS만으로 드랍다운 메뉴를 구현하는 방법을 알아보고 구버전 IE를 위한 자바스크립트 코드를 추가하는 방법을 알아봅니다.

우선 메뉴를 구성합니다.

 <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; } //이부분이 문제가 되는 부분입니다. 
 
</style>

위와같이 구성하면 현재의 최신의 웹브라우저는 작동이 잘되지만  li:hover 라는 pseudo class를 구버전의 IE에서는 지원을 안하므로 별도로 추가코드를 만들어줘야합니다.

li:hover ul, li.over ul{ display: block; }
 
 <ul id="nav">

그다음으로 자바스크립트 코드를 추가합니다.

<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

 


저작자 표시
신고
BlogIcon 방문자

좋은정보 감사합니다! 제가 찾고있던 자료인데 소스뿐만이아니라 샘플 파일도 올려주셔서 참고하는데에 많은 도움이 되었습니다

BlogIcon 베누시안

안녕하세요. 반갑습니다. 도움이 되셨다니 다행입니다.

최아름

제가 탭패널을 활용하여 탭패널 상단 li부분에 잇는 롤오버이미지에 마우스를 오버하면 해당 탭으로 바로 이동이 되도록 하려고 이 소스를 참조하려고 하였는데요; 무엇이 문제인지 잘 되질 않네요~
혹 탭패널적용 후, 해당 탭에 마우스 오버시 내용이 나올 수 있도록 하려면 어떻게 해야하는지 질문도 가능할까요?

BlogIcon 베누시안

안녕하세요. 반갑습니다. 마우스오버했을때 이동되도록 한다는 것은 애니메이션을 의미하는데요. 그것은 CSS만드로는 안되고 제이쿼리를 사용해야합니다. 제이쿼리는 타인이 만들어놓은 플러그인을 사용하면 좋은데 자신이 원하는 것을 찾기가 참 어렵더군요.

BlogIcon 문자요

이 소스 복사는 안되나요 ㅠ,ㅠ

BlogIcon 베누시안

안녕하세요. 링크 아래에 파일이 있습니다.

BlogIcon 비니

아무리해도 안되네요 ㅠ.ㅠ
쉬울 줄 알았는데 조금만 더 자세히 알려 주시면 안될까요???ㅠ.ㅠ
qlsl0328@naver.com 입니다 ㅠ.ㅠ

jk

안녕하세요 오늘도 공부하고 갑니다 :)
궁금한 점이 있는데요 여쭈어도 될까요
li > ul {
top: auto;
left: auto;
}
CSS소스 마지막 부분에서 li > ul 이 있는데 여기서 ">"는 무슨 의미 인가요?

또 그 위의 li ul {display:none;} 은 무슨 뜻인가요?

BlogIcon 베누시안

각진 괄호는 자식 요소만 적용한다는 의미입니다. CSS에서 명령을 내리면 상속으로 인해 모든 하위 요소(자식 요소, 손자요소, 증손자요소 등)에 대해 적용이 되는데 바로 아래의 자식요소만 적용시키고자 할때 사용합니다. 증손자요소는 처음 들어보지만 영어에서 child, grand child, great grand child 로 표현하니 그렇게 쓸 수 밖에 없네요.

li ul {display:none;}은 나타내지 않게 합니다. 나오지 않게 했다가 아래의 li:hover ul, li.over ul{ display: block; }에서 마우스 오버하면 display:block; 로 인해서 나타나게 됩니다.

입문자

감사합니다^^

BlogIcon Cruela

연습하고 있는데 li.over lili:hover ul, {display: block;} id="nav<ul">
이 부분은 html 에 추가해줘야 하는건가요?

BlogIcon 베누시안

안녕하세요. 글 하단에 HTML 파일을 내려받아서 편집기에 열면 코드 구조가 있습니다. 코드는 스타일시트와 HTML, 자바스크립트로 분리돼있는데 간단한 구조라서 하나의 파일에 넣은 것이고 복잡한 경우는 서로를 분리해서 사용하기도 합니다. 말씀하신 부분은 스타일시트 부분으로 <style>...</style> 처럼 <style> 태그안에 입력합니다.
티스토리 스킨을 수정하거나 웹디자인을 배우기 위해서는 CSS에 대해 잘 알아야하는데 제 글의 CSS 기초 카테고리 부분을 차근차근 연습해보세요.

지나가다

안녕하세요.
좋은 자료 감사 드립니다.^^
많이 배우고 갑니다~

BlogIcon mapsi

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바