Team:NYMU-Taipei/Templates/Header/menubar

From 2011.igem.org

(Difference between revisions)
 
(25 intermediate revisions not shown)
Line 5: Line 5:
         <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
         <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
         <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
         <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
-
+
</html>
-
        <link rel="stylesheet" href="http://gel.ym.edu.tw/~evelyn132/igem/css/style.css" type="text/css" media="screen"/>
+
{{:Team:NYMU-Taipei/Templates/Header/menubar/css}}
-
        <style>
+
<html>
 +
                <style>
span.reference{
span.reference{
Line 20: Line 21:
text-decoration:none;
text-decoration:none;
text-shadow:1px 1px 1px #000;
text-shadow:1px 1px 1px #000;
-
margin-right:30px;
+
margin-right:200px;
}
}
span.reference a:hover{
span.reference a:hover{
Line 27: Line 28:
ul.sdt_menu{
ul.sdt_menu{
margin-top:0px;
margin-top:0px;
-
align:center
+
                                width:1500px;
 +
align:center;
                         }
                         }
#logo {
#logo {
-
                 margin-top: -155px;
+
                 margin-top: -155px; margin-left: -5px;
                 text-align:center
                 text-align:center
                 }
                 }
Line 39: Line 41:
<center>
<center>
<div id='logo'>
<div id='logo'>
-
<img id="nymulogo" src="https://static.igem.org/mediawiki/2011/0/0a/Header_final.png" alt="" width="1100" height="110"/>
+
<img id="nymulogo" src="https://static.igem.org/mediawiki/2011/0/0a/Header_final.png" alt="" width="975" height="150"/>
</div>
</div>
</center>
</center>
Line 57: Line 59:
      </li>
      </li>
<li>
<li>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/idea">
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/concept-on-interface-and-biomedicine">
<img src="https://static.igem.org/mediawiki/2011/e/e6/2ccs.png" alt=""/>
<img src="https://static.igem.org/mediawiki/2011/e/e6/2ccs.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_wrap">
<span class="sdt_link">Idea</span>
<span class="sdt_link">Idea</span>
-
<span class="sdt_descr">My idea</span>
+
<span class="sdt_descr">Our Idea</span>
</span>
</span>
</a>
</a>
Line 72: Line 74:
</li>
</li>
<li>
<li>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/design--experiment">
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/optomagnetic-design">
-
<img src="https://static.igem.org/mediawiki/2011/0/07/3ccs.png" alt="" width="150" height="150"/>
+
<img src="https://static.igem.org/mediawiki/2011/1/19/Exp_nymu.png" alt="" width="150" height="150"/>
<span class="sdt_active"></span>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_wrap">
Line 84: Line 86:
<a href="https://2011.igem.org/Team:NYMU-Taipei/optomagnetic-design">Optomagnetic Design</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/optomagnetic-design">Optomagnetic Design</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/modelling-protein-structure-champ-design">Protein Modelling</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/modelling-protein-structure-champ-design">Protein Modelling</a>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/immunological-solution">Immunological Solution</a>
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/immunological-solution">NeuroSymbiosis</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/chassis">Chassis</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/chassis">Chassis</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/synthoprime">SynthoPrime</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/synthoprime">SynthoPrime</a>
Line 91: Line 93:
</li>
</li>
<li>
<li>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/results--performances">
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/optomagnetic-design1">
<img src="https://static.igem.org/mediawiki/2011/9/9e/4ccs.png" alt="" width="150" height="150"/>
<img src="https://static.igem.org/mediawiki/2011/9/9e/4ccs.png" alt="" width="150" height="150"/>
<span class="sdt_active"></span>
<span class="sdt_active"></span>
Line 101: Line 103:
<div class="sdt_box">
<div class="sdt_box">
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/optomagnetic-design1">Optomagnetic Bacteria</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/optomagnetic-design1">Optomagnetic Bacteria</a>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/immunological-solution1">Immunological Solution</a>
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/immunological-solution1">NeuroSymbiosis</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/chassis1">Chassis</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/chassis1">Chassis</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/parts">Parts</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/parts">Parts</a>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/lab-journals">Lab Journal</a>
 
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/international-collaboration(bloc-magneto-worldwide)">International Collaboration</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/international-collaboration(bloc-magneto-worldwide)">International Collaboration</a>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/results/achievements">Achievements</a>
 
