Team:TU-Eindhoven/Style

From 2014.igem.org

(Difference between revisions)
Line 197: Line 197:
   color:rgba(255,255,255,1);
   color:rgba(255,255,255,1);
}
}
-
 
-
/* Second navigation panel */
 
-
 
-
ul.sdt_menu{
 
-
    margin:0;
 
-
    padding:0;
 
-
    list-style: none;
 
-
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 
-
    font-size:14px;
 
-
    width:1020px;
 
-
}
 
-
 
-
ul.sdt_menu a{
 
-
    text-decoration:none;
 
-
    outline:none;
 
-
}
 
-
 
-
ul.sdt_menu li{
 
-
    float:left;
 
-
    width:170px;
 
-
    height:85px;
 
-
    position:relative;
 
-
    cursor:pointer;
 
-
}
 
-
 
-
ul.sdt_menu li > a{
 
-
    position:absolute;
 
-
    top:0px;
 
-
    left:0px;
 
-
    width:170px;
 
-
    height:85px;
 
-
    z-index:12;
 
-
    background:transparent url(../images/overlay.png) no-repeat bottom right;
 
-
    -moz-box-shadow:0px 0px 2px #000;
 
-
    -webkit-box-shadow:0px 0px 2px #000;
 
-
    box-shadow:0px 0px 2px #000;
 
-
}
 
-
 
-
ul.sdt_menu li a img{
 
-
    border:none;
 
-
    position:absolute;
 
-
    width:0px;
 
-
    height:0px;
 
-
    bottom:0px;
 
-
    left:85px;
 
-
    z-index:100;
 
-
    -moz-box-shadow:0px 0px 4px #000;
 
-
    -webkit-box-shadow:0px 0px 4px #000;
 
-
    box-shadow:0px 0px 4px #000;
 
-
}
 
-
 
-
ul.sdt_menu li span.sdt_wrap{
 
-
    position:absolute;
 
-
    top:25px;
 
-
    left:0px;
 
-
    width:170px;
 
-
    height:60px;
 
-
    z-index:15;
 
-
}
 
-
 
-
ul.sdt_menu li span.sdt_active{
 
-
    position:absolute;
 
-
    background:#111;
 
-
    top:85px;
 
-
    width:170px;
 
-
    height:0px;
 
-
    left:0px;
 
-
    z-index:14;
 
-
    -moz-box-shadow:0px 0px 4px #000 inset;
 
-
    -webkit-box-shadow:0px 0px 4px #000 inset;
 
-
    box-shadow:0px 0px 4px #000 inset;
 
-
}
 
-
 
-
ul.sdt_menu li span span.sdt_link,
 
-
ul.sdt_menu li span span.sdt_descr,
 
-
ul.sdt_menu li div.sdt_box a{
 
-
    margin-left:15px;
 
-
    text-transform:uppercase;
 
-
    text-shadow:1px 1px 1px #000;
 
-
}
 
-
 
-
ul.sdt_menu li span span.sdt_link{
 
-
    color:#fff;
 
-
    font-size:24px;
 
-
    float:left;
 
-
    clear:both;
 
-
}
 
-
ul.sdt_menu li span span.sdt_descr{
 
-
    color:#0B75AF;
 
-
    float:left;
 
-
    clear:both;
 
-
    width:155px;
 
-
    font-size:10px;
 
-
    letter-spacing:1px;
 
-
}
 
-
 
-
ul.sdt_menu li div.sdt_box{
 
-
    display:block;
 
-
    position:absolute;
 
-
    width:170px;
 
-
    overflow:hidden;
 
-
    height:170px;
 
-
    top:85px;
 
-
    left:0px;
 
-
    display:none;
 
-
    background:#000;
 
-
}
 
-
ul.sdt_menu li div.sdt_box a{
 
-
    float:left;
 
-
    clear:both;
 
-
    line-height:30px;
 
-
    color:#0B75AF;
 
-
}
 
-
 
-
ul.sdt_menu li div.sdt_box a:first-child{
 
-
    margin-top:15px;
 
-
}
 
-
ul.sdt_menu li div.sdt_box a:hover{
 
-
    color:#fff;
 
-
}
 
-
 
