Difference between revisions of "Template:Aalto-Helsinki/CSS"

m (changed protocols to experiments, a more standard page)
(first test of mobile navigation, no real links in there)
Line 5: Line 5:
 
<head>
 
<head>
 
<link rel="stylesheet" href="https://2014.igem.org/Team:Aalto-Helsinki/bootstrap.min.css?action=raw&amp;ctype=text/css" type="text/css">
 
<link rel="stylesheet" href="https://2014.igem.org/Team:Aalto-Helsinki/bootstrap.min.css?action=raw&amp;ctype=text/css" type="text/css">
 +
<link rel="stylesheet" href="https://2014.igem.org/Team:Aalto-Helsinki/bootstrap.min.js?action=raw&ctype=text/javascript" type="text/javascript">
 
<link rel="stylesheet" href="https://2015.igem.org/Team:Aalto-Helsinki/CSS?action=raw&amp;ctype=text/css" type="text/css">
 
<link rel="stylesheet" href="https://2015.igem.org/Team:Aalto-Helsinki/CSS?action=raw&amp;ctype=text/css" type="text/css">
 
</head>
 
</head>
Line 19: Line 20:
 
       <div class="site-wrapper-inner">
 
       <div class="site-wrapper-inner">
  
         <div class="cover-container" style="margin-top:2%;">
+
<!-- navigation only for mobile devices -->
 +
<nav class="navbar navbar-default visible-xs visible-sm">
 +
  <div class="container-fluid">
 +
<!-- Brand and toggle get grouped for better mobile display -->
 +
    <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
        <span class="sr-only">Toggle navigation</span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
      <a class="navbar-brand" href="#">Nav</a>
 +
    </div>
 +
 
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
      <ul class="nav navbar-nav">
 +
        <li><a href="#">Project</a></li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Modeling <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Modeling</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Propane pathway</a></li>
 +
            <li><a href="#">Synergy model</a></li>
 +
            <li><a href="#">Modeling micelle</a></li>
 +
            <li><a href="#">Cellulose pathway</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Lab <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Modeling</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Propane pathway</a></li>
 +
            <li><a href="#">Synergy model</a></li>
 +
            <li><a href="#">Modeling micelle</a></li>
 +
            <li><a href="#">Cellulose pathway</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Results <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Modeling</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Propane pathway</a></li>
 +
            <li><a href="#">Synergy model</a></li>
 +
            <li><a href="#">Modeling micelle</a></li>
 +
            <li><a href="#">Cellulose pathway</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Practices<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Modeling</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Propane pathway</a></li>
 +
            <li><a href="#">Synergy model</a></li>
 +
            <li><a href="#">Modeling micelle</a></li>
 +
            <li><a href="#">Cellulose pathway</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Community <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Modeling</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Propane pathway</a></li>
 +
            <li><a href="#">Synergy model</a></li>
 +
            <li><a href="#">Modeling micelle</a></li>
 +
            <li><a href="#">Cellulose pathway</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">People <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Modeling</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Propane pathway</a></li>
 +
            <li><a href="#">Synergy model</a></li>
 +
            <li><a href="#">Modeling micelle</a></li>
 +
            <li><a href="#">Cellulose pathway</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a href="#">Journal</a></li>
 +
      </ul>
 +
 
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
 +
 
 +
 
 +
        <!-- let's hide the cover and main navigation from mobile devices! The code for their navbar is above. -->
 +
         <div class="cover-container hidden-sm hidden-xs " style="margin-top:2%;">
  
 
           <div class="inner cover">
 
           <div class="inner cover">

Revision as of 07:13, 18 August 2015