Difference between revisions of "Team:IIT Delhi/team1"

Line 221: Line 221:
 
margin-top: 30px;
 
margin-top: 30px;
 
}
 
}
 +
 +
ul.ldd_menu{
 +
margin:0px;
 +
padding:0;
 +
 +
height:70px;
 +
list-style:none;
 +
font-family:"Trebuchet MS", sans-serif;
 +
text-align: center;
 +
}
 +
ul.ldd_menu a{
 +
text-decoration:none;
 +
}
 +
ul.ldd_menu > li{
 +
float:left;
 +
position:fixed;
 +
width: 100%;
 +
z-index: 9999;
 +
}
 +
ul.ldd_menu > li > span{
 +
float:right;
 +
        position:absolute;
 +
  margin-left:550px;
 +
  font-size:100%;
 +
color:green;
 +
background-color:white;
 +
height:50px;
 +
line-height:50px;
 +
cursor:default;
 +
padding:0px 20px;
 +
text-shadow:0px 0px 1px #CCC;
 +
}
 +
 +
.sub_wrap{
 +
width: 2500px;
 +
margin: 0 auto 0 auto;
 +
background-color: #000;
 +
}
 +
 +
ul.ldd_menu ul{
 +
list-style:none;
 +
display: inline-block;
 +
border-left:1px dotted #FFF;
 +
margin-top: 20px;
 +
margin-right: 0px;
 +
margin-bottom: 10px;
 +
margin-left: 20px;
 +
padding-top: 10px;
 +
padding-right: 5px;
 +
padding-bottom: 10px;
 +
padding-left: 10px;
 +
}
 +
 +
ul.ldd_menu .ldd_submenu{
 +
position:absolute;
 +
top:50px;
 +
width:100%;
 +
display:none;
 +
opacity:0.90;
 +
font-size:10px;
 +
 +
background-color: #000;
 +
}
 +
a.ldd_subfoot{
 +
background-color:#f0f0f0;
 +
color:#444;
 +
display:block;
 +
clear:both;
 +
padding:15px 20px;
 +
font-family: Arial, serif;
 +
font-size:10px;
 +
text-shadow:0px 0px 1px #fff;
 +
-moz-box-shadow:0px 0px 2px #777 inset;
 +
-webkit-box-shadow:0px 0px 2px #777 inset;
 +
-box-shadow:0px 0px 2px #777 inset;
 +
}
 +
 +
li.ldd_heading{
 +
font-family: Georgia, serif;
 +
font-size: 13px;
 +
font-style: italic;
 +
color:#FF3300;
 +
text-shadow:0px 0px 1px #B03E23;
 +
padding:0px 0px 10px 0px;
 +
}
 +
ul.ldd_menu ul li a{
 +
font-family: Arial, serif;
 +
font-size:12px;
 +
line-height:20px;
 +
color:#fff;
 +
padding:1px 3px;
 +
}
 +
ul.ldd_menu ul li a:hover{
 +
background:#FF3300;
 +
}
 +
 +
 +
 +
.left_message{
 +
position:relative;
 +
background: url(../images/pages/left_box.png) no-repeat;
 +
width:263px;
 +
height:115px;
 +
padding:5px;
 +
margin-bottom: 20px;
 +
margin-left: 20px;
 +
left: -70px;
 +
}
 +
 +
li.left_message_title{
 +
font-family: Georgia, serif;
 +
font-size: 15pt;
 +
font-style: italic;
 +
color:#FFCC00;
 +
padding:15px 30px 20px 20px;
 +
list-style-type: none;
 +
line-height: 18pt;
 +
letter-spacing: 1pt;
 +
text-align: center;
 +
}
 +
 +
.right_message{
 +
background: url(../images/pages/right_pict_frame.png) no-repeat;
 +
position:relative;
 +
left:800px;
 +
top:-140px;
 +
width:261px;
 +
height:186px;
 +
margin-bottom: 20px;
 +
padding-left:20px;
 +
padding-top:18px;
 +
 +
}
 +
 +
.right_pict{
 +
position:relative;
 +
left:800px;
 +
top:-340px;
 +
width:225px;
 +
height:149px;
 +
}
 +
 +
<script>
 +
$(document).ready(function(){
 +
console.log("hi2");
 +
/**
 +
* the menu
 +
*/
 +
var $menu = $('#ldd_menu');
 +
 +
/**
 +
* for each list element,
 +
* we show the submenu when hovering and
 +
* expand the span element (title) to 510px
 +
*/
 +
$menu.children('li').each(function(){
 +
var $this = $(this);
 +
var $span = $this.children('span');
 +
$span.data('width',$span.width());
 +
 +
$this.bind('mouseenter',function(){
 +
$menu.find('.ldd_submenu').stop(true,true).hide();
 +
$span.stop().animate({'width':'10%'},200,function(){
 +
$this.find('.ldd_submenu').slideDown(400);
 +
});
 +
}).bind('mouseleave',function(){
 +
/**$this.find('.ldd_submenu').stop(true,true).hide(); */
 +
$span.stop().animate({'width':$span.data('width')+'px'},300);
 +
$this.find('.ldd_submenu').slideUp(400);
 +
});
 +
});
 +
            });
 +
 +
//ipad and iphone fix
 +
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
 +
    $(" #ldd_menu li a").click(function(){
 +
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
 +
        //strange
 +
    });
 +
}
 +
</script>
  
 
<link rel="stylesheet" href="https://2015.igem.org/Team:IIT_Delhi/CSS_bootstrap?action=raw&ctype=text/css" type="text/css"/>
 
<link rel="stylesheet" href="https://2015.igem.org/Team:IIT_Delhi/CSS_bootstrap?action=raw&ctype=text/css" type="text/css"/>
Line 330: Line 511:
 
     <img src="https://static.igem.org/mediawiki/2015/1/11/IITDigem_tour.png">
 
     <img src="https://static.igem.org/mediawiki/2015/1/11/IITDigem_tour.png">
 
   </div>
 
   </div>
 +
 +
  <div class="box">
 +
<ul id="ldd_menu" class="ldd_menu">
 +
<li>
 +
<span>SITE MAP</span>
 +
                   
 +
                   
 +
                  <div class="ldd_submenu">
 +
<ul>
 +
<li class="ldd_heading">About Us</li>
 +
<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>
 +
<ul>
 +
<li class="ldd_heading">Project</li>
 +
<li><a href="#">Current</a></li>
 +
<li><a href="#">Development</a></li>
 +
                            <li><a href="#"></a></li>
 +
<li><a href="#"></a></li>
 +
</ul>
 +
                        <ul>
 +
<li class="ldd_heading">Modelling</li>
 +
<li><a href="#">A</a></li>
 +
<li><a href="#">B</a></li>
 +
                            <li><a href="#"></a></li>
 +
<li><a href="#"></a></li>
 +
</ul>
 +
                        <ul>
 +
<li class="ldd_heading">Team</li>
 +
<li><a href="#">Current</a></li>
 +
<li><a href="#"></a></li>
 +
                            <li><a href="#"></a></li>
 +
<li><a href="#"></a></li>
 +
</ul>
 +
<ul>
 +
<li class="ldd_heading">Human Practices</li>
 +
<li><a href="#">A</a></li>
 +
<li><a href="#"></a></li>
 +
                            <li><a href="#"></a></li>
 +
<li><a href="#"></a></li>
 +
</ul>
 +
                        <ul>
 +
<li class="ldd_heading">News</li>
 +
                              <li><a href="#">Latest Updates</a></li>
 +
<li><a href="#"></a></li>
 +
                            <li><a href="#"></a></li>
 +
<li><a href="#"></a></li>
 +
</ul>
 +
                        <ul>
 +
<li class="ldd_heading">Notebook</li>
 +
                              <li><a href="#">A</a></li>
 +
<li><a href="#"></a></li>
 +
                            <li><a href="#"></a></li>
 +
<li><a href="#"></a></li>
 +
</ul>
 +
                        <ul>
 +
<li class="ldd_heading">Contact</li>
 +
                              <li><a href="#">Finding Us</a></li>
 +
<li><a href="#">Email</a></li>
 +
                            <li><a href="#">Facebook</a></li>
 +
<li><a href="#">Twitter</a></li>
 +
</ul>
 +
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
 +
    </div>
 +
 
   </div>       
 
   </div>       
  

Revision as of 16:40, 12 September 2015

This is left Nav

This is content

Current Team

Meet the Team

    ABC
    BBBBBBBBBBBB

    content content

    DEF
    BBBBBBBB

    content content