Difference between revisions of "Template:Austin UTexas"

(Undo revision 49344 by Martinez.zacharya (talk))
Line 107: Line 107:
 
 
 
/**************************************************************** MENU ***************************************************************/
 
/**************************************************************** MENU ***************************************************************/
.menu-wrap {
+
/* Wrapper for the menu */
    width:100%;
+
.igem_2017_menu_wrapper {  
    background:#FFF;
+
width: 15%;  
    position:relative;
+
height:100vh;  
}
+
position:fixed;
+
right:0%;
.menu {
+
    margin-top:-6px;
+
    padding:0;
+
    position: fixed;
+
    z-index:1;
+
    left: 0px;
+
    width:100%;
+
    background:#FFF;
+
}
+
+
.menu li {
+
    margin:0px;
+
    list-style:none;
+
}
+
+
.menu a {
+
    transition:all linear 0.15s;
+
    padding:10px;
+
    color:#BDBDBD;
+
}
+
+
.menu li:hover > a, .menu .current-item > a {
+
    text-decoration:none;
+
    color:#000000;
+
}
+
+
.menu .arrow {
+
    font-size:11px;
+
    line-height:0%;
+
}
+
+
/*----- Top Level -----*/
+
menu > ul {
+
    white-space: nowrap;
+
}
+
 
+
 
+
.menu > ul > li {
+
    margin-top:-5px;
+
    float:left;
+
    display:inline-block;
+
    position:relative;
+
    font-size:12px;
+
}
+
+
.menu > ul > li > a {
+
      display: inline-block;
+
      float: none;
+
}
+
+
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
+
    background:#DF7F3E;
+
}
+
+
/*----- Bottom Level -----*/
+
.menu li:hover ul {
+
    display:block;
+
}
+
+
.sub-menu {
+
    width:200%;
+
    padding:0px 0px;
+
    position:absolute;
+
    top:90%;
+
    left:0px;
+
    transition:opacity linear 0.15s;
+
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
+
    background:#2e2728;
+
    display:none;
+
    z-index:1;
+
}
+
+
.sub-menu li {
+
    display:block;
+
    font-size:13px;
+
}
+
+
.sub-menu li a {
+
    padding:10px 10px;
+
    display:block;
+
}
+
+
.sub-menu li a:hover, .sub-menu .current-item a {
+
    text-color:#000000;
+
    background:#DF7F3E;
+
}
+
 
+
 
+
 
+
 
+
/* Wrapper for the menu */
+
.menu_wrapper {  
+
width:100%;  
+
                margin-top:-10px;
+
                margin-left:-20px;
+
height:0px;  
+
position:fixed;  
+
 
padding:0px;
 
padding:0px;
display:inline;
+
float:right;  
                list-style: none;
+
border-left: 1px solid #d3d3d3;  
              box-shadow:0px 1px 3px rgba(0,0,0,0.2);
+
background-color:#dddddd;  
}
+
text-align:left;
 
+
font-family:Tahoma, Geneva, sans-serif;  
 
+
overflow-y: auto;
/* styling for the menu items */
+
overflow-x: hidden;
.menu_item {
+
                background-color:#f2f2f2;
+
width:11%;
+
                float:left;
+
margin:0px 0px 0px 0px;
+
                padding-top: 10px;
+
                padding-bottom: 10px;  
+
border-bottom: 1px solid #d3d3d3;  
+
font-weight:bold;
+
                text-align: center;
+
color:#000000;  
+
cursor: pointer;
+
                list-style: none;  
+
}
+
 
+
/* when hovering on a menu item */
+
.menu_item:hover {
+
color:#000000;
+
background-color: #DF7F3E;
+
 
}
 
}
  
/* decoration icon for the menu buttons*/
+
/* this hides the scrollbar to keep view consistency */
.icon {
+
.igem_2017_menu_wrappe::-webkit-scrollbar {
float:left; 
+
display: none;  
font-size:12px;
+
font-weight:bold;  
+
 
}
 
}
 
 
/* this is the icon for when the content is collapsed */
+
.plus::before {
+
/* styling for links in the menu, removes the line under text */
content:"✊";
+
.igem_2017_menu_wrapper a {
                color:#CF5300;
+
text-decoration: none;  
 
}
 
}
/* this is the icon for when the content is expanded */
 
.less::before {
 
content: "✌";
 
                color:#CF5300;
 
}
 
  
/* styling for the ul that creates the buttons */
+
 
