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{ | |
- | + | margin:0px 0px 0px 0px; | |
- | body { | + | height:50px; |
- | margin: | + | |
padding:0; | padding:0; | ||
- | + | background:#ffffff; | |
- | background:# | + | |
} | } | ||
- | |||
#header { | #header { | ||
- | + | margin: -10px 0px 0px 0px; | |
- | + | wdth:975px; | |
- | + | height:29px; | |
- | background:# | + | background:#d8d3cd; |
- | position:relative; | + | position:relative; |
+ | |||
} | } | ||
#nav { | #nav { | ||
- | position:absolute; | + | 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 | + | margin:0px; /* 0이엇음 */ |
+ | padding:0px 0px 0px 0px; | ||
} | } | ||
#nav a { | #nav a { | ||
display:block; | display:block; | ||
- | |||
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:30px; /* 서브가 아래로 열리게하는 */ | |
- | width: | + | width: 600px; |
- | display:none; | + | display:none; |
+ | |||
} | } | ||
#nav li.on ul { | #nav li.on ul { | ||
- | display:block; | + | display:block; |
} | } | ||
/* color */ | /* color */ | ||
- | #header {background:# | + | #header {background:#8b0029;} |
- | #nav a {background:# | + | #nav a {background:#8b0029; color:#ffffff;} |
- | #nav .on a, | + | #nav .on a, |
- | #nav li li a {background:# | + | #nav li li a {background:#d8d3cd; color:#8b0029;} |
- | </style | + | </style> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</head> | </head> | ||
- | |||
<body> | <body> | ||
- | <div id="header" | + | <div id="header"> |
- | <div id="nav" | + | <div id="nav"> |
- | + | <ul> | |
- | + | <li class="off"><a href="https://2011.igem.org/Team:Korea_U_Seoul">Home</a> | |
- | + | </li> | |
- | < | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Korea_University">Team</a> |
- | + | <ul> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Korea_University">Korea University</a> | |
- | < | + | </li> |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Our_members">Our members</a> | |
- | + | </li> | |
- | + | <li><a href="https://igem.org/Team.cgi?year=2011&team_name=Korea_U_Seoul">Official Team Profile</a> | |
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Team/Attribution">Attribution</a> | |
- | + | </li> | |
- | + | ||
- | + | </ul> | |
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Project/Abstract">Project</a> | |
- | + | <ul> | |
- | <li> | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Project/Abstract">Abstract</a></li> |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Project/Design">Design</a></li> | |
- | < | + | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook">Notebook</a> | |
- | + | <ul> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Feb">Feb</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Mar">Mar</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Apr">Apr</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/May">May</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Jun">Jun</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Jul">Jul</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Aug">Aug</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Sep">Sep</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Oct">Oct</a></li> | |
- | + | </ul> | |
- | + | ||
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Safety/Safety_Questions">Safety</a> | |
- | + | <ul> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Safety/Safety_Questions">Safety Questions</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Safety/Parts">Parts</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Ownership_Innovation">Human Practice</a> | |
- | + | <ul> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Ownership_Innovation">Ownership & Innovation</a> | |
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Sharing">Sharing</a> | |
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Human_Practice/Application">Application</a> | |
- | + | </li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/References">References</a> | |
- | + | </li> | |
- | + | </ul> | |
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </li> | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | </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