Team:Brown-Stanford/Templates/Main

From 2011.igem.org

(Difference between revisions)
Line 24: Line 24:
</style>
</style>
-
<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/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type='text/javascript' src='http://www.srcf.ucam.org/~wac26/iGEM/jquery.lavalamp-1.3.4b.js'></script>
<script type='text/javascript' src='http://www.srcf.ucam.org/~wac26/iGEM/jquery.lavalamp-1.3.4b.js'></script>
<script type='text/javascript' src='/Team:Brown-Stanford/Templates/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='/Team:Brown-Stanford/Templates/jquery.easing.1.3.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">
+
        <script type="text/javascript">
-
$(function() {
+
            $(function() {
-
$('#sdt_menu > li').bind('mouseenter',function(){
+
/**
-
var $elem = $(this);
+
* for each menu element, on mouseenter,
-
$elem.find('img')
+
* we enlarge the image, and show both sdt_active span and
-
.stop(true)
+
* sdt_wrap span. If the element has a sub menu (sdt_box),
-
.animate({
+
* then we slide it - if the element is the last one in the menu
-
'width':'170px',
+
* we slide it to the left, otherwise to the right
-
'height':'170px',
+
*/
-
'left':'0px'
+
                $('#sdt_menu > li').bind('mouseenter',function(){
-
},400,'easeOutBack')
+
var $elem = $(this);
-
.andSelf()
+
$elem.find('img')
-
.find('.sdt_wrap')
+
.stop(true)
-
.stop(true)
+
.animate({
-
.animate({'top':'140px'},500,'easeOutBack')
+
'width':'170px',
-
.andSelf()
+
'height':'170px',
-
.find('.sdt_active')
+
'left':'0px'
-
.stop(true)
+
},400,'easeOutBack')
-
.animate({'height':'170px'},300,function(){
+
.andSelf()
-
var $sub_menu = $elem.find('.sdt_box');
+
.find('.sdt_wrap')
-
if($sub_menu.length){
+
    .stop(true)
-
var left = '170px';
+
.animate({'top':'140px'},500,'easeOutBack')
-
if($elem.parent().children().length == $elem.index()+1)
+
.andSelf()
-
left = '-170px';
+
.find('.sdt_active')
-
$sub_menu.show().animate({'left':left},200);
+
    .stop(true)
-
}
+
.animate({'height':'170px'},300,function(){
-
});
+
var $sub_menu = $elem.find('.sdt_box');
-
}).bind('mouseleave',function(){
+
if($sub_menu.length){
-
var $elem = $(this);
+
var left = '170px';
-
var $sub_menu = $elem.find('.sdt_box');
+
if($elem.parent().children().length == $elem.index()+1)
-
if($sub_menu.length)
+
left = '-170px';
-
$sub_menu.hide().css('left','0px');
+
$sub_menu.show().animate({'left':left},200);
-
 
+
}
-
$elem.find('.sdt_active')
+
});
-
.stop(true)
+
}).bind('mouseleave',function(){
-
.animate({'height':'0px'},300)
+
var $elem = $(this);
-
.andSelf().find('img')
+
var $sub_menu = $elem.find('.sdt_box');
-
.stop(true)
+
if($sub_menu.length)
-
.animate({
+
$sub_menu.hide().css('left','0px');
-
'width':'0px',
+
-
'height':'0px',
+
$elem.find('.sdt_active')
-
'left':'85px'},400)
+
.stop(true)
-
.andSelf()
+
.animate({'height':'0px'},300)
-
.find('.sdt_wrap')
+
.andSelf().find('img')
-
.stop(true)
+
.stop(true)
-
.animate({'top':'25px'},500);
+
.animate({
-
});
+
'width':'0px',
-
});
+
'height':'0px',
-
 
+
'left':'85px'},400)
-
</script>
+
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'25px'},500);
 +
});
 +
            });
 +
        </script>
<link href='http://fonts.googleapis.com/css?family=Nobile:regular,bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nobile:regular,bold' rel='stylesheet' type='text/css'>
Line 226: Line 231:
</style>
</style>
-
<ul id="sdt_menu" class="sdt_menu">
+
<div class="content">
-
    <li>
+
<h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
-
        <a href="#">
+
<ul id="sdt_menu" class="sdt_menu">
-
            <img src="images/1.jpg" alt=""/>
+
<li>
-
            <span class="sdt_active"></span>
+
<a href="#">
-
            <span class="sdt_wrap">
+
<img src="images/2.jpg" alt=""/>
-
                <span class="sdt_link">Portfolio</span>
+
<span class="sdt_active"></span>
-
                <span class="sdt_descr">My work</span>
+
<span class="sdt_wrap">
-
            </span>
+
<span class="sdt_link">About me</span>
-
        </a>
+
<span class="sdt_descr">Get to know me</span>
-
        <div class="sdt_box">
+
</span>
-
            <a href="#">Websites</a>
+
</a>
-
            <a href="#">Illustrations</a>
+
</li>
-
            <a href="#">Photography</a>
+
<li>
-
        </div>
+
<a href="#">
-
    </li>
+
<img src="images/1.jpg" alt=""/>
-
</ul>
+
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Portfolio</span>
 +
<span class="sdt_descr">My work</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href="#">Websites</a>
 +
<a href="#">Illustrations</a>
 +
<a href="#">Photography</a>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="images/3.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Inspiration</span>
 +
<span class="sdt_descr">Where ideas get born</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="images/4.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Photos</span>
 +
<span class="sdt_descr">I like to photograph</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="images/5.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Blog</span>
 +
<span class="sdt_descr">I write about design</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="images/6.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Projects</span>
 +
<span class="sdt_descr">I like to code</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href="#">Job Board Website</a>
 +
<a href="#">Shopping Cart</a>
 +
<a href="#">Interactive Maps</a>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
<div id="wrap">  
<div id="wrap">  

Revision as of 19:00, 6 June 2011

Slide Down Box Menu with jQuery and CSS3