-
$(function() {
 
-
    $('#sdt_menu > li').bind('mouseenter',function(){
 
-
        var $elem = $(this);
 
-
        $elem.find('img')
 
-
            .stop(true)
 
-
            .animate({
 
-
                'width':'170px',
 
-
                'height':'170px',
 
-
                'left':'0px'
 
-
            },400,'easeOutBack')
 
-
            .andSelf()
 
-
            .find('.sdt_wrap')
 
-
            .stop(true)
 
-
            .animate({'top':'140px'},500,'easeOutBack')
 
-
            .andSelf()
 
-
            .find('.sdt_active')
 
-
            .stop(true)
 
-
            .animate({'height':'170px'},300,function(){
 
-
            var $sub_menu = $elem.find('.sdt_box');
 
-
            if($sub_menu.length){
 
-
                var left = '170px';
 
-
                if($elem.parent().children().length == $elem.index()+1)
 
-
                    left = '-170px';
 
-
                $sub_menu.show().animate({'left':left},200);
 
-
            } 
 
-
        });
 
-
    }).bind('mouseleave',function(){
 
-
        var $elem = $(this);
 
-
        var $sub_menu = $elem.find('.sdt_box');
 
-
        if($sub_menu.length)
 
-
            $sub_menu.hide().css('left','0px');
 
-
       
 
-
        $elem.find('.sdt_active')
 
-
            .stop(true)
 
-
            .animate({'height':'0px'},300)
 
-
            .andSelf().find('img')
 
-
            .stop(true)
 
-
            .animate({
 
-
                'width':'0px',
 
-
                'height':'0px',
 
-
                'left':'85px'},400)
 
-
            .andSelf()
 
-
            .find('.sdt_wrap')
 
-
            .stop(true)
 
-
            .animate({'top':'25px'},500);
 
-
    });
 
-
});
 

Revision as of 18:50, 18 May 2014

/* Removing iGEM style */

  1. searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
  display: none;

}

  1. content { 
  border: none;

}


/* Customizing standard iGEM navigation panel */

  1. top-section{ 
  height: 200px;
  width: 100%;
  border: none;
  border-top: none;
  color: grey;
  border: 2px solid black;
  background-image: url("http://sgugenetics.pbworks.com/f/E.COLI.jpg");

}

  1. menubar { 
  display: table-cell;
  height: 30px;
  font-size: 12pt;
  position: fixed;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #065700),color-stop(0.87, #000000));
  background-image: -o-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: -moz-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: -webkit-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: -ms-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: linear-gradient(to bottom, #065700 0%, #000000 87%);   border-radius: 2px;

}

  1. menubar.left-menu { 
  width: 100%;
  padding-left: 265px;

}

  1. menubar.right-menu { 
  text-align: right;
  padding-right: 275px;

}

  1. menubar.left-menu a { 
  border: none;
  color: white;

}

  1. menubar * { 
  background: transparent;

}

  1. menubar * a:hover{ 
  color: green;
  text-decoration: none;

}

  1. menubar > ul > li:last-child { 
  display: none;

}


/* TU-Eindhoven Style */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 

  display: none;

}

body { 

  font-family: 'Noto Sans', sans-serif;

}

ol, ul { 

  list-style: none;

}

  1. navpanel { 
  height:50px;
  width:965px;
  background:rgba(0,50,0,1);
  border-radius: 8px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  box-shadow:10px 10px 10px #888888;

}

.menu1 { 

  height:50px;
  width:200px;
  background:rgba(0,200,0,1);
  float:left;
  transition:all .2s ease-in-out 0s;
  border-radius: 7px;

}

.menu2 { 

  height:50px;
  width:200px;
  background:rgba(0,150,0,1);
  float:left;
  position:relative;
  left:-15px;
  transition:all .2s ease-in-out 0s;
  border-radius: 7px;

}

.menu3 { 

  height:50px;
  width:200px;
  background:rgba(0,100,0,1);
  float:left;
  position:relative;
  left:-30px;
  transition:all .2s ease-in-out 0s;
  border-radius: 7px;

}

.menu4 { 

  height:50px;
  width:200px;
  background:rgba(0,50,0,1);
  float:left;
  position:relative;
  left:-45px;
  transition:all .2s ease-in-out 0s;
  border-radius: 7px;

}

.p1 { 

  font-size: 20px;
  color: rgba(255,255,255,.75);
  position: relative;
  margin-left: 25px;
  margin-top: 10px;
  width: 100px;

}

.p2 { 

  font-size:16px;

}

.menu:hover { 

  width:300px;

}

.menu1:hover { 

  width:300px;

}

.menu2:hover { 

  width:300px;

}

.menu3:hover { 

  width:300px;
  height:auto;
  border-bottom-right-radius: 10px;
  box-shadow:10px 10px 10px #888888;

}

.menu1:hover .p1 { 

  color:rgba(255,255,255,1);

}

.menu2:hover .p1 { 

  color:rgba(255,255,255,1);

}

.menu3:hover .p1 { 

  color:rgba(255,255,255,1);

}

.menu4:hover .p1 { 

  color:rgba(255,255,255,1);

}

.menu3 ul { 

  visibility:hidden;
  list-style:none;
  font-size:16px;
  color:rgba(255,255,255,.75);
  position:relative;
  margin-left:25px;

}

.menu3:hover ul { 

  visibility:visible;

}

.menu3 ul li:hover { 

  color:rgba(255,255,255,1);

}

Retrieved from "http://2014.igem.org/Team:TU-Eindhoven/Style"