Team:KIT-Kyoto/Template/header

From 2012.igem.org

(Difference between revisions)
m
m
 
(40 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: 'ＭＳ Ｐゴシック', sans-serif;
}
}
-
--!>
+
div.category {
-
</style>
+
    margin:-top:5px;
-
<ul id="pulldown-menu">
+
     height:40px;
-
 
+
    line-height:40px;
-
<li><a href="#">HOME</a>
+
    background:#fdeff2;
-
</li>
+
    cursor:pointer;
-
 
+
-
<li><a href="#">ABOUT US</a>
+
-
     <ul>
+
-
    <li><a href="">PROFILE</a></li>
+
-
    <li><a href="">TWITTER</a></li>
+
-
    <li><a href="">YouTube</a></li>
+
-
    <li><a href="">PHOTOS</a></li>
+
-
    </ul>
+
-
</li>
+
-
 
+
-
<li><a href="#">PROJECT</a>
+
-
    <ul>
+
-
    <li><a href="">OVERVIEW</a></li>
+
-
    <li><a href="">INTRODUCTION</a></li>
+
-
    <li><a href="">RESULTS</a></li>
+
-
    </ul>
+
-
</li>
+
-
 
+
-
<li><a href="#">PARTS</a>
+
-
</li>
+
-
 
+
-
<li><a href="#">NOTEBOOK</a>
+
-
    <ul>
+
-
    <li><a href="">LAB NOTE</a></li>
+
-
    <li><a href="">MEETING</a></li>
+
-
    <li><a href="">PROTOCOL</a></li>
+
-
    <li><a href="">DESIGN NOTE</a></li>
+
-
    </ul>
+
-
</li>
+
-
 
+
-
<li><a href="#">SAFETY</a>
+
-
</li>
+
-
 
+
-
<li><a href="#">HUMANPRACTICE</a>
+
-
</li>
+
-
 
+
-
</ul>
+
-
<style type="text/css">
+
-
<!--
+
-
ul#pulldown-menu a {
+
-
        color:#5a544b ;
+
-
        text-decoration: none;
+
-
        }
+
-
ul#pulldown-menu a:link,
+
-
ul#pulldown-menu a:visited {
+
-
        background:#c4a3bf ;
+
}
}
-
ul#pulldown-menu a:hover,
+
ul.navi{
-
ul#pulldown-menu a:active {
+
    width: 150px;
-
        background: #b44c97 ;
+
    margin: 0px;
 +
    background:#e6cde3;
}
}
-
 
+
ul.navi, ul.menu {
-
ul#pulldown-menu li {
+
    padding:0;
-
        float: left;
+
    margin:0;
-
        position: relative;
+
    list-style: none;
-
        margin: 0 0.5em;
+
-
        width: 9em;
+
-
        height: 2em;
+
-
        font-weight: bold;
+
-
        line-height: 2em;
+
-
        list-style:none;
+
-
        filter:alpha(opacity=80);
+
-
-moz-opacity: 0.8;
+
-
opacity: 0.8;
+
-
        display:inline;
+
}
}
-
ul#pulldown-menu li a {
+
ul.menu li{
-
        display: block;
+
    padding-left:20px;
-
        width: 9.5em;
+
    margin:0;
-
        height: 2em;
+
    list-style: none;
-
        text-align: center;
+
}
}
-
 
+
div.category {
-
/* 下層のメニューを不可視に */
+
    margin-top: 5px;
-
ul#pulldown-menu li ul {
+
    padding-left: 20px;
-
        display: none;
+
    height: 40px;
 +
    line-height: 40px;
 +
    background:#f09199;
}
}
-
 
+
ul.menu a {
-
/* 疑似要素 :hover で下層のメニューを可視に */
+
    display: block;
-
ul#pulldown-menu li:hover ul {
+
    height: 35px;
-
        display: block;
+
    line-height: 35px;
-
        position: absolute;
+
    color:#fdeff2;
-
        z-index: 100;
+
}
}
-
 
-
ul#pulldown-menu li ul li {
 
-
        float: none;
 
-
        margin: 0;
 
-
        font-weight: normal;
 
-
}
 
-
--!>
 
</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>
-
 
-
 
-
</head>
 
</html>
</html>

Latest revision as of 14:07, 25 August 2012

Retrieved from "http://2012.igem.org/Team:KIT-Kyoto/Template/header"