Difference between revisions of "Template:British Columbia Navbar"

m
 
(44 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
<style>
 
<style>
 
span.glyphicon-grain{
 
span.glyphicon-grain{
−
     font-size: 1.5em;
+
     font-size: 2em;
 
}
 
}
  
Line 78: Line 78:
 
   .navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
 
   .navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
 
     color: #ffffff;
 
     color: #ffffff;
−
     background-color: #8CC63F;
+
     background-color: #8cc63f;
 
   }
 
   }
 
   .navbar-green .navbar-nav .open .dropdown-menu > .active > a,
 
   .navbar-green .navbar-nav .open .dropdown-menu > .active > a,
Line 167: Line 167:
  
 
/*submenu styling for the navbars*/
 
/*submenu styling for the navbars*/
−
.dropdown-menu{
+
.dropdown-submenu {
−
  float: right;
+
    position:relative;
 
}
 
}
 +
.dropdown-submenu>.dropdown-menu {
 +
    top:0;
 +
    left:100%;
 +
    margin-left:-1px;
 +
    width: 100%;
 +
 +
-webkit-border-radius: 0px;
 +
-moz-border-radius: 0px;
 +
-o-border-radius: 0px;
 +
border-radius: 0px;
 +
}
 +
 +
 +
.dropdown-submenu>a:after {
 +
    display:block;
 +
    content:" ";
 +
    float:right;
 +
    width:0;
 +
    height:0;
 +
    border-color:transparent;
 +
    border-style:solid;
 +
    border-width:5px 0 5px 5px;
 +
    border-left-color:#cccccc;
 +
    margin-top:5px;
 +
    margin-right:-10px;
 +
}
 +
 +
.dropdown-submenu.pull-left {
 +
    float:none !important;
 +
}
 +
.dropdown-submenu.pull-left>.dropdown-menu {
 +
    top: 0;
 +
    left:-100%;
 +
    margin-left:-1px;
 +
    width: 100%;
 +
}
 +
@media (max-width: 767px) {
 +
.dropdown-submenu>.dropdown-menu {margin-left: 15px;}
 +
.dropdown-submenu.pull-left>.dropdown-menu {margin-left: 15px;}
 +
 +
.navbar-green .open>a{
 +
  background-color: #8cc63f;
 +
}
 +
 +
}
 +
 +
 
</style>
 
</style>
  
Line 180: Line 227:
 
   $(".navbar-green").show();
 
   $(".navbar-green").show();
 
}
 
}
 +
 +
//dropdown menu items open onclick instead of hover (mobile-friendly)
 +
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
 +
event.preventDefault();
 +
event.stopPropagation();
 +
$(this).parent().siblings().removeClass('open');
 +
$(this).parent().toggleClass('open');
 +
});
 +
 
});
 
});
  
Line 230: Line 286:
 
         <ul class="nav navbar-nav navbar-right">
 
         <ul class="nav navbar-nav navbar-right">
 
           <li class="dropdown">
 
           <li class="dropdown">
−
             <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Project">Project
+
             <a href="#"class="dropdown-toggle" data-toggle="dropdown">Project
 
         <span class="caret"></span></a>
 
         <span class="caret"></span></a>
 
             <ul class="dropdown-menu">
 
             <ul class="dropdown-menu">
−
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Overview">Overview</a></li>
+
               <li><a href="https://2016.igem.org/Team:British_Columbia/Description">Description</a></li>
 
               <li class="dropdown-submenu">
 
               <li class="dropdown-submenu">
−
                 <a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
+
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
 
                 <ul class="dropdown-menu">
 
                 <ul class="dropdown-menu">
 
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">Cellulases</a></li>
 
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">Cellulases</a></li>
Line 243: Line 299:
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Bio-Pathways">Biosynthetic Pathways</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Bio-Pathways">Biosynthetic Pathways</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Consortia">Consortia</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Consortia">Consortia</a></li>
 +
              <li><a href="https://2016.igem.org/Team:British_Columbia/Proof">Proof</a></li>
 
             </ul>
 
             </ul>
 
           </li>
 
           </li>
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Model">Modelling</a></li>
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Model">Modelling</a></li>
−
          <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices">Human Practices</a></li>
 
 
           <li class="dropdown">
 
           <li class="dropdown">
−
             <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Team">Team
+
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practices
 +
        <span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
              <li><a href="https://2016.igem.org/Team:British Columbia/HP/Gold">Introduction</a></li>
 +
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Infographic">Infographic</a></li>
 +
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Interview">Interview</a></li>
 +
            </ul>
 +
          </li>         
 +
            <li class="dropdown">
 +
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team
 
         <span class="caret"></span></a>
 
         <span class="caret"></span></a>
 
             <ul class="dropdown-menu">
 
             <ul class="dropdown-menu">
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Bios">Bios</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Bios">Bios</a></li>
−
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Attributions">Attributions</a></li>
+
               <li><a href="https://2016.igem.org/Team:British_Columbia/Attributions">Attributions</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Sponsors">Sponsors</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Sponsors">Sponsors</a></li>
 
             </ul>
 
             </ul>
