Difference between revisions of "Team:BABS UNSW Australia/pseudoknots"
Line 3: | Line 3: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | .group { | ||
+ | background: yellow; | ||
+ | width: 200px; | ||
+ | height: 500px; | ||
+ | } | ||
+ | .group .subgroup { | ||
+ | background: orange; | ||
+ | width: 150px; | ||
+ | height: 200px; | ||
+ | } | ||
+ | #sidebar.affix { | ||
+ | top: 20px; | ||
+ | } | ||
+ | /* sidebar */ | ||
+ | .bs-docs-sidebar { | ||
+ | padding-left: 20px; | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | /* all links */ | ||
+ | .bs-docs-sidebar .nav>li>a { | ||
+ | color: #999; | ||
+ | border-left: 2px solid transparent; | ||
+ | padding: 4px 20px; | ||
+ | font-size: 13px; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | /* nested links */ | ||
+ | .bs-docs-sidebar .nav .nav>li>a { | ||
+ | padding-top: 1px; | ||
+ | padding-bottom: 1px; | ||
+ | padding-left: 30px; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | /* active & hover links */ | ||
+ | .bs-docs-sidebar .nav>.active>a, | ||
+ | .bs-docs-sidebar .nav>li>a:hover, | ||
+ | .bs-docs-sidebar .nav>li>a:focus { | ||
+ | color: #563d7c; | ||
+ | text-decoration: none; | ||
+ | background-color: transparent; | ||
+ | border-left-color: #563d7c; | ||
+ | } | ||
+ | /* all active links */ | ||
+ | .bs-docs-sidebar .nav>.active>a, | ||
+ | .bs-docs-sidebar .nav>.active:hover>a, | ||
+ | .bs-docs-sidebar .nav>.active:focus>a { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | /* nested active links */ | ||
+ | .bs-docs-sidebar .nav .nav>.active>a, | ||
+ | .bs-docs-sidebar .nav .nav>.active:hover>a, | ||
+ | .bs-docs-sidebar .nav .nav>.active:focus>a { | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | |||
+ | /* hide inactive nested list */ | ||
+ | .bs-docs-sidebar .nav ul.nav { | ||
+ | display: none; | ||
+ | } | ||
+ | /* show active nested list */ | ||
+ | .bs-docs-sidebar .nav>.active>ul.nav { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
/* Sticky footer styles | /* Sticky footer styles | ||
Line 85: | Line 153: | ||
<body> | <body> | ||
− | + | <nav class="col-xs-3 bs-docs-sidebar"> | |
+ | <ul id="sidebar" class="nav nav-stacked"> | ||
+ | <li> | ||
+ | <a href="#GroupA">Group A</a> | ||
+ | <ul class="nav nav-stacked"> | ||
+ | <li><a href="#GroupASub1">Sub-Group 1</a></li> | ||
+ | <li><a href="#GroupASub2">Sub-Group 2</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#GroupB">Group B</a> | ||
+ | <ul class="nav nav-stacked"> | ||
+ | <li><a href="#GroupBSub1">Sub-Group 1</a></li> | ||
+ | <li><a href="#GroupBSub2">Sub-Group 2</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#GroupC">Group C</a> | ||
+ | <ul class="nav nav-stacked"> | ||
+ | <li><a href="#GroupCSub1">Sub-Group 1</a></li> | ||
+ | <li><a href="#GroupCSub2">Sub-Group 2</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
+ | </div> | ||
<div class="col-xs-9"> | <div class="col-xs-9"> | ||
<div class="container"> | <div class="container"> |
Revision as of 00:31, 9 September 2015