Difference between revisions of "ASIJBIO"

Line 1: Line 1:
  
 
<html>
 
<html>
−
<div class="navbar siteTools">
+
<head>
−
  <div class="container">
+
<style>
−
     <div class="navbar-header">
+
.dropbtn {
−
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
     background-color: #4CAF50;
−
        <span class="icon-bar"></span>
+
    color: white;
−
        <span class="icon-bar"></span>
+
    padding: 16px;
−
        <span class="icon-bar"></span>
+
    font-size: 16px;
−
      </button>
+
    border: none;
−
    </div>
+
    cursor: pointer;
−
    <form class="navbar-form navbar-right" role="search">
+
}
−
      <div class="form-group">
+
 
−
        <input type="text" class="form-control input-sm" placeholder="Search">
+
.dropdown {
−
      </div>
+
    position: relative;
−
      <button type="submit" class="btn btn-default btn-sm">Submit</button>
+
    display: inline-block;
−
    </form>
+
}
−
    <div class="collapse navbar-collapse">   
+
 
−
      <ul class="nav navbar-nav pull-right">
+
.dropdown-content {
−
        <li><a href="#">Site Tool Link</a></li>
+
    display: none;
−
        <li><a href="#">Site Tool Link</a></li>
+
    position: absolute;
−
        <li><a href="#">Site Tool Link</a></li>
+
    right: 0;
−
      </ul>
+
    background-color: #f9f9f9;
−
    </div><!--/.nav-collapse -->
+
    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>
 +
 
 +
<h2>Aligned Dropdown Content</h2>
 +
<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p>
 +
 
 +
<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>
 
</div>
  
−
<!-- Primary Navbar -->
+
<div class="dropdown" style="float:right;">
−
<div class="navbar navbar-inverse">
+
  <button class="dropbtn">Right</button>
−
  <div class="container">
+
  <div class="dropdown-content">
−
    <div class="navbar-header">
+
    <a href="#">Link 1</a>
−
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
    <a href="#">Link 2</a>
−
        <span class="icon-bar"></span>
+
    <a href="#">Link 3</a>
−
        <span class="icon-bar"></span>
+
−
        <span class="icon-bar"></span>
+
−
      </button>
+
−
      <a class="navbar-brand" href="#">Project name</a>
+
−
    </div>
+
−
    <div class="collapse navbar-collapse">
+
−
      <ul class="nav navbar-nav navbar-right">
+
−
        <li class="dropdown active">
+
−
          <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">
+
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu #2 <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 #3 <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 #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>
+
−
    </div><!--/.nav-collapse -->
+
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
 +
</body>
 
<style type="text/css">
 
<style type="text/css">
  

Revision as of 05:48, 10 September 2016

Aligned Dropdown Content

Determine whether the dropdown content should go from left to right or right to left with the left and right properties.

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3
The BIG TEMPLATE : RESPONSIVE and FREE