Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to put all the links target to sections of home

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 173
    Comment on it

    Hello readers if you want a single page website in which all the pages and links will be the sections of Home page. By using the bootstrap you can make it. Here you can see my code working as single page website.:-

     <!DOCTYPE html>
        <html>
        <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
          <style>
          body {
              position: relative; 
          }
          #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
          #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
          #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
          #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
          #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
          </style>
        </head>
        <body data-spy="scroll" data-target=".navbar" data-offset="50">
    
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div>
              <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                  <li><a href="#section1">Section 1</a></li>
                  <li><a href="#section2">Section 2</a></li>
                  <li><a href="#section3">Section 3</a></li>
                  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#section41">Section 4-1</a></li>
                      <li><a href="#section42">Section 4-2</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </nav>    
    
        <div id="section1" class="container-fluid">
          <h1>Section 1</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section2" class="container-fluid">
          <h1>Section 2</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section3" class="container-fluid">
          <h1>Section 3</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section41" class="container-fluid">
          <h1>Section 4 Submenu 1</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="section42" class="container-fluid">
          <h1>Section 4 Submenu 2</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
    
        </body>
        </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: