|
|
(47 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html lang="ja"> | + | <html> |
- | <head> | + | <meta charset="UTF-8"> |
- | <img src="a" align="top" width="970" height="150"> | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
| + | <script type="text/javascript"> |
| + | $(function(){ |
| + | $("ul.menu").hide(); // .要素を[処理時間]かけて非表示にします |
| + | $("div.category").click(function(){ // イベント用のメソッドです。要素をクリックすることでイベント処理が行われます |
| + | $("ul.menu").slideUp();// 要素を処理時間でスライドアップします |
| + | if($("+ul",this).css("display")=="none"){// ul要素(カテゴリー内のメニュー)カテゴリー内のメニューが表示されていないとき、メニューがsildeDownします |
| + | $("+ul",this).slideDown();// 要素を処理時間でスライドダウンします |
| + | } |
| + | }); |
| + | }); |
| + | </script> |
| <style type="text/css"> | | <style type="text/css"> |
- | <!--
| + | /*色*/ |
- | img {border-radius: 10px;
| + | body { |
- | -moz-border-radius: 10px;
| + | font-family: Myriad, Helvetica, Arial, "Meiryo", "メイリオ", sans-serif; |
- | -webkit-border-radius: 10px;
| + | _font-family: 'MS Pゴシック', sans-serif; |
| } | | } |
- | --!>
| + | div.category { |
- | </style>
| + | margin:-top:5px; |
- | | + | height:40px; |
- | <!--めにゅー--!>
| + | line-height:40px; |
- | <body>
| + | background:#fdeff2; |
- | <div id="menu">
| + | cursor:pointer; |
- | <ul style="list-style:none">
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto">HOME</a>
| + | |
- | </li>
| + | |
- | <li><a href="">About Us</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Team">Profile</a></li>
| + | |
- | <li><a href="">Photos</a></li>
| + | |
- | <li><a href="">Twitter</a></li>
| + | |
- | <li><a href="">YouTube</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Project">Project</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="">a</a></li>
| + | |
- | <li><a href="">b</a></li>
| + | |
- | <li><a href="">c</a></li>
| + | |
- | <li><a href="">d</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Parts">Parts</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="">e</a></li>
| + | |
- | <li><a href="">f</a></li>
| + | |
- | <li><a href="">g</a></li>
| + | |
- | </ul>
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Modeling">Modeling</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="">h</a></li>
| + | |
- | <li><a href="">i</a></li>
| + | |
- | <li><a href="">j</a></li>
| + | |
- | </ul>
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Notebook">Notebook</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="">k</a></li>
| + | |
- | <li><a href="">l</a></li>
| + | |
- | <li><a href="">m</a></li>
| + | |
- | </ul>
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Safety">Safety</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="">n</a></li>
| + | |
- | <li><a href="">o</a></li>
| + | |
- | <li><a href="">p</a></li>
| + | |
- | </ul>
| + | |
- | <li><a href="">Humanpractice</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="">q</a></li>
| + | |
- | <li><a href="">r</a></li>
| + | |
- | <li><a href="">s</a></li>
| + | |
- | </ul>
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Attributions">Attributions</a>
| + | |
- | <ul style="list-style:none">
| + | |
- | <li><a href="">t</a></li>
| + | |
- | <li><a href="">u</a></li>
| + | |
- | <li><a href="">v</a></li>
| + | |
- | </ul>
| + | |
- | <li><a href="https://2012.igem.org/Team:KIT-Kyoto/Sponsors">Sponsors</a>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | | + | |
- | <!--デザイン、あとは左から1列に並べるのと色合わせ、リンク作り。--!>
| + | |
- | <style type="text/css">
| + | |
- | <!--
| + | |
- | /* メインメニュー */
| + | |
- | | + | |
- | #menu ul {
| + | |
- | display:block;
| + | |
- | list-style-type: none;
| + | |
- | margin:0;
| + | |
- | padding:0;
| + | |
- | text-align: center;
| + | |
| } | | } |
- | | + | ul.navi{ |
- | /* サブメニュー1段目 */
| + | width: 150px; |
- | #menu ul ul{
| + | margin: 0px; |
- | display:none;
| + | background:#e6cde3; |
- | position:absolute;
| + | |
- | top:100%;
| + | |
- | text-align: center;
| + | |
- | margin:0;
| + | |
- | padding:0;}
| + | |
- | #menu ul ul ul{ | + | |
- | display:none;
| + | |
- | position:absolute;
| + | |
- | top:100%;
| + | |
- | text-align: center;
| + | |
| } | | } |
- | #menu ul ul ul ul{
| + | ul.navi, ul.menu { |
- | display:none;
| + | padding:0; |
- | position:absolute;
| + | margin:0; |
- | top:100%;
| + | list-style: none; |
- | text-align: center;
| + | |
| } | | } |
- | | + | ul.menu li{ |
- | | + | padding-left:20px; |
- | /* リスト */
| + | margin:0; |
- | #menu li {
| + | list-style: none; |
- | float:left;line-height:2.0em;
| + | |
- | text-align: center;
| + | |
- | background:#ddd;
| + | |
| } | | } |
- | | + | div.category { |
- | #menu li li {
| + | margin-top: 5px; |
- | clear:both;text-align: left;
| + | padding-left: 20px; |
| + | height: 40px; |
| + | line-height: 40px; |
| + | background:#f09199; |
| } | | } |
- | | + | ul.menu a { |
- | #menu li:hover {
| + | display: block; |
- | position:relative;
| + | height: 35px; |
| + | line-height: 35px; |
| + | color:#fdeff2; |
| } | | } |
- |
| |
- | #menu li:hover > ul {
| |
- | display: block
| |
- | }
| |
- | /* IE6用 */
| |
- | * html #menu li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column1'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- |
| |
- | * html #menu li li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column2'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- | * html #menu li li li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column2'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- | * html #menu li li li li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column2'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- | * html #menu li li li li li li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column2'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- | * html #menu li li li li li li li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column2'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- | * html #menu li li li li li li li li li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column2'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- | * html #menu li li li li li li li li li li {
| |
- | behavior: expression(
| |
- | this.onmouseover=new Function("this.className='column2'"),
| |
- | this.onmouseout=new Function("this.className=''"),
| |
- | this.style.behavior = 'none'
| |
- | );
| |
- | }
| |
- |
| |
- |
| |
- | #menu .column1 {position:relative;}
| |
- | #menu .column1 ul {display:block;}
| |
- | #menu .column1 * ul {display:none;}
| |
- |
| |
- | #menu .column2 {position:relative;}
| |
- | #menu .column2 ul {display:block;}
| |
- | #menu .column2 * ul {display:none;}
| |
- |
| |
- | /* デザイン */
| |
- | #menu li {
| |
- | line-height:3.0em;
| |
- | text-align: center;
| |
- | background:#ee827c;
| |
- | border-radius: 20px;
| |
- | -moz-border-radius: 20px;
| |
- | -webkit-border-radius: 20px;
| |
- | }
| |
- |
| |
- | #menu li li {
| |
- | text-align: center;
| |
- | border-radius: 20px;
| |
- | -moz-border-radius: 20px;
| |
- | -webkit-border-radius: 20px;
| |
- | }
| |
- |
| |
- | #menu li a{
| |
- | display: block;
| |
- | width:100px;
| |
- | text-decoration:none;
| |
- | color:#5a544b;
| |
- | padding:0 20px;
| |
- | }
| |
- | /*hove=マウスオン*/
| |
- | #menu li:hover {
| |
- | background:#e4ab9b;
| |
- | color:#5a544b;
| |
- | }
| |
- |
| |
- | #menu .column1, #menu .column2 {
| |
- | color:#5a544b;
| |
- | background:#ee827c;
| |
- | }
| |
- | --!>
| |
| </style> | | </style> |
| + | </head> |
| + | <body> |
| + | <div> |
| + | <ul class="navi"> |
| + | <li> |
| + | <div class="category">Lab Note</div> |
| + | <ul class="menu"> |
| + | <li><a href="#">Week1</a></li> |
| + | <li><a href="#">Week2</a></li> |
| + | <li><a href="#">Week3</a></li> |
| + | <li><a href="#">Week4</a></li> |
| + | <li><a href="#">Week5</a></li> |
| + | <li><a href="#">Week6</a></li> |
| + | </ul> |
| + | </li> |
| + | <li> |
| + | <div class="category">Protocol</div> |
| + | </li> |
| + | <li> |
| + | <div class="category">Meeting</div> |
| + | <ul class="menu"> |
| + | <li><a href="#">MAY</a></li> |
| + | <li><a href="#">JUNE</a></li> |
| + | <li><a href="#">JULY</a></li> |
| + | <li><a href="#">AUGUST</a></li> |
| + | <li><a href="#">SEPTEMBER</a></li> |
| + | </ul> |
| + | </li> |
| + | <li> |
| + | <div class="category">Design</div> |
| + | </li> |
| + | </ul> |
| + | </div> |
| </body> | | </body> |
- | </head>
| + | |
| </html> | | </html> |