User:Vinoo/2014Design7

From 2014.igem.org

< User:Vinoo(Difference between revisions)
m
m
 
(30 intermediate revisions not shown)
Line 64: Line 64:
margin: 0px auto;  
margin: 0px auto;  
}
}
-
#leftLinks, #rightLinks {
+
.leftLinks, .rightLinks {
display: inline-block;
display: inline-block;
margin: 0px;
margin: 0px;
}
}
-
#leftLinks li:hover, #rightLinks li:hover {
+
.leftLinks li:hover, .rightLinks li:hover {
background-color: #4b4b4b;  
background-color: #4b4b4b;  
}
}
-
#rightLinks {
+
.rightLinks {
float: right;
float: right;
}
}
-
#leftLinks li {
+
.leftLinks li {
display: table-cell;
display: table-cell;
-
padding: 0px 30px;
+
padding: 0px 30px;  
}
}
-
#rightLinks li {
+
.rightLinks li {
display: table-cell;
display: table-cell;
padding: 0px 10px;
padding: 0px 10px;
 +
cursor: pointer;
}
}
#notify {
#notify {
Line 103: Line 104:
width: 100%;
width: 100%;
background-color: #4b4b4b;  
background-color: #4b4b4b;  
 +
padding: 20px 0px;
}
}
.dropMenuContainer {
.dropMenuContainer {
Line 108: Line 110:
height: 100%;  
height: 100%;  
margin: 0px auto;  
margin: 0px auto;  
 +
opacity: 0;
}
}
-
.dropMenu li {
+
.dropMenuContainer ul {
 +
list-style-type: none;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
.dropMenuContainer li {
 +
list-style: none;
display: list-item;
display: list-item;
padding: 0px;
padding: 0px;
}
}
-
+
.dropMenuContainer li:hover {
 +
text-decoration: none;
 +
background-color: #383838;
 +
}
 +
.dropMenuContainer li a {
 +
color: rgb(204, 204, 204);
 +
cursor: pointer;
 +
width: 100%;
 +
display: block;
 +
padding: 3px 6px;
 +
}
 +
.dropMenuContainer li a:hover {
 +
text-decoration: none;
 +
}
 +
 
 +
#nlogin_iframe {
 +
display: block;
 +
position:relative;
 +
width: 900px;
 +
height: 220px;
 +
border: none;
 +
font-family: ariel, sans-serif;
 +
text-align: center;
 +
color: white;
 +
background-color: transparent;
 +
margin-top: 10px;
 +
}
 +
#close {
 +
background-color: #383838;
 +
padding: 2px 6px;
 +
border: 1px solid rgb(204, 204, 204);
 +
float: right;
 +
display: inline-block;
 +
cursor: pointer;
 +
color: rgb(204, 204, 204);
 +
}
 +
#close:hover {
 +
background-color: #4b4b4b;
 +
text-decoration: none;
 +
}
 +
.menuListTitle {
 +
font-weight: bold;
 +
text-decoration: underline;
 +
display: block;
 +
padding: 3px 6px;
 +
}
</style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Line 120: Line 174:
<nav id="loginBar">
<nav id="loginBar">
<div id="loginBarContainer">
<div id="loginBarContainer">
-
<ul id="leftLinks">
+
<ul class="leftLinks">
<li class="dropToggle">iGEM
<li class="dropToggle">iGEM
<div class="dropMenu">
<div class="dropMenu">
<div class="dropMenuContainer container_16">
<div class="dropMenuContainer container_16">
-
<div class="grid_4">
+
<div class="grid_3">
-
<ul>
+
<ul><span class="menuListTitle">Quick Links</span>
-
<li>2014.igem.org</li>
+
<li><a href="https://igem.org">igem.org</a></li>
-
<li>igem.org</li>
+
<li><a href="http://parts.igem.org">parts.igem.org</a></li>
-
<li>parts.igem.org</li>
+
<li><a href="https://2014.igem.org">2014.igem.org</a></li>
 +
<li><a href="https://2014hs.igem.org">2014hs.igem.org</a></li>
 +
<li><a href="https://2013.igem.org">2013.igem.org</a></li>
 +
<li><a href="https://igem.org/Previous_iGEM_Competitions">previous years</a></li>
</ul>
</ul>
</div>
</div>
Line 137: Line 194:
<div class="dropMenu">
<div class="dropMenu">
<div class="dropMenuContainer container_16">
<div class="dropMenuContainer container_16">
-
<div class="grid_4">
+
<div class="grid_3">
-
Aliquam dolor purus, pharetra ac tellus id, eleifend venenatis augue. Quisque lobortis augue lacus, eget consectetur diam dapibus quis. Donec ac felis eget erat scelerisque ornare ut eu metus. Mauris blandit et tellus sit amet ultricies. Nam turpis nunc, fringilla congue urna scelerisque, luctus fermentum metus. Fusce quis rhoncus quam. In eleifend commodo volutpat. Ut a porta nibh, ut gravida diam. Quisque at dolor eget massa dignissim molestie at ac leo.
+
<ul><span class="menuListTitle">Page Tools</span>
 +
