Difference between revisions of "ASIJBIO"

Line 1: Line 1:
  
 
<html>
 
<html>
 +
<head>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
−
<!-- Primary Navbar -->
+
</head>
−
<div class="navbar navbar-inverse">
+
<body>
−
   <div class="container">
+
 
 +
<nav class="navbar navbar-inverse">
 +
   <div class="container-fluid">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
−
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
       </button>
 
       </button>
−
      <a class="navbar-brand" href="#">Project name</a>
 
 
     </div>
 
     </div>
−
     <div class="collapse navbar-collapse">
+
     <div class="collapse navbar-collapse" id="myNavbar">
−
       <ul class="nav navbar-nav navbar-right">
+
       <ul class="nav navbar-nav">
−
         <li class="dropdown active">
+
         <li class="active"><a href="#">Home</a></li>
−
          <a href="http://www.google.com/" class="dropdown-toggle" data-toggle="dropdown">Menu #1 <b class="caret"></b></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="#">Link #1</a></li>
+
−
            <li><a href="#">Link #2</a></li>
+
−
          </ul>
+
−
        </li>
+
 
         <li class="dropdown">
 
         <li class="dropdown">
−
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #2 <b class="caret"></b></a>
+
           <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/ASIJProjectDescription">Our Project<span class="caret"></span></a>
 
           <ul class="dropdown-menu">
 
           <ul class="dropdown-menu">
−
             <li><a href="#">Link #1</a></li>
+
             <li><a href="#">Page 1-1</a></li>
−
             <li><a href="#">Link #2</a></li>
+
             <li><a href="#">Page 1-2</a></li>
 +
            <li><a href="#">Page 1-3</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
−
         <li class="dropdown">
+
         <li><a href="https://2016.igem.org/ASIJJournal">Journal</a></li>
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #3 <b class="caret"></b></a>
+
         <li><a href="https://2016.igem.org/ASIJBIO">Our Team</a></li>
−
          <ul class="dropdown-menu">
+
         <li><a href="#">Pictures</a></li>
−
            <li><a href="#">Link #1</a></li>
+
−
            <li><a href="#">Link #2</a></li>
+
−
          </ul>
+
−
         </li>      
+
−
        <li class="dropdown">
+
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #4 <b class="caret"></b></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="#">Link #1</a></li>
+
−
            <li><a href="#">Link #2</a></li>
+
−
          </ul>
+
−
         </li>      
+
−
        <li class="dropdown">
+
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #5 <b class="caret"></b></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="#">Link #1</a></li>
+
−
            <li><a href="#">Link #2</a></li>
+
−
          </ul>
+
−
        </li>       
+
−
        <li class="dropdown">
+
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #6 <b class="caret"></b></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="#">Link #1</a></li>
+
−
            <li><a href="#">Link #2</a></li>
+
−
          </ul>
+
−
        </li>      
+
 
       </ul>
 
       </ul>
−
    </div><!--/.nav-collapse -->
 
−
  </div>
 
−
</div>
 
−
<head>
 
−
<style>
 
−
.dropbtn {
 
−
    background-color: #4CAF50;
 
−
    color: white;
 
−
    padding: 16px;
 
−
    font-size: 16px;
 
−
    border: none;
 
−
    cursor: pointer;
 
−
}
 
  
−
.dropdown {
+
     </div>
−
     position: relative;
+
−
    display: inline-block;
+
−
}
+
−
 
+
−
.dropdown-content {
+
−
    display: none;
+
−
    position: absolute;
+
−
    right: 0;
+
−
    background-color: #f9f9f9;
+
−
    min-width: 160px;
+
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
}
+
−
 
+
−
.dropdown-content a {
+
−
    color: black;
+
−
    padding: 12px 16px;
+
−
    text-decoration: none;
+
−
    display: block;
+
−
}
+
−
 
+
−
.dropdown-content a:hover {background-color: #f1f1f1}
+
−
 
+
−
.dropdown:hover .dropdown-content {
+
−
    display: block;
+
−
}
+
−
 
+
−
.dropdown:hover .dropbtn {
+
−
    background-color: #3e8e41;
+
−
}
+
−
</style>
+
−
</head>
+
−
<body>
+
−
 
+
−
 
+
−
<div class="dropdown" style="float:left;">
+
−
  <button class="dropbtn">Left</button>
+
−
  <div class="dropdown-content" style="left:0;">
+
−
    <a href="#">Link 1</a>
+
−
    <a href="#">Link 2</a>
+
−
    <a href="#">Link 3</a>
+
 
   </div>
 
   </div>
−
</div>
+
</nav>
−
 
+
</body>
−
<div class="dropdown" style="float:right;">
+
−
  <button class="dropbtn">Right</button>
+
−
  <div class="dropdown-content">
+
−
    <a href="#">Link 1</a>
+
−
    <a href="#">Link 2</a>
+
−
    <a href="#">Link 3</a>
+
−
  </div>
+
−
</div>
+
−
 
+
 
</body>
 
</body>
 
<style type="text/css">
 
<style type="text/css">

Revision as of 06:21, 16 September 2016

The BIG TEMPLATE : RESPONSIVE and FREE