Team:Korea U Seoul/template/banner

From 2011.igem.org

(Difference between revisions)
(Created page with "<html> <style> /* Edited 7/16/11 from Wiki Hacks */ /* Author: Pieter van Boheemen */ - →Team: TU Delft: #globalWrapper { background-color: #fdffcd; border: none; margin: 0; pa...")
Line 5: Line 5:
/* Team: TU Delft */
/* Team: TU Delft */
#globalWrapper {
#globalWrapper {
-
background-color: #fdffcd;
+
background-color: #feffea;
border: none;
border: none;
margin: 0;
margin: 0;
Line 15: Line 15:
}#top-section {
}#top-section {
background-image: url('https://static.igem.org/mediawiki/2011/8/8b/KoreaU_banner2.jpg');
background-image: url('https://static.igem.org/mediawiki/2011/8/8b/KoreaU_banner2.jpg');
-
height:280px  ! important;
+
height:280px  ! important; /* 메인 배너 이미지 높이 */
margin: 0px;  
margin: 0px;  
margin-left: auto;   
margin-left: auto;   
Line 21: Line 21:
margin-bottom: 0 !important;
margin-bottom: 0 !important;
padding:0;  
padding:0;  
-
border: 1px solid black;  
+
border: 0px solid black;  
}#p-logo {  
}#p-logo {  
height:0px;
height:0px;
Line 31: Line 31:
/* Page Formatting */
/* Page Formatting */
body {
body {
-
background-image:url('https://static.igem.org/mediawiki/2011/6/66/Cornell11_Side_background.jpg');
+
background-image:url('#'); /* 배경에 무늬를 집어넣을시 주소넣기 */
position: float;
position: float;
}a:link {
}a:link {
Line 43: Line 43:
font-face:Arial;
font-face:Arial;
padding:0;
padding:0;
-
margin:10px;
+
margin:0px;     /*  지금 여기를 10픽에서 0픽으로 바꿈 */
}p {
}p {
font-face:Arial;
font-face:Arial;
Line 53: Line 53:
}
}
-
menubar.ul {    color: #ffffff;
+
menubar.ul {    color: #feffea;
     list-style: none;
     list-style: none;
}
}
Line 59: Line 59:
.left-menu:hover {
.left-menu:hover {
     color: #900023;
     color: #900023;
-
     background-color: #ffffff
+
     background-color: #feffea;
}       
}       
Line 75: Line 75:
}
}
.right-menu li {
.right-menu li {
-
#    background-color: #ffffff;
+
#    background-color: #feffea;
}
}
.right-menu li a {
.right-menu li a {
     padding: 0px 15px 0px 0px;
     padding: 0px 15px 0px 0px;
     color: #900023;
     color: #900023;
-
     background-color: #ffffff;
+
     background-color: #feffea;
}
}
.right-menu li a:hover {
.right-menu li a:hover {
Line 87: Line 87:
}     
}     
</style>
</style>
 +
 +
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
<title>jQuery based 2depth menu-bar</title>
 +
<style>
 +
/* header */
 +
body{
 +
margin:0;
 +
padding:0;
 +
background:#feffea;
 +
}
 +
#header {
 +
width:960px;
 +
height:29px;
 +
background:#feffea;
 +
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;
 +
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: 300px;
 +
display:none;
 +
 +
}
 +
#nav li.on ul {
 +
display:block;
 +
}
 +
/* color */
 +
#header {background:#900023;}
 +
#nav a {background:#900023; color:#feffea;}
 +
#nav .on a,
 +
#nav li li a {background:#feffea; color:#900023;}
 +
</style>
 +
 +
</head>
 +
 +
<body>
 +
<div id="header">
 +
  <div id="nav">
 +
    <ul>
 +
      <li class="on"><a href="/">Team</a>
 +
        <ul>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
        </ul>
 +
      </li>
 +
      <li><a href="#">Project</a>
 +
        <ul>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
        </ul>
 +
      </li>
 +
      <li><a href="#">Notebook</a>
 +
        <ul>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
        </ul>
 +
      </li>
 +
      <li><a href="#">Safety</a>
 +
        <ul>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
        </ul>
 +
      </li>
 +
      <li><a href="#">Collaboration</a>
 +
        <ul>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
          <li><a href="#">submenu</a></li>
 +
        </ul>
 +
      </li>
 +
      <li><a href="#">Sponsors</a>
 +
        <ul>
 +
          <li><a href="#">submenu</a></li>
 +
          <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>

Revision as of 02:58, 3 October 2011

jQuery based 2depth menu-bar

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