</div>
</div>
</li>
</li>
<li>
<li>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/science%2C-technology%2C-society">
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/synthetic-neurobiology">
<img src="https://static.igem.org/mediawiki/2011/e/e5/5ccs.png" alt="" width="150" height="150"/>
<img src="https://static.igem.org/mediawiki/2011/e/e5/5ccs.png" alt="" width="150" height="150"/>
<span class="sdt_active"></span>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_wrap">
-
<span class="sdt_link">Human Practice
+
<span class="sdt_link">Human Practice & Safety</span>
-
                                                        &Safety</span>
+
<span class="sdt_descr"></span>
<span class="sdt_descr"></span>
</span>
</span>
Line 122: Line 121:
<a href="https://2011.igem.org/Team:NYMU-Taipei/synthetic-neurobiology">Synthetic Neurobiology</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/synthetic-neurobiology">Synthetic Neurobiology</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/human-practices">Human Practice</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/human-practices">Human Practice</a>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/evaluation---safety-assessment">Evaluation&
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/evaluation---safety-assessment">Evaluation &
-
Sagety Assessment</a>
+
Safety Assessment</a>
</div>
</div>
</li>
</li>
<li>
<li>
-
<a href="https://2011.igem.org/Team:NYMU-Taipei/about-us">
+
<a href="https://2011.igem.org/Team:NYMU-Taipei/the-school">
<img src="https://static.igem.org/mediawiki/2011/2/2e/6ccs.png" alt="" width="150" height="150"/>
<img src="https://static.igem.org/mediawiki/2011/2/2e/6ccs.png" alt="" width="150" height="150"/>
<span class="sdt_active"></span>
<span class="sdt_active"></span>
Line 139: Line 138:
<a href="https://2011.igem.org/Team:NYMU-Taipei/the-team">The Team</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/the-team">The Team</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/china-meetup">China Meetup</a>
<a href="https://2011.igem.org/Team:NYMU-Taipei/china-meetup">China Meetup</a>
 +
<a href="https://2011.igem.org/Team:NYMU-Taipei/acknowledgement">Acknowledgement</a>
</div>
</div>
</li>
</li>
Line 149: Line 149:
         <!-- The JavaScript -->
         <!-- The JavaScript -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
<script type="text/javascript" src="http://gel.ym.edu.tw/~evelyn132/igem/jquery.easing.1.3.js"></script>
+
</html>
 +
{{:Team:NYMU-Taipei/Templates/Header/menubar/js}}
 +
<html>
         <script type="text/javascript">
         <script type="text/javascript">
             $(function() {
             $(function() {
Line 164: Line 166:
.stop(true)
.stop(true)
.animate({
.animate({
-
'width':'150px',
+
'width':'155px',
-
'height':'150px',
+
'height':'155px',
'left':'0px'
'left':'0px'
},400,'easeOutBack')
},400,'easeOutBack')
Line 175: Line 177:
.find('.sdt_active')
.find('.sdt_active')
    .stop(true)
    .stop(true)
-
.animate({'height':'150px'},300,function(){
+
.animate({'height':'155px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
if($sub_menu.length){
-
var left = '150px';
+
var left = '155px';
if($elem.parent().children().length == $elem.index()+1)
if($elem.parent().children().length == $elem.index()+1)
-
left = '-150px';
+
left = '-155px';
$sub_menu.show().animate({'left':left},200);
$sub_menu.show().animate({'left':left},200);
}
}

Latest revision as of 03:30, 7 December 2011

Slide Down Box Menu with jQuery and CSS3