<!DOCTYPE html> <html> <head> <title>Bootstrap Scrollspy Vertical Navbar</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> <div class="container-fluid"> <style type="text/css"> ul.nav-pills { top: 20px; position: relative; margin:0px 0px 50px; } div.col-sm-9 div { height: 630px; padding:200px 20px 0px; font-size: 14px; } #HTML5 {color: #fff; background-color: #606;} #CSS3 {color: #fff; background-color: #F60;} #JAVASCRIPT {color: #fff; background-color: #390;} #BOOTSTRAP {color: #fff; background-color: #FC0;} @media screen and (max-width: 810px) { #section1, #section2, #section3, #section41, #section42 { margin-left: 0px; } } </style> <div class="row"> <nav class="col-md-3 col-sm-3 col-xs-12" id="myScrollspy"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#HTML5">HTML5</a></li> <li><a href="#CSS3">CSS3</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE TUTORIALS<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#JAVASCRIPT">JAVASCRIPT</a></li> <li><a href="#BOOTSTRAP">BOOTSTRAP</a></li> </ul> </li> </ul> </nav> <div class="col-md-9 col-sm-9 col-xs-12"> <div id="HTML5"> <h1>HTML5</h1> <p>HTML5 (No space between "HTML" and "5")is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard.</p> <p>It was published in 28 October 2014, W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016. The World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and Document Object Model (DOM) Level 2 HTML.</p> </div> <div id="CSS3"> <h1>CSS3</h1> <p>The CSS was started to develop around 1998. And till 2009, it was under development. The first working draft of CSS3 came in 19-01-2001. but it was initially declared early in the June 1999. The main difference between css2 and css3 is Media Queries, Namespaces, Selectors Level 3, Color.</p> </div> <div id="JAVASCRIPT"> <h1>JAVASCRIPT</h1> <p>JavaScript is the programming language of the Web. Javascript Most commonly used websites this is client-side script to interact with the user and make dynamic pages. All modern web browsers on desktops, tablets, and smart phones are using JavaScript. JavaScript is part of the triad of technologies that all Web developers must learn: HTML(Hyper Text Markup Language) to specify the content of web pages, CSS(Cascading Style Sheets) to specify the presentation of web pages, and JavaScript to specify the behavior of web pages.</p> </div> <div id="BOOTSTRAP"> <h1>BOOTSTRAP</h1> <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.</p> <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p> </div> </div> </div> </div> </body> </html>
Output :
Topic :
Bootstrap Scrollspy Vertical Navbar
