"Sidebar"
Bootstrap 3.3.0 Snippet by varun3129

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="devsite-section-nav devsite-nav nocontent" style="left: auto; max-height: 643px; position: relative; top: 0px;"> <ul class="devsite-nav-list devsite-nav-expandable"><li class="devsite-nav-item devsite-nav-item-heading1"> <span class="devsite-nav-title devsite-nav-title-no-path" track-type="leftNav" track-name="expandNavSectionNoLink" track-metadata-position="0"> <span id="">Cloud Speech API</span></span></li> <li class="devsite-nav-item devsite-nav-item devsite-nav-active"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Product Overview</span></a></li> <li class="devsite-nav-item"><a href="https://www.google.com" target="_blank" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Documentation</span></a></li> <li class="devsite-nav-item"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Quickstart</span></a></li> <li class="devsite-nav-item devsite-nav-item-heading"><span class="devsite-nav-title devsite-nav-title-no-path" track-type="leftNav" track-name="expandNavSectionNoLink" track-metadata-position="0"> <span>How-to Guides</span></span></li> <li class="devsite-nav-item"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>All How-to Guides</span></a></li> <li class="devsite-nav-item"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Authenticating to the API</span></a></li> <li class="devsite-nav-item"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Performing Synchronous Speech Recognition</span></a></li> <li class="devsite-nav-item"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Performing Asynchronous Speech Recognition</span></a></li> <li class="devsite-nav-item"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Streaming Speech Recognition</span></a></li> <li class="devsite-nav-item"><a href="#" class="devsite-nav-title gc-analytics-event" track-type="leftNav" track-name="titleLink" track-metadata-position="0" data-category="Site-Wide Custom Events" data-label="Left nav" data-action="click"> <span>Base64 Encoding</span></a></li> </ul> </nav>
.devsite-section-nav { background:#f7f7f7; float: left; margin-right: 40px; overflow-x: hidden; overflow-y: auto; padding: 16px 12px 16px 16px; width: 256px; } .devsite-nav ul { list-style-type: none; padding: 0; } ul { list-style: disc outside; } .devsite-section-nav ul li.devsite-nav-item-heading:first-child { color: #444; font-size: 14px; } .devsite-nav-expandable .devsite-nav-item { padding-left: 16px; } .devsite-nav-item { line-height: 16px; margin: 8px 0 0; position: relative; } li, li p { margin: 8px 0; padding: 0; } .devsite-nav-expandable .devsite-nav-item { padding-left: 16px; } .devsite-nav-list>.devsite-nav-item-heading { border-top: 1px solid #cfd8dc; margin: 15px -16px 0; padding: 16px 16px 0; } .devsite-section-nav ul li.devsite-nav-item-heading:first-child { color: #444; font-size: 14px; } devsite-cloud-white.css:1 .devsite-nav-list>.devsite-nav-item-heading:first-child, .devsite-nav-item-section-expandable.devsite-nav-accordion:first-child { border: 0; padding-top: 0; } devsite-cloud-white.css:1 .devsite-page-nav>ul>:first-child, .devsite-page-nav-embedded>ul>:first-child, .devsite-section-nav>ul>:first-child, .devsite-section-nav-responsive>ul>:first-child { margin-top: 0; } devsite-cloud-white.css:1 .devsite-nav-expandable .devsite-nav-item { padding-left: 16px; } devsite-cloud-white.css:1 .devsite-nav-list>.devsite-nav-item-heading { border-top: 1px solid #cfd8dc; margin: 15px -16px 0; padding: 16px 16px 0; } devsite-cloud-white.css:1 .devsite-nav-item-heading { font-weight: bold; } devsite-cloud-white.css:1 .devsite-nav-item { line-height: 16px; margin: 8px 0 0; position: relative; } .devsite-nav-list>.devsite-nav-item-heading1 { margin: 15px -16px 0 ; padding: 16px 16px 0;} .devsite-nav-active, .devsite-nav-active .devsite-nav-title, .devsite-nav-responsive-tabs .devsite-nav-item-heading>.devsite-nav-title.devsite-nav-active { color: #039be5; font-weight: 500; } .devsite-nav-title { color: #212121; display: block; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a:visited,:active { color:#039be5; outline: 0; text-decoration: none; } .devsite-nav-active .devsite-nav-title{ color: #039be5; font-weight: 500; }

Related: See More


Questions / Comments: