Template:CSS/Team:Glasgow/Draft1

From 2014.igem.org

(Difference between revisions)
Line 161: Line 161:
/****** End of Back to top Button *******/
/****** End of Back to top Button *******/
 +
 +
 +
 +
 +
/******** Start of menubar dropdown ********/
 +
 +
 +
 +
 +
#menu{
 +
    padding: 0;
 +
    margin: 0 !important;
 +
 +
 +
 +
      background-color:#000000
 +
    background-image: -webkit-linear-gradient(#7B007B,#FF0033);
 +
    background-image: -moz-linear-gradient(#7B007B,#FF0033);
 +
    background-image: -ms-linear-gradient(#7B007B,#FF0033);
 +
    background-image: -o-linear-gradient(#7B007B,#FF0033); 
 +
    background-image: linear-gradient(#7B007B,#FF0033);
 +
    background-image: linear-gradient(#7B007B, #FF0033 140%);
 +
    border-top: 3px solid #000037;
 +
    box-shadow: 0 4px 4px #000000;
 +
 +
 +
 +
 +
 +
 +
    -webkit-hyphens: none;
 +
    -moz-hyphens: none;
 +
    -ms-hyphens: none;
 +
    -o-hyphens: none;
 +
    hyphens: none;
 +
    z-index: 50;
 +
}
 +
 +
#menu { display:block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
position:absolute;
 +
top:200px;
 +
left:12%;  <!-- Positioning of Menubar -->
 +
background-color:transparent;
 +
font-size:18px;
 +
font-family:Arial, Helvetica, Sans-serif;
 +
text-align: center;
 +
}
 +
 +
 +
.menuitems {border-right: 2px solid black;
 +
line-height:2ch;
 +
padding:0px;
 +
background-color:transparent;
 +
}
 +
 +
 +
.menulinks:link {text-decoration:none;
 +
color:black;}
 +
.menulinks:visited {text-decoration:none;
 +
color:black}
 +
.menulinks:hover {text-decoration:none;}
 +
 +
 +
 +
#menu ul {position:absolute;
 +
max-height:0em;  <!-- Needs to be here for some reason!? (To make dds hidden) -->
 +
left:0px;
 +
top: 0em;
 +
            top: 43px; <!-- positioning of dd list/box, from top of menu li -->
 +
margin:0 !important;
 +
padding:0;
 +
overflow:hidden;
 +
transition: 0.5s max-height 0.3s;
 +
background-color:transparent;
 +
    background-image: linear-gradient(rgba(50, 50, 150, 0.5), rgba(50, 50, 150, 0.5));  <!--Darkish blue -->
 +
test-align:center;<!-- Maybe remove previous positioning for this -->
 +
font-size:0;
 +
} 
 +
 +
 +
 +
#menu li { 
 +
    display:inline-block; 
 +
    list-style: none; /* for IE7 */
 +
    margin: 0 0 0 0;
 +
    padding-bottom: 0.3%;
 +
height:100%; <!-- Trying to get lines to be full height of list items -->
 +
} 
 +
 +
#menu > li {
 +
    width:100px;  <!-- Width of each li in menu bar -->
 +
}
 +
 +
#menu > li, #menu > li li { 
 +
    position: relative; 
 +
    display:inline-block; 
 +
    padding: auto; 
 +
    background-color: transparent; 
 +
} 
 +
 +
#menu > li li {
 +
    width: 100%;
 +
    padding: 3% 0; <!-- Padding of dd list: top sides -->
 +
}
 +
 +
#menu a { 
 +
    display:inline-block; 
 +
    margin: auto;
 +
    color: #66FFFF;  <!-- Font colour of menubar -->
 +
    text-decoration:none;
 +
    width: 100%;
 +
} 
 +
 +
<!-- For images in menu -->
 +
#menu a span{
 +
    display: block;
 +
    margin: auto;
 +
    width: 50%;
 +
}
 +
 +
