Team:Sevilla/Templates/lmenu
From 2011.igem.org
(Difference between revisions)
(136 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<!--=========================================CARGAS============================================= --> | <!--=========================================CARGAS============================================= --> | ||
<!--Intentamos cargar la libreria jQuery de Google, si no va pues la BobString --> | <!--Intentamos cargar la libreria jQuery de Google, si no va pues la BobString --> | ||
- | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1. | + | |
- | < | + | <script src="http://institucional.us.es/igembiouse/js/jquery-1.6.2.min.js"></script> |
+ | <script src="http://institucional.us.es/igembiouse/js/jquery-ui-1.8.15.custom.min.js"></script> | ||
+ | |||
+ | <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> --> | ||
+ | |||
+ | <link href='http://institucional.us.es/igembiouse/css/overcast/jquery-ui-1.8.15.custom.css' rel='stylesheet' type='text/css'> | ||
+ | |||
+ | |||
+ | <script src="https://sites.google.com/site/bobstringfiles/arcanum/jquery.mousewheel.min.js"></script> | ||
+ | <script src="https://sites.google.com/site/bobstringfiles/arcanum/jquery.panorama360.js"></script> | ||
+ | <script src="http://code.vostrel.cz/jquery.reel.js"></script> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'> | ||
+ | |||
</head> | </head> | ||
Line 11: | Line 23: | ||
<!--========================================HTML=========================================--> | <!--========================================HTML=========================================--> | ||
+ | <div id="menuImagen"> | ||
+ | </div> | ||
+ | <div id="menu"> | ||
<ul class="myMenu"> | <ul class="myMenu"> | ||
- | + | <li id="homeLi"> <a href="/Team:Sevilla">Home</a> </li> | |
- | <li><a href="#"> | + | <li> <a href="/Team:Sevilla/Team">The team</a> </li> |
- | + | <li> <a href="#">The project</a> | |
- | + | <ul> | |
- | + | <li> <a href="/Team:Sevilla/Project">Project summary</a> </li> | |
- | + | <li> <a href="/Team:Sevilla/Project/ubbit">Ubbit Standard</a> </li> | |
- | + | <li> <a href="/Team:Sevilla/Project/adder">Full adder module</a> </li> | |
+ | <li> <a href="/Team:Sevilla/Project/applications">Applications</a> </li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a href="#"> | + | <li><a href="#">Software</a> |
- | + | <ul> | |
- | + | <li> <a href="/Team:Sevilla/Software/GPSE">GPSE (Graphical P-System Editor)</a> </li> | |
- | + | <li> <a href="/Team:Sevilla/Software/Ubbit">Ubbit Standard Web Database</a> </li> | |
- | + | ||
- | + | ||
</ul> | </ul> | ||
- | </li> | + | |
- | <li><a href=" | + | </li> |
- | <li><a href=" | + | <li><a href="/Team:Sevilla/Modelling">Modelling</a> </li> |
+ | <li><a href="/Team:Sevilla/Safety">Safety</a> </li> | ||
+ | <!-- <li><a href="/Team:Sevilla/Attributions">Attributions</a></li> --> | ||
+ | <li><a href="/Team:Sevilla/Notebook">Notebook</a> </li> | ||
+ | <li><a href="/Team:Sevilla/sponsors">Sponsors</a></li> | ||
+ | <li><a href="/Team:Sevilla/acknowledgments">Acknowledgments</a></li> | ||
+ | <li><a href="/Team:Sevilla/arcanumTV">ArcanumTV</a></li> | ||
+ | <li><a href="/Team:Sevilla/Gallery">Gallery</a></li> | ||
+ | |||
</ul> | </ul> | ||
+ | |||
+ | |||
+ | <!-- Los botones sociales --> | ||
+ | <div id="social"> | ||
+ | <a href='http://twitter.com/iGEMSevilla11'> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/7/7e/Twitter-32x32.png" /> | ||
+ | </a> | ||
+ | <a href='http://www.facebook.com/pages/Sevilla-iGEM2011-Acanum-Project/187115714638929'> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/c/c8/Facebook-32x32.png"/> | ||
+ | </a> | ||
+ | <a href='http://www.youtube.com/user/iGEMSevilla11'> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/3/38/Youtube-32x32.png"/> | ||
+ | </a> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
<!--========================================ESTILO=========================================--> | <!--========================================ESTILO=========================================--> | ||
Line 37: | Line 78: | ||
<style> | <style> | ||
- | + | ||
- | + | #menu | |
- | margin: | + | { |
- | + | margin-top:0px; | |
+ | margin-left:0px; | ||
width:150px; | width:150px; | ||
- | + | height:100%; | |
+ | float:left; /*sin esto no encuadra el contenido del body*/ | ||
+ | |||
} | } | ||
- | + | #menuImagen | |
- | + | { | |
- | + | position:absolute; | |
+ | margin-top:-25px; | ||
+ | margin-left:0px; | ||
+ | width:150px; | ||
+ | height:100% ! important; | ||
+ | background-color:#6fa898; | ||
+ | z-index:-1; | ||
+ | |||
} | } | ||
+ | /*style the main menu*/ | ||
+ | |||
+ | .myMenu li | ||
+ | { | ||
+ | list-style:none; | ||
+ | font-size:12px; | ||
+ | float:right; | ||
+ | font-weight: bold; | ||
+ | font-family: 'Lekton' | ||
+ | } | ||
+ | #homeLi | ||
+ | { | ||
+ | font-size:18px; | ||
+ | } | ||
.myMenu li a:link, .myMenu li a:visited { | .myMenu li a:link, .myMenu li a:visited { | ||
+ | position:relative; | ||
display:block; | display:block; | ||
text-decoration:none; | text-decoration:none; | ||
padding: 0.5em 2em; | padding: 0.5em 2em; | ||
margin:0; | margin:0; | ||
- | + | font-weight:bold; | |
color:white;/*color fuente*/ | color:white;/*color fuente*/ | ||
- | |||
} | } | ||
- | .myMenu li a:hover { | + | .myMenu li a:hover {/*fondo color caja cuando paso encima*/ |
- | + | background-color:#1e7c81; | |
+ | position:relative; | ||
+ | |||
} | } | ||
- | /*style the sub menu*/ | + | /*style the sub menu, con un buen z-index para que no le pise el contenido de la wiki*/ |
- | .myMenu li ul { | + | .myMenu li ul /*cajas desplegadas*/ |
+ | { | ||
position:absolute; | position:absolute; | ||
visibility:hidden; | visibility:hidden; | ||
- | + | margin-left:10%; | |
- | margin: | + | margin-top:-31px; |
- | + | z-index:3; | |
} | } | ||
- | .myMenu li ul li { | + | .myMenu li ul li |
+ | { | ||
display:inline; | display:inline; | ||
- | float:none; | + | float:none; z-index:15; |
} | } | ||
- | .myMenu li ul li a:link, .myMenu li ul li a:visited { | + | .myMenu li ul li a:link, .myMenu li ul li a:visited |
- | + | { | |
+ | background-color:#6fa898; /*color cajas desplegadas*/ | ||
width:auto; | width:auto; | ||
+ | color:black; z-index:3; | ||
} | } | ||
- | .myMenu li ul li a:hover { | + | .myMenu li ul li a:hover /*hover en las cajitas desplegadas*/ |
- | background-color:# | + | { |
+ | background-color:#96d7c8; | ||
+ | color:white; z-index:3; | ||
} | } | ||
+ | #social | ||
+ | { | ||
+ | margin-top:380px; | ||
+ | width:150px; | ||
+ | height:50px; | ||
+ | } | ||
+ | |||
+ | #social img | ||
+ | { | ||
+ | margin-bottom:5px; | ||
+ | margin-right:5px; | ||
+ | float:right; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
- | |||
+ | <!--========================================SCRIPTS=========================================--> | ||
+ | |||
+ | <!--Desplegar submenu---> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(document).ready(function() { | $(document).ready(function() { | ||
Line 105: | Line 195: | ||
}); | }); | ||
+ | </script> | ||
+ | |||
+ | <!--Imagen anillo---> | ||
+ | <script type="text/javascript"> | ||
+ | $("#menu").prepend('<img style="z-index:-1;margin-left:30px;margin-top:-160px;position: absolute;opacity:0.2;filter:alpha(opacity=20);" src="https://static.igem.org/mediawiki/2011/2/25/Ring.png" /> '); | ||
+ | </script> | ||
+ | |||
+ | <!--Flechita---> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | // hide #back-top first | ||
+ | $("#back-top").hide(); | ||
+ | |||
+ | // fade in #back-top | ||
+ | $(function () { | ||
+ | $(window).scroll(function () { | ||
+ | if ($(this).scrollTop() > 100) { | ||
+ | $('#back-top').fadeIn(); | ||
+ | } else { | ||
+ | $('#back-top').fadeOut(); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // scroll body to 0px on click | ||
+ | $('#back-top a').click(function () { | ||
+ | $('body,html').animate({ | ||
+ | scrollTop: 0 | ||
+ | }, 800); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 22:50, 21 September 2011