Team:UCLA/sams extra css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<script type="text/css">
<script type="text/css">
-
.test{
+
#wrapper {
-
background-color:red;
+
  padding-left: 250px;
-
width:600px;
+
  transition: all 0.4s ease 0s;
-
height:50px;
+
-
border: 2px solid #0000FF;
+
-
border-radius: 25px;
+
-
padding: 10px  40px;
+
-
margin-bottom: 20px;
+
-
margin-top: 20px;
+
-
margin-left:20px;
+
-
margin-right:20px;
+
}
}
-
.test > p {
+
 
-
font-family: "Comic Sans MS", cursive, sans-serif;
+
#sidebar-wrapper {
 +
  margin-left: -250px;
 +
  left: 250px;
 +
  width: 250px;
 +
  background: #000;
 +
  position: fixed;
 +
  height: 100%;
 +
  overflow-y: auto;
 +
  z-index: 1000;
 +
  transition: all 0.4s ease 0s;
}
}
-
.image{
+
 
-
content:url(http://www.allaboutdrawings.com/image-files/spiderweb-drawing-corner.jpg);
+
#wrapper.active {
-
max-width: 200px;
+
  padding-left: 0;
-
max-height:200px;
+
}
}
-
.overlay{
+
 
-
background-color: #7FFFD4;
+
#wrapper.active #sidebar-wrapper {
 +
  left: 0;
}
}
-
.sidebar{
+
 
-
background-color: #7FFFD4;
+
#page-content-wrapper {
 +
  width: 100%;
}
}
-
#test2{
+
 
-
position:fixed;
+
 
-
left:-100px;
+
 
-
background-color:red;
+
.sidebar-nav {
-
width:30px;
+
  position: absolute;
-
height:500px;
+
  top: 0;
-
padding: 10px 40px;
+
  width: 250px;
-
border: 2px solid #0000FF;
+
  list-style: none;
-
border-radius: 25px;
+
  margin: 0;
-
margin-bottom: 20px;
+
  padding: 0;
-
margin-top: 20px;
+
-
top:200px;
+
}
}
-
#test2 > p {
+
 
-
font-family: "Comic Sans MS", cursive, sans-serif;
+
.sidebar-nav li {
 +
  line-height: 40px;
 +
  text-indent: 20px;
}
}
 +
 +
.sidebar-nav li a {
 +
  color: #999999;
 +
  display: block;
 +
  text-decoration: none;
 +
  padding-left: 60px;
 +
}
 +
 +
.sidebar-nav li a span:before {
 +
  position: absolute;
 +
  left: 0;
 +
  color: #41484c;
 +
  text-align: center;
 +
  width: 20px;
 +
  line-height: 18px;
 +
}
 +
 +
.sidebar-nav li a:hover,
 +
.sidebar-nav li.active {
 +
  color: #fff;
 +
  background: rgba(255,255,255,0.2);
 +
  text-decoration: none;
 +
}
 +
 +
.sidebar-nav li a:active,
 +
.sidebar-nav li a:focus {
 +
  text-decoration: none;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand {
 +
  height: 65px;
 +
  line-height: 60px;
 +
  font-size: 18px;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand a {
 +
  color: #999999;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand a:hover {
 +
  color: #fff;
 +
  background: none;
 +
}
 +
 +
 +
 +
.content-header {
 +
  height: 65px;
 +
  line-height: 65px;
 +
}
 +
 +
.content-header h1 {
 +
  margin: 0;
 +
  margin-left: 20px;
 +
  line-height: 65px;
 +
  display: inline-block;
 +
}
 +
 +
#menu-toggle {
 +
    text-decoration: none;
 +
}
 +
 +
.btn-menu {
 +
  color: #000;
 +
}
 +
 +
.inset {
 +
  padding: 20px;
 +
}
 +
 +
@media (max-width:767px) {
 +
 +
#wrapper {
 +
  padding-left: 0;
 +
}
 +
 +
#sidebar-wrapper {
 +
  left: 0;
 +
}
 +
 +
#wrapper.active {
 +
  position: relative;
 +
  left: 250px;
 +
}
 +
 +
#wrapper.active #sidebar-wrapper {
 +
  left: 250px;
 +
  width: 250px;
 +
  transition: all 0.4s ease 0s;
 +
}
 +
 +
#menu-toggle {
 +
  display: inline-block;
 +
}
 +
 +
.inset {
 +
  padding: 15px;
 +
}
 +
 +
}
 +
</script>
</script>
<script type="text/javascript">
<script type="text/javascript">
-
$(document).ready(function(){
+
/*Menu-toggle*/
-
  $("#test2").mouseenter(function(){
+
    $("#menu-toggle").click(function(e) {
-
    $("#test2").animate({
+
        e.preventDefault();
-
      left:'2px',
+
        $("#wrapper").toggleClass("active");
     });
     });
-
  }).mouseleave(function(){
+
 
-
    $("#test2").animate({
+
 
-
      left:'-80px',
+
    $('body').scrollspy({ target: '#spy', offset:80});
 +
 
 +
 
 +
    $('a[href*=#]:not([href=#])').click(function() {
 +
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
 +
 
 +
            var target = $(this.hash);
 +
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
 +
            if (target.length) {
 +
                $('html,body').animate({
 +
                    scrollTop: target.offset().top
 +
                }, 1000);
 +
                return false;
 +
            }
 +
        }
     });
     });
-
  });
 
-
});
 
</script>
</script>
</html>
</html>

Revision as of 21:09, 7 August 2014

Retrieved from "http://2014.igem.org/Team:UCLA/sams_extra_css"