<li>edit</li>
 +
<li>history</li>
 +
<li>watch</li>
 +
<li>discussion</li>
 +
<li>move</li>
 +
<li>related changes</li>
 +
</ul>
 +
</div>
 +
<div class="grid_3">
 +
<ul><span class="menuListTitle">Upload Tools</span>
 +
<li>upload</li>
 +
<li>list of upload files</li>
 +
<li>my uploads</li>
 +
</ul>
 +
</div>
 +
<div class="grid_3">
 +
<ul><span class="menuListTitle">Other</span>
 +
<li>special pages</li>
 +
<li>privacy policy</li>
 +
<li>disclaimers</li>
 +
</ul>
 +
</div>
 +
<div class="grid_2 push_5">
 +
<img src="https://2014.igem.org/wiki/skins/common/images/poweredby_mediawiki_88x31.png" />
 +
<img src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
</div>
</div>
</div>
</div>
Line 146: Line 228:
<div class="dropMenu">
<div class="dropMenu">
<div class="dropMenuContainer container_16">
<div class="dropMenuContainer container_16">
-
<div class="grid_4">
+
<div class="grid_8">
-
Fusce quis rhoncus quam. In eleifend commodo volutpat. Ut a porta nibh, ut gravida diam. Quisque at dolor eget massa dignissim molestie at ac leo.
+
<input id="search_text" value="" style="width:400px;margin-bottom:10px;" />
 +
</div>
 +
<div class="clear"></div>
 +
<div class="grid_3">
 +
<ul>
 +
<li>2014.igem.org</li>
 +
<li>2014hs.igem.org</li>
 +
<li>igem.org</li>
 +
<li>parts.igem.org</li>
 +
</ul>
</div>
</div>
</div>
</div>
Line 162: Line 253:
</li>
</li>
</ul>
</ul>
-
<ul id="rightLinks">
+
<ul class="rightLinks">
-
<li>login</li>
+
<li class="loginToggle">login
 +
<div class="dropMenu">
 +
<div class="dropMenuContainer container_16">
 +
<div class="grid_16">
 +
<a onclick="close_login_iframe()" id="close">close</a>
 +
</div>
 +
<div class="grid_16">
 +
<iframe id="nlogin_iframe" src="https://igem.org/Login2" frameborder="0"></iframe>
 +
</div>
 +
</div>
 +
</div>
 +
</li>
<li>
<li>
<div id="notify">
<div id="notify">
Line 179: Line 281:
<script>
<script>
$(document).ready(function() {
$(document).ready(function() {
-
$('.dropToggle').mouseenter(function() {
+
$('.loginToggle').click(function() {
-
$('.dropMenu', this).stop(true,true).slideDown('normal');
+
if ($('.dropMenu').is(':visible')) {
 +
$('.loginToggle').removeClass('active');
 +
}
 +
else {
 +
$('.dropMenu', this).stop(true,true).slideDown('fast', function() {
 +
$('.dropMenuContainer', this).stop(true,true).animate({opacity: "1"},150);
 +
});
 +
}
});
});
-
$('.dropToggle').mouseleave(function() {
+
 
-
$('.dropMenu', this).stop(true,true).slideUp('normal');
+
$('.dropToggle').hover(function() {
 +
$('.dropMenu', this).stop(true,true).delay(150).slideDown('fast', function() {
 +
$('.dropMenuContainer', this).stop(true,true).animate({opacity: "1"},100);
 +
});
 +
}, function() {
 +
$('.dropMenu', this).stop(true,true).delay(150).slideUp('fast', function() {
 +
$('.dropMenuContainer', this).stop(true,true).animate({opacity: "0"});
 +
});
});
});
 +
 +
$('#close').click(function() {
 +
  location.reload();
 +
});
 +
});
});
</script>
</script>
 +
 +
<div class="container_16" style="margin-top: 40px;">
 +
<div class="grid_16">
 +
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</p>
 +
 +
<p>Mauris urna orci, ultrices ut pulvinar sed, tincidunt quis neque. Donec semper tortor mattis massa adipiscing, et consequat ipsum eleifend. Curabitur vehicula gravida leo ut varius. Nullam elementum, odio in elementum porta, magna leo aliquet neque, eget blandit augue eros vel massa. Integer felis tellus, cursus ac arcu a, ullamcorper laoreet felis. Donec nec pretium felis. Phasellus nec arcu mattis, congue leo id, posuere nibh. Pellentesque velit sapien, lobortis at erat vitae, molestie sagittis leo. Aliquam pulvinar erat sed lacus tristique, id blandit nulla mattis. Pellentesque a libero mi. Curabitur mi justo, tempus nec pretium et, laoreet et tellus. Donec tincidunt vitae velit eget commodo. Nunc quis massa varius, lacinia est dictum, volutpat neque. Ut pharetra commodo metus non molestie. Etiam laoreet ut sapien nec gravida.</p>
 +
 +