ul.menu_items {
+
/* styling for the images in the menu */
width:100%;
+
.igem_2017_menu_wrapper img {  
margin-left:0px;
+
width: 100%;
padding:0px;
+
list-style: none;  
+
 
}
 
}
  
/* styling for the li that are the menu items */
+
/* styling for the menu buttons */
.menu_items li {  
+
.igem_2017_menu_wrapper .menu_button {  
width:100%;
+
width: 100%;  
margin-top: 0px;  
+
padding: 10px 0px 10px 15px;  
padding: 0px 0px 0px 0px ;  
+
float:left;  
display:block;
+
border-bottom: 1px solid #d3d3d3;
border-bottom: 1px solid #d3d3d3
+
font-size: 12px;  
font-weight:bold;
+
font-weight: bold;  
text-decoration:none;  
+
color: #5e5f5f;  
color:#000000;
+
cursor: pointer;
                text-align:left;
+
list-style-type:none;  
+
cursor:pointer;  
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
+
 
}
 
}
  
.menu_item a {
+
 
width: 100%;
+
.igem_2017_menu_wrapper .menu_bottom_padding {  
margin-left: -20px;
+
width: 100%;  
padding: 11px 90px 12px 20px;
+
height: 30px;
text-decoration: none;
+
float:left;
color:black;
+
 
}
 
}
  
/* When hovering on a menu item */
+
.menu_button.direct_to_page {  
.menu_items li:hover {  
+
padding-left: 36px;
background-color:#ff9900;
+
color: #000000;
+
 
}
 
}
  
/* styling for the submenus */
 
.submenu {
 
width:100%;
 
display: none; 
 
font-weight:bold;
 
cursor:pointer;
 
  
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
 +
width:10%;
 +
float:left;
 
}
 
}
  
/* moving the margin for the submenu ul list */
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
ul.submenu {  
+
content: "+"; 
width: 100%;
+
}
margin: 10px 0px -11px 0px;
+
list-style: none;
+
.open::before {
 +
content: "-" !important; 
 +
}
 +
 +
 +
 +
/* styling for the menu buttons on hover */
 +
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
 +
background-color: #3399ff;
 +
text-decoration: none;
 +
color:#ffffff;  
 
}
 
}
  
/*styling for the submenu buttons */
+
/* styling for the menu button when it is the current page */
.submenu li {  
+
.current_page {  
width: 100%;
+
background-color:#7fc1f7  !important;
margin-left: 10px;
+
color:#5e5f5f !important;
margin-bottom: 0px;
+
                list-style-type: none;
+
 
}
 
}
  
  
/* hover state for the submenu buttons */
+
/* styling for the submenu buttons */
.submenu li a {
+
.igem_2017_menu_wrapper .submenu_button {  
 
width: 100%;  
 
width: 100%;  
padding: 5px 10px;  
+
padding: 10px 0px 10px 34px;  
display: inline-block;
+
float:left;
border-bottom: 1px solid #d3d3d3;
+
background-color:#f2f2f2;  
background-color:white;  
+
border-bottom: 1px solid #d3d3d3;  
text-decoration:none;
+
font-size: 12px;  
color:#000000;  
+
color: #5e5f5f;  
 +
cursor: pointer;
 
}
 
}
  
.submenu li a:hover  {
+
/* wrapper for the submenu items, they are hidden by default*/
background-color:#000000;
+
.igem_2017_menu_wrapper .submenu_wrapper {  
color: #CF5300;
+
display:none;
 
}
 
}
  
 
+
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
+
.igem_2017_menu_wrapper #display_menu_control {
.collapsable_menu_control {  
+
display:none;
width:100%;
+
text-align:center;
padding: 15px 0px;
+
display:none;
+
background-color:#000000;  
+
text-align:center
+
font-weight:bold;
+
color:#CF5300;
+
cursor:pointer;
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
transition: all 0.4s ease;  
+
 
}
 
}
 +
  
/* when hovering on that button */
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
.collapsable_menu_control:hover {  
+
 
background-color: #CF5300;
+
/* Wrapper for the content */
color:#000000;
+
.igem_2017_content_wrapper {
 +
width: 81%;
 +
margin: 2%;
 +
display:block;
 +
float:left;
 +
background-color:white;  
 +
font-family:Tahoma, Geneva, sans-serif;  
 
}
 
}
 
  
  

Revision as of 06:35, 11 July 2017

Austin_UTexas