|
|
Line 88: |
Line 88: |
| } | | } |
| </style> | | </style> |
- |
| |
- |
| |
- |
| |
- | <head>
| |
- | <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
| |
- | <title>jQuery based 2depth menu-bar</title>
| |
- | <style>
| |
- | /* 배너 끝! 여기부터는 메뉴바 */
| |
- | body{
| |
- | margin:0;
| |
- | padding:0;
| |
- | background:#ffffff;
| |
- | }
| |
- | #header {
| |
- | width:970px;
| |
- | height:29px;
| |
- | background:#ffffff;
| |
- | 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:0px; /* 0이엇음 */
| |
- | padding:0px 0px 0px 0px;
| |
- | }
| |
- | #nav a {
| |
- | display:block;
| |
- | font-weight:bold;
| |
- | text-decoration:none;
| |
- | margin:0px;
| |
- | padding:5px 20px 5px 20px;
| |
- | }
| |
- | #nav li ul {
| |
- | position:absolute;
| |
- | top:30px; /* 서브가 아래로 열리게하는 */
| |
- | width: 800px;
| |
- | display:none;
| |
- |
| |
- | }
| |
- | #nav li.on ul {
| |
- | display:block;
| |
- | }
| |
- | /* color */
| |
- | #header {background:#900023;}
| |
- | #nav a {background:#900023; color:#ffffff;}
| |
- | #nav .on a,
| |
- | #nav li li a {background:#ffffff; color:#900023;}
| |
- | </style>
| |
- |
| |
- | </head>
| |
- |
| |
- | <body>
| |
- | <div id="header">
| |
- | <div id="nav">
| |
- | <ul>
| |
- | <li class="on"><a href="https://2011.igem.org/Team:Korea_U_Seoul">Home</a>
| |
- | </li>
| |
- | <li><a href="#">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="#">submenu</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">Project</a>
| |
- | <ul>
| |
- | <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>
| |
- | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Project/Result">Result</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>
| |
- | <li><a href="https://2011.igem.org/Team:Korea_U_Seoul/Notebook/Nov">Nov</a></li>
| |
- | </ul>
| |
- |
| |
- | </li>
| |
- | <li><a href="#">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="#">Human Practice</a>
| |
- | <ul>
| |
- | <li><a href="#">submenu</a></li>
| |
- | <li><a href="#">submenu</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | </ul>
| |
- | </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>
| |
| | | |
| | | |
| </html> | | </html> |