<p>Aliquam dolor purus, pharetra ac tellus id, eleifend venenatis augue. Quisque lobortis augue lacus, eget consectetur diam dapibus quis. Donec ac felis eget erat scelerisque ornare ut eu metus. Mauris blandit et tellus sit amet ultricies. Nam turpis nunc, fringilla congue urna scelerisque, luctus fermentum metus. Fusce quis rhoncus quam. In eleifend commodo volutpat. Ut a porta nibh, ut gravida diam. Quisque at dolor eget massa dignissim molestie at ac leo.</p>
 +
 +
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada, urna eu cursus vehicula, lectus nisl posuere elit, eget mattis nulla erat id urna. Maecenas ultricies diam id leo mollis, at mattis eros laoreet. Maecenas commodo eleifend luctus. Curabitur diam mauris, mollis ut volutpat et, scelerisque convallis lorem. Quisque arcu est, malesuada pellentesque ligula a, luctus egestas neque. In eu auctor leo, ut lobortis ante.</p>
 +
 +
<p>Nam quis lectus auctor urna vulputate viverra eget eget lectus. Donec porta ac ipsum vitae aliquam. Nulla tempor non nisl in dictum. Nam convallis sapien vitae sem pharetra convallis. Sed sit amet justo in tortor tempus vehicula. Quisque lobortis luctus vestibulum. In quis neque et dui placerat elementum. In sodales velit vel lacus dapibus tincidunt. Maecenas placerat nec diam in malesuada. Quisque sollicitudin mattis ultricies. Nullam pretium commodo elit ac bibendum.</p>
 +
 +
</div>
 +
</div>
 +
</body>
</body>
</html>
</html>

Latest revision as of 16:10, 29 January 2014

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.

Mauris urna orci, ultrices ut pulvinar sed, tincidunt quis neque. Donec semper tortor mattis massa adipiscing, et consequat ipsum eleifend. Curabitur vehicula gravida leo ut varius. Nullam elementum, odio in elementum porta, magna leo aliquet neque, eget blandit augue eros vel massa. Integer felis tellus, cursus ac arcu a, ullamcorper laoreet felis. Donec nec pretium felis. Phasellus nec arcu mattis, congue leo id, posuere nibh. Pellentesque velit sapien, lobortis at erat vitae, molestie sagittis leo. Aliquam pulvinar erat sed lacus tristique, id blandit nulla mattis. Pellentesque a libero mi. Curabitur mi justo, tempus nec pretium et, laoreet et tellus. Donec tincidunt vitae velit eget commodo. Nunc quis massa varius, lacinia est dictum, volutpat neque. Ut pharetra commodo metus non molestie. Etiam laoreet ut sapien nec gravida.

Aliquam dolor purus, pharetra ac tellus id, eleifend venenatis augue. Quisque lobortis augue lacus, eget consectetur diam dapibus quis. Donec ac felis eget erat scelerisque ornare ut eu metus. Mauris blandit et tellus sit amet ultricies. Nam turpis nunc, fringilla congue urna scelerisque, luctus fermentum metus. Fusce quis rhoncus quam. In eleifend commodo volutpat. Ut a porta nibh, ut gravida diam. Quisque at dolor eget massa dignissim molestie at ac leo.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada, urna eu cursus vehicula, lectus nisl posuere elit, eget mattis nulla erat id urna. Maecenas ultricies diam id leo mollis, at mattis eros laoreet. Maecenas commodo eleifend luctus. Curabitur diam mauris, mollis ut volutpat et, scelerisque convallis lorem. Quisque arcu est, malesuada pellentesque ligula a, luctus egestas neque. In eu auctor leo, ut lobortis ante.

Nam quis lectus auctor urna vulputate viverra eget eget lectus. Donec porta ac ipsum vitae aliquam. Nulla tempor non nisl in dictum. Nam convallis sapien vitae sem pharetra convallis. Sed sit amet justo in tortor tempus vehicula. Quisque lobortis luctus vestibulum. In quis neque et dui placerat elementum. In sodales velit vel lacus dapibus tincidunt. Maecenas placerat nec diam in malesuada. Quisque sollicitudin mattis ultricies. Nullam pretium commodo elit ac bibendum.

Retrieved from "http://2014.igem.org/User:Vinoo/2014Design7"