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...")
 
(71 intermediate revisions not shown)
Line 2: Line 2:
<head>
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
<title>jQuery based 2depth menu-bar</title>
<style>
<style>
-
 
+
body{
-
/* global */
+
margin:0px 0px 0px 0px;
-
body {
+
        height:50px;
-
margin:0;
+
padding:0;
padding:0;
-
font: 12px/1.2 "돋움", dotum, sans-serif;
+
background:#ffffff;
-
background:#666;
+
}
}
-
/* header */
 
#header {
#header {
-
width:800px;
+
        margin: -10px 0px 0px 0px;
-
height:150px;
+
        wdth:975px;
-
margin:50px auto;
+
height:29px;
-
background:#000;
+
background:#d8d3cd;
-
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; /* 0이엇음 */
 +
padding:0px 0px 0px 0px;
}
}
#nav a {
#nav a {
display:block;
display:block;
-
padding: 1em 2em;
 
font-weight:bold;
font-weight:bold;
text-decoration:none;
text-decoration:none;
 +
    margin:0px;
 +
    padding:5px 15px 5px 15px; /* 어디까지 hover 효과 먹히는지 */
}
}
#nav li ul {
#nav li ul {
position:absolute;
position:absolute;
-
top:3.5em;
+
        top:30px; /* 서브가 아래로 열리게하는 */
-
width: 300px;
+
width: 600px;
-
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:#8b0029;}
-
#nav a {background:#fff; color:#000;}
+
#nav a {background:#8b0029; color:#ffffff;}
-
#nav .on a,
+
#nav .on a,  
-
#nav li li a {background:#390; color:#fff;}
+
#nav li li a {background:#d8d3cd; color:#8b0029;}
-
</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="off"><a href="https://2011.igem.org/Team:Korea_U_Seoul">Home</a>
-
      <a href="/">처음</a>
+
       </li>
-
       <ul>
+
      <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Korea_University">Team</a>
-
        <li>
+
         <ul>
-
          <a href="#">메뉴</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Korea_University">Korea University</a>
-
         </li>
+
          </li>
-
        <li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Our_members">Our members</a>
-
          <a href="#">메뉴</a>
+
          </li>
-
        </li>
+
          <li><a href="https://igem.org/Team.cgi?year=2011&team_name=Korea_U_Seoul">Official Team Profile</a>
-
        <li>
+
          </li>  
-
          <a href="#">메뉴</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Attribution">Attribution</a>
-
        </li>
+
          </li>    
-
      </ul>
+
           
-
    </li>
+
         </ul>
-
    <li>
+
      </li>
-
      <a href="#">갤러리</a>
+
      <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Project/Abstract">Project</a>
-
      <ul>
+
         <ul>
-
         <li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Project/Abstract">Abstract</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Project/Design">Design</a></li>
-
         </li>
+
         
-
        <li>
+
        </ul>
-
          <a href="#">메뉴</a>
+
      </li>
-
        </li>
+
      <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook">Notebook</a>
-
        <li>
+
        <ul>
-
          <a href="#">메뉴</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Feb">Feb</a></li>
-
        </li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Mar">Mar</a></li>
-
      </ul>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Apr">Apr</a></li>
-
    </li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/May">May</a></li>
-
    <li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Jun">Jun</a></li>
-
      <a href="#">블로그</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Jul">Jul</a></li>
-
      <ul>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Aug">Aug</a></li>
-
        <li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Sep">Sep</a></li>
-
          <a href="#">메뉴</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Oct">Oct</a></li>
-
        </li>
+
        </ul>
-
        <li>
+
 
-
          <a href="#">메뉴</a>
+
      </li>
-
        </li>
+
      <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Safety/Safety_Questions">Safety</a>
-
        <li>
+
         <ul>
-
          <a href="#">메뉴</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Safety/Safety_Questions">Safety Questions</a></li>
-
        </li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Safety/Parts">Parts</a></li>
-
      </ul>
+
        </ul>
-
    </li>
+
      </li>
-
    <li>
+
      <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Ownership_Innovation">Human Practice</a>
-
      <a href="#">등록</a>
+
        <ul>
-
      <ul>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Ownership_Innovation">Ownership & Innovation</a>
-
        <li>
+
          </li>
-
          <a href="#">메뉴</a>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Sharing">Sharing</a>
-
        </li>
+
          </li>
-
        <li>
+
          <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Application">Application</a>
-
          <a href="#">메뉴</a>
+
          </li>
-
        </li>
+
         </ul>
-
        <li>
+
      </li>
-
          <a href="#">메뉴</a>
+
       <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/References">References</a>
-
        </li>
+
      </li>    
-
      </ul>
+
    </ul>
-
    </li>
+
  </div>
-
    <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>

Latest revision as of 22:00, 5 October 2011

jQuery based 2depth menu-bar

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