Line 258: Line 323:
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></li>
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></li>
 
           <li class="dropdown">
 
           <li class="dropdown">
−
             <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Achievements">Achievements
+
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements
 
         <span class="caret"></span></a>
 
         <span class="caret"></span></a>
 
             <ul class="dropdown-menu">
 
             <ul class="dropdown-menu">
−
               <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Collaborations">Collaborations</a></li>
+
               <li><a href="https://2016.igem.org/Team:British_Columbia/Collaborations">Collaborations</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Medal_Criteria">Medal Criteria</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Medal_Criteria">Medal Criteria</a></li>
 
               <li class="dropdown-submenu pull-left">
 
               <li class="dropdown-submenu pull-left">
−
                 <a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
+
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
 
                 <ul class="dropdown-menu">
 
                 <ul class="dropdown-menu">
−
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts/Basic_Parts">Basic Parts</a></li>
+
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Parts">Parts</a></li>
−
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts/Composite_Parts">Composite Parts</a></li>
+
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Basic_Part">Basic Part</a></li>
−
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts/Parts_Collection">Parts Collection</a></li>
+
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Composite_Part">Composite Part</a></li>
−
 
+
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Part_Collection">Parts Collection</a></li>
 
                 </ul>
 
                 </ul>
 
               </li>
 
               </li>
Line 294: Line 359:
 
         <ul class="nav navbar-nav navbar-right">
 
         <ul class="nav navbar-nav navbar-right">
 
           <li class="dropdown">
 
           <li class="dropdown">
−
             <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Project">Project
+
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project
 
         <span class="caret"></span></a>
 
         <span class="caret"></span></a>
 
             <ul class="dropdown-menu">
 
             <ul class="dropdown-menu">
−
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Overview">Overview</a></li>
+
               <li><a href="https://2016.igem.org/Team:British_Columbia/Description">Description</a></li>
 
               <li class="dropdown-submenu">
 
               <li class="dropdown-submenu">
−
                 <a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
+
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
 
                 <ul class="dropdown-menu">
 
                 <ul class="dropdown-menu">
 
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">Cellulases</a></li>
 
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Cellulases">Cellulases</a></li>
Line 307: Line 372:
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Bio-Pathways">Biosynthetic Pathways</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Bio-Pathways">Biosynthetic Pathways</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Consortia">Consortia</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Consortia">Consortia</a></li>
 +
              <li><a href="https://2016.igem.org/Team:British_Columbia/Proof">Proof</a></li>
 
             </ul>
 
             </ul>
 
           </li>
 
           </li>
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Model">Modelling</a></li>
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Model">Modelling</a></li>
−
          <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices">Human Practices</a></li>
+
        <li class="dropdown">
 +
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practices
 +
        <span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
              <li><a href="https://2016.igem.org/Team:British Columbia/HP/Gold">Introduction</a></li>
 +
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Infographic">Infographic</a></li>
 +
              <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Interview">Interview</a></li>
 +
            </ul>
 +
          </li>  
 
           <li class="dropdown">
 
           <li class="dropdown">
−
             <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Team">Team
+
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team
 
         <span class="caret"></span></a>
 
         <span class="caret"></span></a>
 
             <ul class="dropdown-menu">
 
             <ul class="dropdown-menu">
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Bios">Bios</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Bios">Bios</a></li>
−
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Attributions">Attributions</a></li>
+
               <li><a href="https://2016.igem.org/Team:British_Columbia/Attributions">Attributions</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Sponsors">Sponsors</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Sponsors">Sponsors</a></li>
 
             </ul>
 
             </ul>
Line 322: Line 396:
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></li>
 
           <li><a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></li>
 
           <li class="dropdown">
 
           <li class="dropdown">
−
             <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Achievements">Achievements
+
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements
 
         <span class="caret"></span></a>
 
         <span class="caret"></span></a>
 
             <ul class="dropdown-menu">
 
             <ul class="dropdown-menu">
−
               <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Collaborations">Collaborations</a></li>
+
               <li><a href="https://2016.igem.org/Team:British_Columbia/Collaborations">Collaborations</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Medal_Criteria">Medal Criteria</a></li>
 
               <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Medal_Criteria">Medal Criteria</a></li>
 
               <li class="dropdown-submenu pull-left">
 
               <li class="dropdown-submenu pull-left">
−
                 <a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
+
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
 
                 <ul class="dropdown-menu">
 
                 <ul class="dropdown-menu">
−
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts/Basic_Parts">Basic Parts</a></li>
+
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Parts">Parts</a></li>
−
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts/Composite_Parts">Composite Parts</a></li>
+
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Basic_Part">Basic Part</a></li>
−
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts/Parts_Collection">Parts Collection</a></li>
+
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Composite_Part">Composite Part</a></li>
−
 
+
                   <li><a href="https://2016.igem.org/Team:British_Columbia/Part_Collection">Parts Collection</a></li>
 
                 </ul>
 
                 </ul>
 
               </li>
 
               </li>

Latest revision as of 03:25, 20 October 2016

Navbar CSS