#menu > li li { background: transparent none; }
 +
 +
#menu > li li a { color: #66FFFF; } <!-- Colour of text in dropdown box -->
 +
 +
#menu > li li:hover a { color: #66FFFF; <!-- Colour of text in dropdown box hover-->
 +
} 
 +
 +
#menu > li li:hover {
 +
    background:transparent; <!-- Background of dd box -->
 +
} 
 +
 +
#menu > li:first-child { 
 +
    border-left: 2px solid #000000;
 +
} 
 +
 +
#menu > li li:first-child {
 +
    border-bottom: 1px solid #000000; <!-- border of dropdown lists -->
 +
}
 +
 +
#menu > li li + li{
 +
    border-top: 1px solid #000000;
 +
    border-bottom: 1px solid #000000; <!-- Border for DD items -->
 +
}
 +
 +
#menu > li li:last-child {
 +
    border-top: 1px solid #000000;
 +
border-bottom: 2px solid #000000; 
 +
}
 +
 +
 +
#menu > li:hover { 
 +
    background-color: rgba(50, 50, 150, 0.5);  <!-- Hover over menu bg color -->
 +
} 
 +
 +
#menu > li:hover ul { 
 +
    max-height:20em;  <!-- max length of color box -->
 +
}
 +
 +
 +
/******** End of Dropdown *********/
 +
 +
Line 192: Line 356:
-
<table id="linksbar">
+
<ul id="menu">
-
<tr> <td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow" class="menulinks">Home </a> </td>
+
    <li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow" class="menulinks"> <br> Home <br> </a> </li><!--
-
<td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Team" class="menulinks"> Team </a> </td>
+
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Team" class="menulinks"> <br> Team </a> </li><!--
-
<td class="menuitems"><a href="https://igem.org/Team.cgi?year=2014&team_name=Glasgow" class="menulinks"> Team Profile </a></td>
+
--><li class="menuitems"><a href="https://igem.org/Team.cgi?year=2014&team_name=Glasgow" class="menulinks"> Team <br> Profile </a></li><!--
-
<td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Project" class="menulinks"> Project</a></td>
+
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Project" class="menulinks"> <br> Project</a></li><!--
-
<td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Parts" class="menulinks"> BioBricks</a></td>
+
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Parts" class="menulinks"> <br> BioBricks</a></li><!--
-
<td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Modelling_Intro" class="menulinks"> Modelling</a></td>
+
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Modeling" class="menulinks"> <br> Modelling</a></li><!--
-
<td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Weekly_Report" class="menulinks">Weekly Report</a></td>
+
-
<td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Safety" class="menulinks"> Safety </a></td>
+
--><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Weekly_Report" class="menulinks">Weekly Report</a>
-
<td class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Human_Practices" class="menulinks">Human Practices</a></td>
+
-
<td> <a href="https://2014.igem.org/Team:Glasgow/Attributions" class="menulinks"> Sponsors and Attributions </a></td>
+
<ul>
 +
      <li><a href="">Week 1</a></li>
 +
      <li><a href="">Week 2</a></li>
 +
      <li><a href="">Week 3</a></li>
 +
      </ul>
 +
 +
 +
 +
</li><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Safety" class="menulinks"> <br> Safety </a>
 +
</li><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Human_Practices" class="menulinks">Human Practices</a>
 +
</li><li class="menuitems"><a href="https://2014.igem.org/Team:Glasgow/Attributions" class="menulinks"> <br> Sponsors </a></li>
-
</tr>
+
-
</table>
+
</ul>
 +
 
<a href="https://2014.igem.org/Main_Page" target="_blank" id="igemlogo"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="150px"/></a>
<a href="https://2014.igem.org/Main_Page" target="_blank" id="igemlogo"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="150px"/></a>

Revision as of 11:33, 21 August 2014

Bubble Test Page

Click to edit this page


Retrieved from "http://2014.igem.org/Template:CSS/Team:Glasgow/Draft1"