Difference between revisions of "Template:British Columbia Navbar"

m
 
(34 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 173: Line 173:
 
     top:0;
 
     top:0;
 
     left:100%;
 
     left:100%;
−
    margin-top:-6px;
 
 
     margin-left:-1px;
 
     margin-left:-1px;
 
     width: 100%;
 
     width: 100%;
Line 183: Line 182:
 
}
 
}
  
−
.dropdown-submenu:hover>.dropdown-menu {
+
 
−
    display:block;
+
−
}
+
 
.dropdown-submenu>a:after {
 
.dropdown-submenu>a:after {
 
     display:block;
 
     display:block;
Line 199: Line 196:
 
     margin-right:-10px;
 
     margin-right:-10px;
 
}
 
}
−
.dropdown-submenu:hover>a:after {
+
 
−
    border-left-color:#ffffff;
+
−
}
+
 
.dropdown-submenu.pull-left {
 
.dropdown-submenu.pull-left {
 
     float:none !important;
 
     float:none !important;
Line 208: Line 203:
 
     top: 0;
 
     top: 0;
 
     left:-100%;
 
     left:-100%;
−
    margin-top: -6px;
 
 
     margin-left:-1px;
 
     margin-left:-1px;
 
     width: 100%;
 
     width: 100%;
 
}
 
}
 
@media (max-width: 767px) {
 
@media (max-width: 767px) {
−
.dropdown-submenu>.dropdown-menu {margin-left: 10px;}
+
.dropdown-submenu>.dropdown-menu {margin-left: 15px;}
−
.dropdown-submenu.pull-left>.dropdown-menu {margin-left: 10px;}
+
.dropdown-submenu.pull-left>.dropdown-menu {margin-left: 15px;}
 +
 
 +
.navbar-green .open>a{
 +
  background-color: #8cc63f;
 
}
 
}
 +
 +
}
 +
  
 
</style>
 
</style>
Line 227: 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 277: 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 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 290: 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 305: 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_Part">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_Part">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/Part_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 341: 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 354: 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 369: 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_Part">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_Part">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/Part_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