Team:NYMU-Taipei/Templates/Header/menubar

From 2011.igem.org

(Difference between revisions)
 
(8 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 74: Line 75:
<li>
<li>
<a href="https://2011.igem.org/Team:NYMU-Taipei/optomagnetic-design">
<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 85: 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 102: 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>
Line 120: 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 &
Safety Assessment</a>
Safety Assessment</a>
</div>
</div>
Line 148: 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 163: 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 174: 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