Team:Korea U Seoul/template/menubar

From 2011.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style> /* global */ body { margin:0; padding:0; font: 12px/1.2 "돋움", dotum, sans-serif; background:#666; } - →header: #header { width:800px; height:1...")
Line 1: Line 1:
<html>
<html>
-
 
<head>
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
<title>jQuery based 2depth menu-bar</title>
<style>
<style>
-
 
/* global */
/* global */
body {
body {
Line 9: Line 9:
padding:0;
padding:0;
font: 12px/1.2 "돋움", dotum, sans-serif;
font: 12px/1.2 "돋움", dotum, sans-serif;
-
background:#666;
+
background:#ffffff;
}
}
/* header */
/* header */
#header {
#header {
width:800px;
width:800px;
-
height:150px;
+
height:27px;
margin:50px auto;
margin:50px auto;
-
background:#000;
+
background:#ffffff;
-
position:relative; /* 포지션의 기준점을 잡습니다. */
+
position:relative;
}
}
#nav {
#nav {
-
position:absolute; /* header를 기준으로 하단에 위치시킵니다. */
+
position:absolute;
left: 0;
left: 0;
bottom:0;
bottom:0;
Line 32: Line 32:
list-style:none;
list-style:none;
float:left;
float:left;
-
margin-right:5px;
+
margin:0px;
 +
        padding:0px 30px 0px 30px;
}
}
#nav a {
#nav a {
Line 39: Line 40:
font-weight:bold;
font-weight:bold;
text-decoration:none;
text-decoration:none;
 +
        margin:0px;
 +
        padding:2px;
}
}
#nav li ul {
#nav li ul {
position:absolute;
position:absolute;
-
top:3.5em;
+
top:2em;
width: 300px;
width: 300px;
-
display:none; /* li의 자식인 ul을 숨겨둡니다. */
+
display:none;
 +
 
}
}
#nav li.on ul {
#nav li.on ul {
-
display:block; /* 활성화된 li의 자식인 ul만 보여줍니다. */
+
display:block;
}
}
/* color */
/* color */
-
#header {background:#000;}
+
#header {background:#900023;}
-
#nav a {background:#fff; color:#000;}
+
#nav a {background:#900023; color:#ffffff;}
-
#nav .on a,
+
#nav .on a,  
-
#nav li li a {background:#390; color:#fff;}
+
#nav li li a {background:#ffffff; color:#900023;}
</style>
</style>
-
 
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  // Google CDN의 jQuery를 불러옵니다.
 
-
<script>
 
-
$('#nav li').bind('mouseenter keyup', function() { // 메뉴바의 각 메뉴들에 마우스를 올리거나 키보드로 이동하면,
 
-
$(this).addClass('on').siblings().removeClass(); // 해당 메뉴에 클래스 on을 추가하고, 다른 메뉴의 클래스를 제거합니다.
 
-
}); // 네. 3줄로 끝입니다.
 
-
</script>
 
-
 
</head>
</head>
-
 
<body>
<body>
-
<div id="header"> <!-- 상단 박스를 만들고 -->
+
<div id="header">
-
<div id="nav"> <!-- 가로형 2단 메뉴바를 ul x ul 형태로 만듭니다. -->
+
  <div id="nav">
-
  <ul>
+
    <ul>
-
    <li class="on"> <!-- 첫번째 1단 메뉴를 활성화 합니다. -->
+
      <li class="on"><a href="/">Team</a>
-
      <a href="/">처음</a>
+
        <ul>
-
      <ul>
+
          <li><a href="#">메뉴</a></li>
-
        <li>
+
          <li><a href="#">메뉴</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="#">메뉴</a></li>
-
        </li>
+
        </ul>
-
        <li>
+
      </li>
-
          <a href="#">메뉴</a>
+
      <li><a href="#">Project</a>
-
        </li>
+
        <ul>
-
        <li>
+
          <li><a href="#">메뉴</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="#">메뉴</a></li>
-
        </li>
+
          <li><a href="#">메뉴</a></li>
-
      </ul>
+
        </ul>
-
    </li>
+
      </li>
-
    <li>
+
      <li><a href="#">Notebook</a>
-
      <a href="#">갤러리</a>
+
        <ul>
-
      <ul>
+
          <li><a href="#">메뉴</a></li>
-
        <li>
+
          <li><a href="#">메뉴</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="#">메뉴</a></li>
-
        </li>
+
        </ul>
-
        <li>
+
      </li>
-
          <a href="#">메뉴</a>
+
      <li><a href="#">Safety</a>
-
        </li>
+
        <ul>
-
        <li>
+
          <li><a href="#">메뉴</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="#">메뉴</a></li>
-
        </li>
+
          <li><a href="#">메뉴</a></li>
-
      </ul>
+
        </ul>
-
    </li>
+
      </li>
-
    <li>
+
      <li><a href="#">Collaboration</a>
-
      <a href="#">블로그</a>
+
        <ul>
-
      <ul>
+
          <li><a href="#">메뉴</a></li>
-
        <li>
+
          <li><a href="#">메뉴</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="#">메뉴</a></li>
-
        </li>
+
        </ul>
-
        <li>
+
      </li>
-
          <a href="#">메뉴</a>
+
      <li><a href="#">Sponsors</a>
-
        </li>
+
        <ul>
-
        <li>
+
          <li><a href="#">메뉴</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="#">메뉴</a></li>
-
        </li>
+
          <li><a href="#">메뉴</a></li>
-
      </ul>
+
        </ul>
-
    </li>
+
      </li>
-
    <li>
+
    </ul>
-
      <a href="#">등록</a>
+
  </div>
-
      <ul>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
      </ul>
+
-
    </li>
+
-
    <li>
+
-
      <a href="#">소개</a>
+
-
      <ul>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
      </ul>
+
-
    </li>
+
-
    <li>
+
-
      <a href="#">포럼</a>
+
-
      <ul>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
        <li>
+
-
          <a href="#">메뉴</a>
+
-
        </li>
+
-
      </ul>
+
-
    </li>
+
-
  </ul>
+
-
</div>
+
</div>
</div>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 +
<script>
 +
$('#nav li').bind('mouseenter keyup', function() {
 +
$(this) .addClass('on').siblings().removeClass();
 +
});
 +
</script>
</body>
</body>
-
 
</html>
</html>

Revision as of 02:05, 3 October 2011

jQuery based 2depth menu-bar

Retrieved from "http://2011.igem.org/Team:Korea_U_Seoul/template/menubar"