2013년 10월 6일 일요일

[jquery menu]제이쿼리(jquery)로 작성한 상단 2단메뉴,,,

 <!--  jquerymenu.html -->

<html>
<head>
<meta charset="utf-8"/>
<style>

body {
 margin:0;
 padding:0;
 font: 10px/1.2 "돋움", dotum, sans-serif;
 background:#666;
}


#header {
 width:800px;
 height:35px;
 margin:50px auto;
 background:#000;
 position:relative; 
}

#nav {
 position:absolute; 
 left: 0;
 bottom:0;
}

#nav ul, #nav li {
 margin:0;
 padding:0;
}

#nav li {
 position:relative;
 list-style:none;
 float:left;
 margin-right:5px;
}

#nav a {
 display:block;
 padding: 1em 2em;
 font-weight:bold;
 text-decoration:none;
}

#nav li ul {
 position:absolute;
 top:3.5em;
 width: 500px;
 display:none;   
}

#nav li.on ul {
 display:block;  
}


#header {background:#000;}
#nav a {background:#fff; color:#000;}
#nav .on a,
#nav li li a {background:#100; color:#fff;}

</style>

<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
  $('#nav li').bind('mouseenter keyup', function() {   // 메뉴바의 각 메뉴들에 마우스를 올리거나 키보드로 이동하면,
   $(this).addClass('on').siblings().removeClass(); // 해당 메뉴에 클래스 on을 추가하고, 다른 메뉴의 클래스를 제거합니다.
  }); 
 });
</script>
<body>
 <div id="header">
  <!-- 상단 박스를 만들고 -->
  <div id="nav">
   <!-- 가로형 2단 메뉴바를 ul x ul 형태로 만듭니다. -->
   <ul>
    <li class="on">
     <!-- 첫번째 1단 메뉴를 활성화 합니다. --> 
     <a href="http://oraclejavanew.kr">홈</a>
    </li>
    <li><a href="#">오라클관련</a>
     <ul>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecOracle">Admin</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecSQLnPlSql">SQL</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecOrccleTun">Tuning</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecHINT">Hint</a></li>
     </ul></li>
    <li><a href="#">자바관련</a>
     <ul>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecJava">Java</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecJavaNet">Java  Network</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecServletJSP">JSP/Servlet</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecSpring">Spring</a></li>
     </ul></li>
    <li><a href="#">닷넷</a>
     <ul>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecCsharp">C#</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LceADOnet">ADO.Net</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=LecASPnet">ASP.Net</a></li>
     </ul></li>
    <li><a href="#">사이버강의장</a>
     <ul>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=Cyber">오엔제이강의장</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=C15">채용자15기</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=C16">채용자16기</a></li>
      <li><a href="http://www.oraclejavanew.kr/bbs/board.php?bo_table=C17">채용자17기</a></li>
     </ul></li>    
   </ul>
  </div>
 </div>
</body>
</html>
 
<!--  http://hooney.net/2011/01/03/768/ 에서 작성된 메뉴를 참조하여 작성 했습니다. -->





오라클자바커뮤니티에서 설립한 개발자교육6년차 오엔제이프로그래밍 실무교육센터(오라클SQL,튜닝,힌트,자바프레임워크,안드로이드,아이폰,닷넷 실무개발강의)  



작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)